ChromeでJavaScriptをデバッグする方法は？

ページを右クリックしてChrome DevToolsを開き、「検査」を選択するか、ショートカットキーF12、CTRL Shift I（Windows/Linux）またはCMDオプションI（MAC）を使用し、JavaScriptデバッグの「ソース」タブに切り替えます。 2。ソースパネルの左側にあるファイルツリーにターゲット.JSファイルを見つけて開きます。フレームワークを使用する場合は、Top、LocalHost、WebPack：//などのディレクトリに配置する必要があります。 3.行番号をクリックして行のブレークポイントを設定し、ライン番号を右クリックして条件付きブレークポイントを追加するか、右側の「イベントリスナーブレークポイント」でイベントリスニングブレークポイントを設定し、「例外を実行する」ボタンをクリックして、例外ブレークポイントを有効にします。 4。コードが一時停止したら、トップコントロールボタンを使用して実行を続け（▶§）、ラインごとに関数をスキップし（⏯️）、関数を入力する（⤵⤵）、関数のジャンプ（⤴⤴️）、または次の呼び出し（||）を一時停止します。 5.一時停止する場合は、右側のスコープパネルの変数値を表示し、コード変数をホバリングして現在の値を表示し、コンソールを使用して式を実行するか、時計領域の長さなどの項目を監視する式を追加します。 6.コードにデバッガーを挿入します。ステートメントは、実行時間中に自動的に一時停止することができます。これは、動的または圧縮コードのデバッグに便利ですが、予期しない割り込みを避けるために、生産環境でステートメントを削除することに注意する必要があります。 7.コンソールパネルには、console.log（）、console.error（）などの出力、および構文エラー、ランタイムの例外、ネットワークの問題などの出力が表示されます。 Console.table（）を使用して、オブジェクト配列を表形式に表示できます。 8.ページの読み込み段階で問題が発生した場合は、事前にブレークポイントを設定して、デバッガーを挿入できます。 devtoolsがオンになったときにCtrl R（CMD R）を介してページをリロードするか、すぐにブレークポイントをトリガーしたときにページをリロードします。さらに、{}ボタンをクリックして圧縮コードを美化し、スクリプトを右クリックして「ブラックボックススクリプト」を選択してサードパーティライブラリを無視し、CTRLシフトFを使用してグローバルにファイルコンテンツを検索し、それによりデバッグ効率を向上させます。ブレークポイント、シングルステップ実行、リアルタイム変数検査を熟練していることにより、Chrome DevtoolsはJavaScriptデバッグの効率を効果的に改善できます。重要なのは、実際のコードと組み合わせて練習し、コールスタックとスコープ分析をマスターすることです。

ChromeでJavaScriptをデバッグすることは、ツールとテクニックを知っていれば簡単です。 Chrome Devtoolsは、コードを介して踏み込んだり、変数を検査したり、問題を特定したりするための強力で組み込みの環境を提供します。効果的に行う方法は次のとおりです。

1。ChromeDevToolsを開きます

デバッグを開始するには、開発者ツールを開きます。

• ページを右クリックして、 「検査」を選択します
• F12またはCtrl Shift I （Windows/Linux）、 Cmd Option I （MAC）を押します。

JavaScriptファイルを表示およびデバッグできる「ソース」タブ（または古いバージョンの「デバッガー」）に載っていることを確認してください。

2。JavaScriptファイルを見つけます

ソースパネル：

• 左サイドバーのファイルツリーをナビゲートして、 .jsファイルを見つけます。
• FrameworkまたはBundler（React、Vue、Webpackなど）を使用している場合は、 top 、 localhost 、 webpack://などのフォルダーの下を調べてください。

ファイルを見つけたら、[エディター]でファイルをクリックして開きます。

3.ブレークポイントを設定します

ブレークポイントは、現在の状態を検査できるようにコードの実行を一時停止します。

ブレークポイントを設定する方法：

• コード行のブレークポイント：ソースコードの行番号をクリックします。その行が実行される前にコードは一時停止します。
• 条件付きブレークポイント：行番号を右クリックします→ 「条件付きブレークポイントの追加」 。特定の条件が満たされた場合にのみ一時停止するのに役立ちます（例えば、 i === 5 ）。
• イベントリスナーブレークポイント： 「イベントリスナーブレークポイント」セクション（右サイドバー）の下で、クリック、キープレス、フォームの提出などのイベントが発生したときに一時停止できます。
• 例外ブレークポイント：上部バーの「例外で一時停止」ボタン（⏹⏹️）をクリックして、エラーがスローされたときに停止します。

4。コードをステップスルーします

ブレークポイントで一時停止したら、コントロールを使用してナビゲートします。

• ▶️履歴書/続行：次のブレークポイントまで実行します。
• ⏯️ステップオーバー：次の行を実行します（関数を入力せずに）。
• ⤵️ステップイン：関数呼び出しを入力して、その内部にデバッグします。
• ⤴⤴️ステップアウト：現在の関数を完了し、発信者に戻ります。
• ||次の通話で一時停止：一時的に実行を一時停止します。

これらのコントロールは、一時停止するとdevtoolsの上部に表示されます。

5.変数と範囲を検査します

一時停止中：

• スコープパネル（右側のサイドバー）を確認して、変数の現在の値（ローカル、クロージャー、グローバル）を確認します。
• コード内の変数の上にホバリングして、現在の値を確認します。
• [コンソール]タブを使用して、現在のコンテキストで式をログまたは評価します（たとえば、 user.nameを入力してプロパティを確認します）。

特定の表現を見ることもできます。

• 「ウォッチ」セクションで、クリックします 変数または式（例： items.length ）を入力します。

6. debugger;声明

debugger; JavaScriptコードで直接：

 function saveuser（user）{
  if（！user.id）{
    デバッガ; // devtoolsが開いているときにここで実行が一時停止します
  }
  // ...
}

これは、devtools（たとえば、削除コードや動的スクリプトなど）に簡単にブレークポイントを設定できない場合に役立ちます。

debugger;を削除します。生産の声明 - DevToolsが開いている場合、それらは実行を停止します。

7.エラーとログについては、コンソールを確認してください

[コンソール]タブに表示されます。

• console.log() 、 console.error() 、 console.warn() output
• 構文エラー、ランタイムの例外、およびネットワークの問題
• 非推奨または混合コンテンツに関する警告

console.log()を使用して戦略的に値を追跡します。

 console.log（ 'user object：'、user）;

オブジェクトの配列にconsole.table()を使用することもできます。近隣のテーブルに表示します。

8。ページの読み込みにリロードしてデバッグします

ページロード中に問題が発生した場合：

• コードが実行される前にブレークポイントを設定します
• debugger;初期コードで、または
• devtoolsがリロードされ、すぐにブレークポイントをヒットしながら、 Ctrl R （またはCmd R ）を押します。

ボーナスのヒント

• プリティプリントのマイニファイドコード：ソースパネルの下部にある{} （Pretty Print）ボタンをクリックして、読みやすさのためにJSをフォーマットします。
• ブラックボックスサードパーティスクリプト：ソースのスクリプトを右クリックして→ 「ブラックボックススクリプト」を右クリックして、デバッグ中にjQueryや反応などのライブラリをスキップします。
• ファイル全体で検索： Ctrl Shift Fを押して、すべてのJSファイルを検索して関数または変数名を検索します。

それでおしまい。ブレークポイント、ステップスルー実行、リアルタイム検査により、ChromeのDevToolsはJavaScriptのデバッグを効率的にします。キーは、実際のコードで練習し、コールスタックとスコープデータを読み取ることを学ぶことです。基本的に、DevToolsを開いて、ブレークポイントを設定して、移動します。

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