JavaScript の重要なブレークポイントデバッグ手法の概要 (推奨)

デバッガーを使用する理由は何ですか?

この記事では、JavaScript デバッグにブレークポイントを使用する方法を紹介します。この記事を読む前に、次の質問をする必要があります。デバッグにブレークポイントを使用するのはなぜですか?
ブレークポイントを使用する必要性を理解する必要があります。そうでないと、以下で紹介するブレークポイントのデバッグ方法はすべて無意味になります。 console.log は、フロントエンド開発で最もよく使用されるデバッグ方法です。これにより、いくつかの問題が簡単かつ直接的に解決されます。しかし、非常に複雑な問題に遭遇すると、console.log では不十分になります。例えば：

LeetCode を実践したことがある人なら、論理的に複雑なアルゴリズムを深く理解しているはずです。アルゴリズムのテストケースでエラーが報告された場合、目視だけでは問題のあるメソッドを見つけるのが難しい場合があります。
再現するのに非常に面倒な手順を伴うバグ。
問題を再現するのに 10 分かかりましたが、特定のコード行までしか追跡できませんでした。問題の調査を続けるには、もう一度ログを追加する必要がありました。ログの表示 -> ログの追加 -> ログの表示... このプロセスを数回繰り返すと、今日残りのレンガをすべて移動できなくなります。
長時間実行されるプロセスを持つコード
コメントがなく、名前がランダムなコード
サーバーサイドコードの場合、Node.js サーバーサイド開発の経験がある学生であれば、Postman <-> IDE 間を行ったり来たりした経験があるかもしれません。ログだけに頼っていると、巨大で複雑なオブジェクトの全体像をコンソールで表示することは困難です。インターフェースにデータベースの追加と削除、サードパーティの依存関係も含まれる場合、最後のリクエストの結果を復元することも面倒な作業になります。

このような場合、ブレークポイントデバッグは非常に役立ち、デバッグ時間の複雑さが O(n) から O(1) に削減され、ブリックの移動がより楽しくなります。

記事の概要は次のとおりです。

Chromeデバッガーの基本的な使い方
VS Code による SPA アプリケーションのデバッグ
Chrome デバッグ Nodejs
VS Code デバッグ Nodejs

Chromeデバッガーの基本的な使い方

最も簡単なブレークポイントデバッグは、コードにデバッガーステートメントを追加し、ブラウザーでページを更新することです。ブラウザーはデバッガーステートメントで実行を停止します。

理解を容易にするために、簡単な例を紹介しましょう。フォルダー内に index.html と index.js を作成し、index.js を index.html にインポートします。 index.js の内容は次のとおりです。

// 国際実践、こんにちは世界。
const 挨拶 = () => {
  const greeting = "こんにちはデバッガー";
  // ここで実行するとブラウザはデバッガを一時停止します
  console.log(挨拶);
};

挨拶する（）;

console.log("js 評価が完了しました");

次のコマンドを実行します:

npm i -g サーブ
仕える 。

次に、http://localhost:5000 にアクセスして開発者ツールを開きます。

この時点で、Hello World ブレークポイントは次のように設定されています。

画像は 4 つの領域に分かれています。青い領域はファイル選択に使用されます。ページ列は現在のページの JS ファイルを参照します。ファイルシステムにはシステム内のファイルが表示されます。通常は Page を使用します。

ピンクはコードの行番号と内容です。コードの行番号をクリックすると新しいブレークポイントが追加され、もう一度クリックするとキャンセルされます。

黄色の領域は、コードの実行を制御するために使用されます。ほとんどのシナリオに対処するには、最初の 4 つのボタンの意味を習得するだけで十分です。ボタン 1 を使用すると、コードの実行を継続 (再開) できます。次のブレークポイントに到達すると、実行は再び中断されます。ボタン 2 を使用すると、ブラウザは現在の行 (図の 3 行目) を実行し、次の行でコードを中断できます。ボタン 3 は現在の関数に入り、関数の具体的な内容を表示します。現在 7 行目の greeting() にいると仮定すると、ボタン 3 をクリックすると、greet メソッド (つまり、2 行目) に入ります。これ以上、greet メソッドを確認したくない場合は、ボタン 4 をクリックしてこのメソッドを終了し、行 8 に戻ります。

緑色の領域では、変数の内容と現在の呼び出しスタックを表示できます。

デバッガーはブレークポイントを設定する最も簡単で強力な方法ですが、コードを変更する必要があります。これらのステートメントはオンラインになる前に削除する必要があることに注意してください。 webpack を設定することで自動的に削除することもできます。しかし、まだ少し不便なので、vscode を通じてブレークポイントの方法を簡素化する方法を見てみましょう。

VS Code による SPA アプリケーションのデバッグ

まず、Vite を使用してデモ用の Vue アプリケーションを作成します (React の手順も同様です)。

# vut-tsアプリケーションを作成する npm init vite
cd ハローバイト
npmインストール
# プロジェクトを開くには、VS Code cli を呼び出すか、VS Code で手動で開きます。
コード。
npm 実行 dev

次に、VS Code で新しいファイル .vscode/launch.json を作成し、次の内容を入力します。

{
  "バージョン": "0.2.0",
  「構成」: [
    {
      "タイプ": "pwa-chrome",
      「リクエスト」: 「起動」、
      "name": "Vue プロジェクトを起動",
      // プロジェクトのアクセスアドレスを入力します "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    },
  ]
}

次に、cmd+q を使用して実行中の Chrome を終了し (この手順は非常に重要なのでスキップできません)、f5 キーを押して VS Code のデバッグ機能を開始します。 VS Code を使用すると、Chrome ウィンドウを起動し、上記の構成の URL にアクセスできます。この時点で、ブレークポイントが有効になり、コードの実行を段階的に制御してバグの原因を見つけることができます。

ここで実用的なヒントを紹介します。ブレークポイントでキャッチされない例外をチェックして、コードがエラーを報告した場所で実行が自動的に中断されるようにします。エラーが発生した場合、この方法を使用すると、問題のあるコードを見つける時間を節約できます。

さらに、VS Code ブレークポイントが有効になると、Chrome Devtools でもブレークポイントが同期して表示されることがわかります。

VS Code には、起動とアタッチの 2 つのデバッグモードがあります。実際にコードを実行するのは Chrome の JS エンジンなので、コードを中断するかどうかの制御は Chrome が行います。では、なぜ VS Code のブレークポイントはコードの中断を制御できるのでしょうか?これは、VS Code が devtools プロトコルを通じて Chrome に指示を送信し、実行を一時停止するコード行を Chrome に伝えるためです。指示を送信するプロセスはアタッチと呼ばれます。起動プロセスにはアタッチが含まれます。つまり、最初にブラウザを起動 (start) し、次にブレークポイント情報をアタッチ (attach) します。したがって、アタッチモードは起動モードのサブセットです。

起動モードはブラウザを手動で起動する手間を省き、より便利になるようです。しかし、問題があります。複数のフロントエンドプロジェクトを同時に開発するとどうなるでしょうか?プロジェクトごとにデバッグ処理を開始すると、複数のブラウザが開かれることになり、複数のブラウザを切り替えるのが非常に面倒になります。この問題を解決するには、アタッチモードを使用できます。

まず、コマンドラインを使用して Chrome を起動します。コマンドラインを使用する理由は、Chrome の起動時にパラメータを渡す必要があるためです。

# このコマンドを実行する前に、cmd+q を押して実行中の Chrome を終了する必要があります。
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
# この出力が表示された場合、パラメータの転送は成功したことを意味します。
DevTools は ws://127.0.0.1:9222/devtools/browser/856a3533-ca5c-474f-a0cf-88b7ae94c75b をリッスンしています

VS Code と Chrome は websocket を介して通信し、--remote-debugging-port は websocket が使用するポートを指定します。次に、launch.json ファイルを次のように変更します。

{
  "バージョン": "0.2.0",
  「構成」: [
    {
      "タイプ": "pwa-chrome",
      「リクエスト」: 「添付」、
      "name": "Vue アプリケーション",
      // プロジェクトアクセス用のURL
      "url": "http://localhost:3000",
      // Websocket ポートは --remote-debugging-port パラメータと一致している必要があります。
      「ポート」: 9222,
      "webRoot": "${workspaceFolder}"
    },
  ]
}

VS Code のデバッグを開始する前に、Chrome で http://localhost:3000 ページを開く必要があることに注意してください。次に、VS Code にブレークポイントを設定し、ブラウザを更新すると、コードはブレークポイントで正常に停止します。 2 番目と n 番目のプロジェクトは同じ構成を使用できますが、違いは、プロジェクト構成に応じて url フィールドを変更する必要があることです。

Chrome デバッグ Nodejs

上記の記事では、ページのデバッグ方法について説明しました。次に、nodejs アプリケーションのデバッグ方法について説明します。最も簡単な例から始めて、Hello World を作成しましょう。

// debug.js ファイル const greeting = 'hello nodejs debugger'
デバッガ
console.log(挨拶)

次にこのファイルを実行します

ノード --inspect-brk デバッグ.js
デバッガーは ws://127.0.0.1:9229/b9a6d6bf-baaa-4ad5-8cc6-01eb69e99f0a をリッスンしています
ヘルプについては、https://nodejs.org/en/docs/inspector を参照してください。

--inspect-brk は、js ファイルの実行中にファイルの最初の行にブレークポイントを設定することを意味します。次に、Chrome を開いて Devtools に移動します。赤いボックス内のボタンをクリックすると、Node.js 固有のデバッグウィンドウが開き、コードが最初の行で中断されます。

Nodejs デバッグウィンドウ:

この方法の本質は、Chrome Devtool が v8 エンジンのデバッグプロトコルに従って nodejs プロセスに指示を送信し、コードの実行を制御することです。 Web ページのデバッグでは Chrome が命令を受信する側であるのに対し、Node.js のデバッグでは Chrome が命令を送信する側になることがわかります。いわゆる、惨めな乙から甲への華麗なる転身。

ノードのデフォルトの Websocket ポートは 9229 です。必要に応じて (たとえば、ポートが使用されている場合)、何らかの方法でこのポートを変更できます。

ノード --inspect=9228 デバッグ.js
デバッガーは ws://127.0.0.1:9228/30f21d45-9806-47b8-8a0b-5fb97cf8bb87 をリッスンしています
ヘルプについては、https://nodejs.org/en/docs/inspector を参照してください。

Devtool を開くと、Chrome はデフォルトでポート 9229 をチェックしますが、ポート番号を変更する場合は、Chrome がチェックするアドレスを手動で指定する必要があります。下の画像の「構成」ボタンをクリックし、127.0.0.1:9228 と入力して、「完了」をクリックします。この時点で、開始したばかりのノードプロセスがリモートターゲットに表示されます。検査をクリックしてデバッグを開始します。

VS Code で Nodejs をデバッグする

これまでのところ、ノードのデバッグの目標は達成しましたが、まだ少し面倒で、十分に自動化されていません。 VS Code を使用すると、ワンクリックでデバッグを開始できます。

VS Code でプロジェクトを開き、launch.json に以下を入力します。

{
  "バージョン": "0.2.0",
  「構成」: [
    {
      "タイプ": "pwa-node",
      「リクエスト」: 「起動」、
      "name": "起動プログラム",
      "スキップファイル": [
        "<ノード内部>/**"
      ]、
      // ${file} は、デバッグを開始すると、デバッグ対象のプログラムが現在のフォーカス ファイルになることを意味します。
      "プログラム": "${ファイル}"
    }
  ]
}

このとき、index.js ファイルに切り替えて F5 キーを押してデバッガーを起動します。デバッガーステートメントの 2 行目まで実行されると、実行は自動的に一時停止されます。コード行番号の左側をクリックしてブレークポイントを設定することもできます。

TypeScript をデバッグしたい場合は、index.js の名前を index.ts に変更し、launch.json を変更するだけです。

{
  "タイプ": "pwa-node",
  「リクエスト」: 「起動」、
  "name": "起動プログラム",
  "スキップファイル": [
    "<ノード内部>/**"
  ]、
  "プログラム": "${ファイル}",
  // デバッグする前に、TypeScript を JS にコンパイルする必要があります。
  "preLaunchTask": "tsc: ビルド - tsconfig.json",
  
  // ここでは、コンパイルされたコード ファイルが出力される場所を VS Code に指示しています。
  // tsconfig.json で outDir を dist として指定する必要があります。
  "出力ファイル": [
    "${ワークスペースフォルダ}/dist/**/*.js"
  ]
}

TSデバッグには注意すべき点が2つあります

launch.json の outFile パスは、tsconfig.json の outDir と一致している必要があります。
tsconfig.json で sourceMap を true に指定します。

条件付きブレークポイント

場合によっては、すべてのブレークポイントを有効にするのではなく、ブレークポイント行が実行され、特定の条件が満たされたときにコードの実行を中断する必要があります。これは条件付きブレークポイントです。

(i = 0; i < 10; i++ とします) {
  コンソールにログ出力します。
}

たとえば、上記のコードで console.log の 2 行目にブレークポイントを設定すると、このブレークポイントは合計 10 回中断されます。これは、多くの場合、見たくないものです。すべてのサイクルではなく、1 つのサイクルだけが必要な場合もあります。この時点で、右クリックして「条件付きブレークポイントの追加」を選択できます。

このとき、入力ボックスが表示されるので、そこに i === 5 と入力します。

この時点でデバッグが開始されると、i は 0 - 4 にスキップされ、i が 5 になるとコードの実行が直接中断されます。コード実行を再開すると、i が 6 - 9 のケースはスキップされます。

条件付きブレークポイントは、多数のループや if-else ステートメントを含むコードをデバッグする場合、特に特定の場所の全体的なロジックが予想どおりで、一部の特殊なケースでのみ出力エラーが発生する場合に非常に便利です。条件付きブレークポイントを使用すると、これらの通常の状況をスキップし、一部の特殊なケースが発生した場合にのみ実行を中断できるため、さまざまな変数の計算が正常かどうかを確認できます。

要約する

デバッグは日常業務において非常に重要なスキルです。なぜなら、新しい機能の開発に加えて、日常業務の大部分は古いコードの調整と特殊な条件下での論理エラーの処理に費やされるからです。デバッグの熟練度は、レンガを動かす作業の満足度を大幅に向上させます。数時間も行き詰まってしまうような複雑なバグは、心理的にフラストレーションを感じさせる原因になりかねません。しかし、ブレークポイントデバッグがあらゆる状況に適用できる万能策というわけではありません。単純なロジックであれば、問題なく console.log に記録できます。この記事では、Chrome Devtools と VS Code ブレークポイントデバッグの使用方法を紹介します。全体的には、VS Code の方が推奨されます。 launch.json は一度設定するだけで、その後は F5 を 1 回クリックするだけでデバッグを開始できます。また、記事で紹介した各種 launch.json ファイルの構成は、VS Code が提供するツールを使用することでワンクリックで生成できます。 launch.json を開くと、エディターの右下隅に [構成の追加] ボタンが表示されます。これをクリックして、追加する必要があるデバッグ構成を選択します。

これで、JavaScript の重要なブレークポイントデバッグ手法に関するこの記事は終了です。JavaScript ブレークポイントデバッグ手法に関する詳細なコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: