1. 導入：なぜ複数のプロセスを同時にデバッグする必要があるのか
開発中に「フロントエンドから送ったデータが、バックエンドでどう処理されているか知りたい」と思ったことはありませんか？通常、フロントエンドとバックエンドのデバッガを別々に起動すると、画面を行き来するだけで時間が過ぎてしまいます。
「マルチ・ターゲット・デバッグ」を使えば、複数のプロセスを一つのエディタで同時にデバッグできます。リクエストがサービス間をどのように移動するかを一気通貫で追跡できるため、エラーの原因特定が劇的に速くなります。
2. 基礎知識：マルチ・ターゲット・デバッグを支える仕組み
この機能を使いこなすために、まずは以下のキーワードを理解しましょう。
Compound Launch（複合起動）
VS Codeの設定ファイル（launch.json）で、複数のデバッグ設定をまとめて実行する機能です。「フロントエンドの起動」と「バックエンドの起動」を同時に開始する指示を出す役割を持ちます。
プロセスアタッチ（Process Attach）
すでに動いているプログラムに対して、デバッガを後から接続する機能です。サーバーが常駐している環境などで活用されます。
3. 実装/解決策：launch.jsonで設定を統合する
VS Codeの .vscode/launch.json を編集することで、ワンクリックで両方のプロセスをデバッグ開始できます。
4. サンプルプログラム：launch.jsonの設定例
以下のコードを .vscode/launch.json に貼り付けてください。
{
“version”: “0.2.0”,
“configurations”: [
{
“name”: “バックエンド起動”,
“type”: “node”,
“request”: “launch”,
“program”: “${workspaceFolder}/server/index.js”
},
{
“name”: “フロントエンド起動”,
“type”: “chrome”,
“request”: “launch”,
“url”: “http://localhost:3000”
}
],
// ここで複数の起動設定を一つにまとめます
“compounds”: [
{
“name”: “フルスタック同時デバッグ”,
“configurations”: [“バックエンド起動”, “フロントエンド起動”]
}
]
}
この設定後、VS Codeのデバッグパネルで「フルスタック同時デバッグ」を選択して実行ボタンを押すだけで、両方のプロセスがデバッグ可能な状態で起動します。
5. 応用・注意点：現場で陥りやすい罠
デバッグの競合に注意
両方のプロセスで同じポートを使用しようとすると起動に失敗します。事前にポート番号が重複していないか確認しましょう。
ステップ実行時の挙動
複数のプロセスを同時に止めていると、どのプロセスでステップ実行しているか混乱しがちです。VS Codeの「コールスタック」パネルを確認し、現在どのスレッドが停止しているかを意識しながら操作するのがコツです。
ログの確認
出力ウィンドウで「デバッグコンソール」の切り替えを行えば、各プロセスのログを独立して確認できます。最初は戸惑うかもしれませんが、慣れるとマイクロサービス開発の生産性が大きく向上します。ぜひ試してみてください。
コメント