JavaScript ブレークポイントの種類: 1. ソース ブレークポイント、2. デバッガー ブレークポイント、3. デバッグ目的を達成するために DOM 要素にブレークポイントを追加する DOM ブレークポイント、4. XHR ブレークポイント、5. イベント リスナー ブレークポイント。
このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。
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 ブレークポイントにはどのような種類がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。