JavaScript デバッグのヒントの 5 つの要点

＃＃＃導入＃＃＃ プロジェクトに取り組んでいたときにこの記事を検索し、非常に実用的であることがわかったので、プロジェクトで簡単に適用できるように再版して全員と共有しました 私は以前に printf デバッグを使用したことがあり、それ以来、常にこの方法を使用するとバグをより速く解決できるように感じています。状況によっては、より優れたツールが必要となります。ここでは、きっと役立つと思われる最良のツールをいくつか紹介します:

1.デバッガ

「debugger;」ステートメントを使用して、コードに強制ブレークポイントを追加できます。ブレークポイント条件が必要ですか? IF 句で囲むだけです: リーリー

公開する前に忘れずに削除してください。

2. ノードが変更されたときに切断する

DOM が独自の考えを持っているように見えることがあります。信じられないほどの変化が発生した場合、問題の原因を見つけるのは難しい場合があります。 Chrome 開発者は、この問題をデバッグするための非常に便利なスキルを持っています。これは「Break on...」と呼ばれるもので、[Elements] タブの DOM ノードを右クリックすると見つかります。 ブレークポイントは、ノードの削除後、ノードのプロパティが変更されたとき、またはサブツリー内のノードが変更されたときに設定できます。

3. Ajax ブレークポイント

XHR ブレークポイント、または私が Ajax ブレークポイントと呼んでいるこのブレークポイントでは、予想される Ajax リクエストが行われたときにブレークすることもできます。これは、Web アプリケーションのネットワークをデバッグする場合に最適なツールです

4. さまざまなモバイル デバイスをシミュレートする

Chrome には、日常の作業を簡素化する組み込みのモバイル デバイス エミュレーション ツールが追加されています。コンソール以外のタブを選択してタブを見つけ、キーボードの Esc キーを押して、タッチするモバイル デバイスを選択します。もちろん本物の iPhone を手に入れることはできませんが、寸法、タッチ イベント、エージェントはすべてエミュレートされます。

5. 監査を通じてサイトを改善する

YSlowは素晴らしいツールです。 Chrome には、開発者ツールの下に Audits と呼ばれる同様のツールも含まれています。サイトを簡単に監査して、有益で実践的な最適化のヒントを入手してください。

他に何があるでしょうか?これらのツールなしでの開発は考えられません

以上がJavaScript デバッグのヒントの 5 つの要点の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。