VS Codeの機能紹介 その４ (デバッグ)

VS Code VS Code/Extension

VS Codeの使えそうな機能を何回かに分けて記事に整理していく。
今回は、デバッグ機能について深堀り。

本記事は、VS Codeがデフォルトで搭載しているNode.jsのデバッガを元に記述するが、考え方は他言語にも適用できる。

環境

  • Windows 11 Home 23H2
  • Visual Studio Code 1.90

実行、デバッグアクション

実行、デバッグアクションとそれに対応するショートカットキーをまとめる。

  • 実行…Ctrl+F5 ※サポートしているかは、デバッガ次第
  • デバッグ実行…F5
  • ステップオーバー(デバッグ中に、関数に入らず1行進む)…F10
  • ステップイン(デバッグ中に、関数に入る)…F11
  • ステップアウト(現在の関数を完了させ、上位の呼び出し元関数に戻る)…Shift+F11
  • デバッグ再実行…Ctrl+Shift+F5
  • デバッグ停止…Shift+F5
  • カーソル行にブレークポイント設定/解除…F9
  • デバッグコンソール表示…Ctrl+Shift+Y

Shiftキーを付与すると逆のアクションになると考えれば覚えやすいかもしれない。
例.

  • デバッグ実行(F5) ⇔ デバッグ停止(Shift+F5)
  • ステップイン(F11) ⇔ ステップアウト(Shift+F11)

複数ターゲットのデバッグ

複数のデバッグセッションを同時に実行することもでき、クライアントとサーバを同時に動かす場合などに便利。

  • 最初のデバッグセッション開始後に、2番目のデバッグセッションを開始すれば良い
  • この時、
    • [実行とデバッグ]ビューの[コールスタック]セクションには、実行中のデバッグセッションがそれぞれ表示され、
    • デバッグツールバーには、アクティブなセッションがドロップダウン上に表示される
    • アクティブなセッションは、[コールスタック]セクションでの選択やデバッグツールバーのドロップダウンで切り替え可能
  • 他に、launch.jsonにcompounds属性を定義する方法もある (compounds 属性 参照)

ブレークポイント

VS Codeでは、複雑なデバッグに備え、様々なブレークポイントがサポートされている。

通常のブレークポイント

ソースコードの任意の場所で実行をブレークし、変数値や処理を確認することができる。

  • 追加するには、
    • ガター部分(行番号の左)をクリック
    • もしくは、ショートカットキー…F9

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

式やヒットカウントのような条件付きで実行をブレークすることが可能。

  • 式…式の評価結果がtrueの場合にブレーク
  • ヒット カウント…指定回数に達したらブレーク
  • 追加するには、
    • ガター部分(行番号の左)を右クリック -> 条件付きブレークポイントの追加…
    • もしくは、コマンドパレット(Ctrl+Shift+P) -> デバッグ: 条件付きブレークポイントの追加… (Debug: Add Conditional Breakpoint…)

トリガーされたブレークポイント

指定した他のブレークポイントでブレークした場合にのみ、有効になるブレークポイント。

※条件付きブレークポイントと見た目は同じ

  • 追加するには、
    • ガター部分(行番号の左)を右クリック -> トリガーされたブレークポイントの追加…
    • もしくは、コマンドパレット(Ctrl+Shift+P) -> デバッグ: トリガーされたブレークポイントの追加… (Debug: Triggered Breakpoint…)
  • 条件付きブレークポイントもトリガーとして指定することができる

インラインブレークポイント

ソースコードの特定列に到達した時にブレークする仕組みで、minifyされたコードのように1行に複数命令が含まれる場合に有効。

  • 追加するには、
    • ショートカットキー…Shift+F9
    • もしくは、コマンドパレット(Ctrl+Shift+P) -> デバッグ: インライン ブレークポイント… (Debug: Inline Breakpoint)

関数ブレークポイント

関数名を指定してブレークポイントを追加することもできる。ソースコードが使用できないが、関数名がわかっている場合に有効。

  • 追加するには、
    • [実行とデバッグ]ビュー -> [ブレークポイント]セクション -> [+](関数ブレークポイントの追加)ボタン
    • もしくは、コマンドパレット(Ctrl+Shift+P) -> 関数ブレークポイントの追加 (Add Function Breakpoint)

ログポイント

ログポイントを使用して、ソースコードを修正せずに、デバッグコンソールにログを出力することができる。

  • * サポートされているかは、デバッガ次第 (Node.js、JavaやPythonでは使用可能)
  • 追加するには、以下のどちらか
    • ガター部分(行番号の左)を右クリック -> ログポイントを追加…
    • コマンドパレット(Ctrl+Shift+P) -> デバッグ: ログポイントの追加… (Debug: Add Logpoint…)

デバッグコンソール

デバッグコンソールでは、ログポイントのログを出力したり、デバッグ中に式の評価などをすることが可能 (REPL: Read-Eval-Print Loop)

  • 複数行入力するには、Shift+Enterで改行、最後にEnterで評価実行
  • デバッグコンソールを開くには、
    • ショートカットキー…Ctrl+Shift+Y
    • コマンドパレット(Ctrl+Shift+P) -> 表示: デバッグコンソール の切り替え (View: Toggle Debug Console)

デバッグ構成

デバッグ構成ファイルを使用すると、デバッグ構成の細かい設定や保持ができる。

  • 構成ファイルは、.vcode/launch.json として保持される
  • 構成ファイルを作成するには、[実行とデバッグ]ビューで[launch.json ファイルを作成します]リンクをクリック

launch.jsonの基本構成

// .vscode/launch.json
{
  "version": "0.2.0",
  
  // configurationsには、デバッグ構成を定義する
  "configurations": [
    // 定義した構成は、以下で実行可能な構成として表示される
    // - [実行とデバッグ]ビューのドロップダウン
    // - コマンドパレット(Ctrl+Shift+P) 
    //   -> デバッグ: 選択してデバッグを開始 (Debug: Select and Start Debugging)
    {
      "type": "node",
      "request": "launch",
      "name": "debug-1"
      ...
    },
    {
      ...
    }
  ],

  // 複数ターゲットのデバッグを実行する場合、
  // compoundsには、デバッグ構成の組み合わせを定義する
  "compounds": {
    configurations: ["debug-1", "debug-2"]
  } 
}

デバッグ構成の属性

configurations 属性

デバッグ構成の基本属性(configurations)は下表の通り。

#属性必須/任意説明
1type必須デバッガ種別 (node, php, go…)
nodeのデバッガはVS Code標準搭載
2request必須リクエスト種別
launch: アプリケーションを起動attach: プロセスに接続
3name必須構成名
[実行とデバッグ]ドロップダウンなどで構成を識別するために使用される
4presentation任意ソート順、グループ、非表示を設定するオブジェクト
{
order: <ソート順(数値)>,
group: <グループ(文字列)>,
hide: <true: 非表示, false: 表示>
}
5preLaunchTask任意デバッグ開始前に実行するタスク
(.vscode/tasks.jsonに記載のタスク名を指定)
6postDebugTask任意デバッグ終了後に実行するタスク
(.vscode/tasks.jsonに記載のタスク名を指定)
7internalConsoleOptions任意デバッグ中の[デバッグコンソール]パネルの表示を制御する
8debugServer任意拡張機能開発者向け
9serverReadyAction任意デバッグ実行時、URIを自動で開く 参照
※青のマーカ箇所は、使用頻度が高そうなもの

下表は、多くのデバッガでサポートされている属性。

#属性説明
1programデバッガ起動時に実行するファイル
2argsデバッグ時にプログラムに渡される引数
3env環境変数
4envFile環境変数ファイルのパス
5cwd作業ディレクトリ
6portプロセスにアタッチする場合のポート番号
7stopOnEntry起動時にブレークするか
8console使用するコンソールを指定
internalConsole: 内部コンソール、
integratedTerminal: 統合ターミナル,
externalTerminal: 外部ターミナル
※青のマーカ箇所は、使用頻度が高そうなもの

compounds 属性

複数のデバッグ構成を組み合わせて同時実行する場合に使用する。
launch.jsonに定義しておくと、実行可能な構成と見なされ、[実行とデバッグ]ビューのドロップダウンやコマンドパレットからのでデバッグで選択できるようになる。

#属性説明
1configurations複数のデバッグ構成を組み合わせる
例. [“debug-1”, “debug-2”]
2stopAll複数のデバッグ構成を実行している時、1つを終了した時にすべてを終了するか
※青のマーカ箇所は、使用頻度が高そうなもの

OS種別に応じた設定

値をOS種別に応じて設定するには、以下のようなOS名をキーとするオブジェクトを定義する。

  • windows…Windows
  • linux…Linux
  • osx…macOS

例. arg値をOS種別に応じて設定

// .vscode/launch.json
{
  ...
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug Node",
      ...,
      // OS名をキーとするオブジェクト内に属性を定義すると、
      // そのOSについてのみ値が設定される
      // 下の例では、OSによってargsの値が変わる
      // - Windows...www
      // - Linux...lll
      // - macOS...mmm
      "windows": {
        "args": ["www"]
      },
      "linux": {
        "args": ["lll"]
      },
      "osx": {
        "args": ["mmm"]
      }
    }
  ]
}

デバッグ実行時、URIを自動で開く

サーバプログラムなどで、デバッグ実行時にURIを自動で開きたい場合には、”serverReadyAction”属性を使用する。

#属性説明
1pattern検知するデバッグコンソールの出力パターン (正規表現可能)
例. listening on port ([0-9]+)
2uriFormatアクセスするURI。patternのキャプチャグループを含めることができる
例. http://localhost:%s
3actionuriFormatに対して実行するアクション
openExternally: 外部の標準アプリケーションで開く、debugWithEdge: Edgeで開く、
debugWithChrome: Chromeで開く、
startDebugging: 他のデバッグ構成を起動
4webRootアクセスするwebRoot。action”debugWithEdge”、”debugWithChrome”の場合に指定
5namepatternが一致する場合に指定したデバッグ構成を実行。
actionが”startDebugging”の場合に指定
※青のマーカ箇所は、使用頻度が高そうなもの

例. サーバプログラムのデバッグ実行時に、外部ブラウザを起動

// .vscode/launch.json
{
  ...
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug Node",
      "program": "${workspaceFolder}/app.js",

      // 1. デバッグコンソールでpattern(listening on port ([0-9]+))に一致する出力を検知した場合、
      // 2. uriFormatのアドレス(http://localhost:%s)※を、
      // 3. actionの手段(openExternally: 外部の標準アプリケーション)で開く
      // ※uriFormatの%sはpatternの正規表現のキャプチャグループ
      "serverReadyAction": {
        "pattern": "listening on port ([0-9]+)",
        "uriFormat": "http://localhost:%s",
        "action": "openExternally"
      }
    }
  ]
}

参考

Debug code with Visual Studio Code
One of the great things in Visual Studio Code is debugging support. Set breakpoints, step-in, inspect variables and more...
code.visualstudio.com
タイトルとURLをコピーしました