1. デバッガ。
また、JavaScript コードにdebugger;を追加して、ブレークポイント効果を手動で作成できることも前述しました。
条件付きブレークポイントが必要ですか? ifステートメントで囲むだけです。
コードをコピーします。コードは次のとおりです。 if (somethingHappens) {
デバッガ;
}
ただし、プログラムがリリースされる前に必ず削除してください。
2. DOM ノードが変更されたときにトリガーされるブレークポイントを設定します。場合によっては、DOM が制御下になく、奇妙な変更が加えられ、問題の原因を見つけることが困難になることがあります。
Google Chrome の開発ツールには、この状況に特に対処できる「Break on...」という非常に便利な機能があります。DOM ノードを右クリックすると、このメニュー項目が表示されます。
ブレークポイントのトリガー条件は、ノードの削除、ノードの属性の変更、またはその子ノードの 1 つの変更に設定できます。
3. Ajax ブレークポイントXHR ブレークポイント、または Ajax ブレークポイントを使用すると、その名前が示すように、特定の Ajax 呼び出しが発生したときにそれをトリガーするブレークポイントを設定できます。
このトリックは、Web アプリケーションのネットワーク トラフィックをデバッグするときに非常に効果的です。
4. モバイル端末シミュレーション環境Google Chrome には、モバイル デバイスをシミュレートするための非常に興味深いツールがいくつかあり、モバイル デバイス上でプログラムがどのように実行されるかをデバッグできます。
これを見つける方法は次のとおりです。F12 を押して開発者ツールを表示し、次にESCキーを押します (現在のタブをコンソールにすることはできません)。デバッグ ウィンドウの 2 番目のレイヤーが表示され、その中にさまざまなシミュレーション デバイスがあります。 「エミュレーション」タブ。オプション。
もちろん、これは実際の iPhone になるわけではなく、iPhone の寸法、タッチ イベント、ブラウザのユーザー エージェント値をシミュレートするだけです。
5. 監査を使用して Web サイトを改善するYSlowは素晴らしいツールです。 Google Chrome の開発者ツールにも、 Auditsと呼ばれるよく似たツールがあります。
Web サイトを迅速に監査し、Web サイトを最適化するための非常に実用的で効果的な提案と方法を提供します。
他にもありますか？これらのツールがなかったらどうやって開発するかわかりません。これに関するさらなるヒントも書く予定です。わかり次第、最新の投稿をお待ちください。