ホームページ > ウェブフロントエンド > フロントエンドQ&A > JavaScript ブレークポイントにはどのような種類がありますか?

JavaScript ブレークポイントにはどのような種類がありますか?

青灯夜游
リリース: 2022-01-12 13:46:28
オリジナル
2290 人が閲覧しました

JavaScript ブレークポイントの種類: 1. ソース ブレークポイント、2. デバッガー ブレークポイント、3. デバッグ目的を達成するために DOM 要素にブレークポイントを追加する DOM ブレークポイント、4. XHR ブレークポイント、5. イベント リスナー ブレークポイント。

JavaScript ブレークポイントにはどのような種類がありますか?

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

JS ブレークポイントの分類

1. JS ブレークポイント

(1) ソース ブレークポイント

Sources ブレークポイントを追加するプロセスは、「F12 (Ctrl Shift I) で開発ツールを開く」 - 「Sources メニューをクリック」 - 「左側のツリーで対応するファイルを見つける」 - 「行番号列をクリック」 です。つまり、現在の行に対するブレークポイントの追加/削除の操作が完了します。ブレークポイントが追加された後、ページを更新すると、JS の実行がブレークポイントの位置で停止します。ソース インターフェイス上の現在のスコープ内のすべての変数と値が表示されます。検証要件を完了するには、各値を検証するだけで済みます。

ソースで条件付きブレークポイントを設定することもできます。ブレークポイントの場所の右クリック メニューで [ブレークポイントの編集...] を選択して、ブレークポイントをトリガーするための条件を設定します。式。式が true の場合にのみ、ブレークポイントがトリガーされます。

(2) デバッガ ブレークポイント

デバッガ ブレークポイントは、「debugger;」ステートメントをコードに追加することによって追加されます。このステートメントに対してコードが実行されると、自動的にブレークポイント

2、DOM ブレークポイント

DOM ブレークポイントは、その名前が示すように、デバッグを行うために DOM 要素にブレークポイントを追加します。の目標。ブレークポイントを実際に使用する場合、その効果は最終的に JS ロジック内に実装されます。

DOM ブレークポイントの追加方法: 要素 - 要素を右クリック 要素 - 選択時にブレーク ブレークポイント

#(1) サブツリーの変更 サブツリーの変更 ブレークポイント

主にサブツリー用の操作ノードの追加、削除、順序の交換と同様ですが、子ノードの属性変更とコンテンツ変更はブレークポイントをトリガーしません

(2) 属性変更ノード属性ブレークポイント

(3)ノード削除ノード削除ブレークポイント

3、XHR ブレークポイント

XHR ブレークポイント

名前が示すように、非同期リクエストが送信されるときURL がブレークポイント条件を満たしている場合、ブレークポイントがトリガーされます

ブレークポイント メソッド:sources- XHR/fetch Breakpoints -" "-ブレークポイント条件の編集

4. イベント リスナー ブレークポイント

#イベント リスナー ブレークポイント。つまり、イベント名に基づいてブレークポイントを設定します。イベントがトリガーされると、イベントがバインドされている場所にブレークポイントが設定されます。イベント リスナー ブレークポイントには、マウス、キーボード、アニメーション、タイマー、XHR などを含むすべてのページ イベントとスクリプト イベントがリストされます。 (場所は通常、ソースの XHR/fetch ブレークポイントの下にあります)

[関連する推奨事項:

javascript 学習チュートリアル]

以上がJavaScript ブレークポイントにはどのような種類がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート