jsをデバッグするにはどうすればよいですか?ブレークポイントを使用して js をデバッグする方法

この記事の内容はjsをデバッグする方法についてです?ブレークポイントを使ったjsのデバッグ方法は参考になると思います。

プロジェクトの開発中に、未知のバグが頻繁に発生し、それらのバグを見つけるのが難しい場合があるため、ブレークポイントデバッグを使用してプログラムをどこかで停止させ、プログラムにエラーがないかどうかを1つずつ確認する必要があります。 . 私たちは皆、Chrome ブラウザーでブレークポイントのデバッグを行っています。まずはGoogle Chromeでプロジェクトを開きます。

F12 を押して Google デバッグ インターフェイスを開き、[ソース] を選択します。ここにプロジェクトの JS コードが表示されます。デバッグする必要がある js ファイルを選択します。

ブレークポイントを追加します。

次のボタンの意味を紹介します:

まず、赤い領域の左から右へ:

スクリプト実行の一時停止/再開: スクリプトの実行を一時停止/再開します (プログラムの実行は次のボタンで停止します)ブレークポイント)。

次の関数呼び出しをステップオーバー: 次の関数呼び出しを実行します (次の行にジャンプします)。

次の関数呼び出しにステップイン: 現在の関数を入力します。

現在の関数からステップアウト: 現在の実行関数から抜け出します。

すべてのブレークポイントを無効化/アクティブ化: すべてのブレークポイントをオフ/オンにします (キャンセルされません)。

例外時に一時停止: 例外に対する自動ブレークポイント設定。

緑色の領域:

スコープ: 現在のブレークポイントのスコープを表示します

watch: + 記号をクリックして、監視する必要がある変数または式を追加します

呼び出しスタック 現在のブレークポイントの環境呼び出しスタックを表示します

ブレークポイント現在の js ブレークポイント リスト。追加された各ブレークポイントがここに表示されます。リスト内のブレークポイントをクリックして、コンテンツ領域でブレークポイントを見つけます

DOM ブレークポイント 現在の DOM ブレークポイント リスト リスト

XHR ブレークポイント 現在の xhr ブレークポイント リスト、[+] をクリックできます。ブレークポイントを追加する権利

イベント リスナー ブレークポイント イベント リスナー ブレークポイント設定

イベント リスナー 現在のイベント リスナー ブレークポイント リスト

デバッグの開始:

デバッグ インターフェイス:

デバッグ インターフェイスでは、マウスを置くコードの各変数にブレークポイントを追加すると、この変数の特定の情報が表示されるので、徐々にバグをトラブルシューティングできるようになります

ブレークポイントを追加する別の方法もあります。それは、コード内にブレークポイントを追加することです。やめた。コードの実行はここで停止します

関連する推奨事項:

Chrome+JS はブレークポイント デバッグを実装します

js のデバッグシリーズ ブレークポイントと動的デバッグ [基礎]_javascript スキル

js のデバッグ Google デベロッパー ツール

以上がjsをデバッグするにはどうすればよいですか?ブレークポイントを使用して js をデバッグする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。