クロムを使用してブレークポイントを追加する5つの方法

7848 ワード
webdev javascript テキストリンク
デバッグはすべての開発者がマスターしなければならないスキルであり、ブレークポイントをコードに追加することはデバッグの基本です.この記事はクロムdevtoolのブレークポイントを追加する5つの方法を共有します.

1つは、ブレークポイントを直接加えます
Chrome DevToolsのソースタグに移動し、コードが配置されている行番号をクリックしてブレークポイントを追加します.

これはすべてのブレークポイントを追加するための最も一般的な方法です.

条件付ブレークポイント
しかし、時々、ブレークポイントが特定の条件の下でのみ効果を発揮したい.このとき、我々は以下のアプローチを取ることができます.
  • 行番号242479182を右クリックします
  • 条件付きブレークポイントを追加する
  • ダイアログ
    • であなたの状態を入力します
    例えば、私が10より大きいときは、コードを一時停止します.
    for(let i=0; i<20; i++){
     console.log(`i * i = ${i * i}`)
}
    できます.


    3つの懸垂は、ブレークポイントを変えます
    場合によっては、DOM要素が変化するときだけ、特定の場所でコードを一時停止したくない場合もあります.このとき、これを行うことができます.
  • 要素タブをクリックします.
  • ブレークポイントを設定する要素に移動します.
  • 要素を右クリックします.
    • そして、サブツリー変更、属性修正またはノード除去を選択します.たとえば、hello要素が変更されたときにコードを一時停止します.
    <div id="hello">
    Hello 2022.
</div>
<script>
    document.getElementById("hello").onclick = (event) => {
      event.target.innerText = new Date().toString()
    }
</script>
    できます.

    注意:
  • サブツリーの変更.現在選択されているノードの子が削除または追加された場合、または子の内容が変更されたときにトリガされます.子ノードの属性の変更、または現在選択されているノードへの変更をトリガーしません.
  • 属性変更:属性が現在選択されているノードに追加または削除されたとき、または属性値が変更されたときにトリガされます.
  • ノードの削除:現在選択されているノードが削除されたときにトリガされます.

    • 4センチメートルXhr/フェッチブレークポイント
    JavaScriptがHTTPリクエストをURLにしようとしているときにコードを一時停止したい場合は、次のようにします.
  • ソースタブをクリックします.
    ウィンドウを展開します.
    「ブレークポイントを追加」をクリックします.
    中断したい文字列を入力します.このツールがXHRのリクエストURLのどこにでも存在するとき、devtoolsは休止します.
    Enterキーを押して確認します.
    • たとえば、スクリプトがapi.github.com .アンサーを要求しようとするときに、コードを一時停止します.
    <body>
  <div id="hello">
    Hello 2022.
  </div>
  <script>
    fetch("https://api.github.com")
     .then(res => {
       console.log(res)
     })
  </script>
</body>
    できます.


    5人のイベントイベントリスナーブレークポイント
    もちろん、特定のイベントが発生したときに、コードを一時停止することもできます.
    <body>
  <div id="hello">
    Hello 2022.
  </div>
  <script>
    document.getElementById("hello").onclick = (event) => {
      console.log('hello 2022')
    }
  </script>
</body>
    hello要素をクリックした後にコードを一時停止したい場合は、次のようにします.
    アジュールAPI管理101
    Effective Java 3/E-(7)とRamdaストリーム