VS Codeの組み込みツールでプロのようにデバッグする

すべてのJavaScript開発者はconsole.log()から始めます。素早く、動作し、馴染みがあります。しかし、複数の関数呼び出し、非同期操作、または複雑な状態変化を通じてバグを追跡する場合、コンソールログはモグラ叩きゲームになります。コードにログ文を散りばめ、常に再ビルドし、それでも全体像を見逃しています。

VS Codeの組み込みデバッガーはこれを変えます。コードが何をしているかを推測する代わりに、実行を一時停止し、任意の時点で変数を検査し、関数を1行ずつステップ実行し、アプリケーションの動作を正確に理解できます。この記事では、JavaScript、TypeScript、React、Node.jsのデバッグにこれらの強力なツールを活用する方法を紹介します。何時間もの苦労を数分間の集中的な問題解決に変えることができます。

JavaScriptとTypeScript用のVS Codeデバッグの設定

launch.json設定の作成

VS Codeデバッグの中核はlaunch.jsonファイルです。任意のJavaScriptプロジェクトでF5を押すと、VS Codeが作成を促します。以下は、VS CodeでJavaScriptをデバッグするための基本的な設定です:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug Current File",
      "program": "${file}",
      "skipFiles": ["<node_internals>/**"]
    }
  ]
}

TypeScriptの場合は、設定にソースマップサポートを追加します:

{
  "type": "node",
  "request": "launch",
  "name": "Debug TypeScript",
  "program": "${file}",
  "outFiles": ["${workspaceFolder}/dist/**/*.js"],
  "sourceMaps": true,
  "skipFiles": ["<node_internals>/**"]
}

基本的なデバッグコントロール

設定が完了すると、デバッグは簡単になります:

• ブレークポイントの設定は、任意の行番号の左側をクリック(またはF9を押す)
• デバッグの開始はF5
• ステップオーバーはF10でコードを実行(現在の行を実行)
• ステップインはF11で関数に入る(関数呼び出しに飛び込む)
• ステップアウトはShift+F11(現在の関数を完了)

変数パネルは、スコープ内のすべてのローカル変数とグローバル変数を表示します。ウォッチパネルでは、特定の式を追跡できます。コールスタックは実行パスを表示し、特定のポイントにどのように到達したかを理解するのに非常に役立ちます。

高度なブレークポイントテクニック

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

任意のブレークポイントを右クリックして「ブレークポイントの編集」を選択し、条件を追加します。デバッガーは、条件がtrueと評価された場合にのみ一時停止します:

// ブレークポイント条件: user.role === 'admin'
// 管理者ユーザーの場合のみ停止

ログポイント:より良いConsole.log

ログポイントは、実行を停止せずにデバッグコンソールに出力します。ガター内を右クリックして「ログポイントの追加」を選択します。式には中括弧を使用します:

User {user.name} triggered action at {new Date().toISOString()}

コミット前にconsole.logを削除する必要はありません。ログポイントはデバッグセッション中にのみ存在します。

ブラウザ統合によるReactデバッグ

React用のブラウザデバッグの設定

Reactアプリの場合は、VS Codeの組み込みJavaScriptデバッガーを使用します(Debugger for Chrome拡張機能は現在非推奨です)。ViteまたはCreate React Appを使用するReactアプリ用に設定します:

{
  "type": "pwa-chrome",
  "request": "launch",
  "name": "Debug React App",
  "url": "http://localhost:3000",
  "webRoot": "${workspaceFolder}/src",
  "sourceMaps": true
}

開発サーバーを起動し(npm start)、次にF5を押します。VS CodeがChromeを起動し、デバッガーを接続します。Reactコンポーネントに直接ブレークポイントを設定し、propsとstateを検査し、レンダリングをステップ実行できます。すべてVS Codeから行えます。

Reactコンポーネントの状態のデバッグ

useEffectフック、イベントハンドラー、またはコンポーネント関数内にブレークポイントを配置します。変数パネルには、現在のprops、state値、フックの依存関係が表示されます。デバッグコンソールを使用して、コンポーネントの現在のコンテキストに対して式をテストします。

Node.jsデバッガーのVS Code機能

クイックデバッグのための自動アタッチ

コマンドパレット(Ctrl+Shift+P > 「自動アタッチの切り替え」)から自動アタッチを有効にします。「smart」モードに設定します。これで、VS Codeのターミナルから起動されたNode.jsプロセスは、設定なしで自動的にデバッガーに接続されます。

非同期操作のデバッグ

VS CodeのNode.jsデバッガー統合は、非同期デバッグに優れています。async関数、Promiseチェーン、またはコールバック内にブレークポイントを設定します。コールスタックは非同期実行パスを明確に表示し、複雑な非同期フローを簡単に追跡できます。

デバッグワークフローの最適化

デバッグコンソールの効果的な使用

デバッグコンソールは出力だけではありません。一時停止した実行コンテキストに接続されたREPLです。修正をテストし、オブジェクトを検査し、または関数を直接呼び出します:

// ブレークポイントで一時停止中:
// > user.permissions
// ['read', 'write']
// > calculateTotal(cart.items)
// 45.99

コードに集中するためにファイルをスキップ

launch.jsonに以下を追加して、ライブラリコードをスキップします:

"skipFiles": [
  "<node_internals>/**",
  "node_modules/**"
]

デバッガーはこれらのファイルにステップインせず、アプリケーションロジックに集中できます。

まとめ

VS Codeのデバッグツールは、コードを理解し修正する方法を変革します。散在するconsole.logの代わりに、任意の瞬間のアプリケーションの状態の完全なビューを得られます。条件付きブレークポイントとログポイントは、デバッグのノイズを減らします。ブラウザ統合により、フロントエンドのデバッグがエディターに統合されます。自動アタッチにより、Node.jsのデバッグが簡単になります。

小さく始めましょう。次のconsole.log()をブレークポイントに置き換えてください。コードをステップ実行します。変数を検査します。適切なデバッグツールの明確さを体験すると、それらなしでどうやって管理していたのか不思議に思うでしょう。これらの機能を学ぶために投資した時間は、より速いバグ修正とより深いコード理解ですぐに報われます。

よくある質問

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.