デバッグ

VS Code はコードエディターを標榜しているので、デバッグ機能の対応が手厚い。もっとも、VS Code に内蔵されているデバッグ対応言語はかなり限定されている。ユーザーがデバッガー拡張機能を検索してインストールすることで有効にするのが通例となっている。

VS Code は編集モードとデバッグモードを区別している。デバッグ中にはプログラムの状態を監視・管理するための UI がツールバー、サイドバー、パネルに出現する。本稿ではその辺りの注目点を記す。

Attention

Visual Studio Code 利用ノート 冒頭の前提条件に留意すること。

実行＆デバッグ

対象プロセスを実行・デバッグするためのコマンドを次に示す：

キーバインド	コマンド	操作
F5	Start Debugging	デバッグセッションを開始し、最初のブレイクポイントで停止する。
Ctrl + F5	Run Without Debugging	デバッガーなしでプロセスを起動する。
F11	Start Debugging and Stop on Entry	デバッグセッションを開始し、エントリーポイントで停止する。

デバッグには最初のコマンドを用いるのが普通だ。

私はキーボード操作で作業したいのでキーバインドしか記さないが、いざとなれば

• メインウィンドウの Run からメニュー項目を選択したり、

• Side バー内 RUN ビューの Run and Debug ボタンを押したり、

• Side バー内 RUN AND DEBUG ツールバーの操作アイコンをクリックしたり

して同じコマンドを実行すればいい。

構成

デバッグセッションの起動方法はプロジェクトにより異なるのが一般的であるので、 VS Code は構成ファイルにその指定を保存しておく仕組みを採っている。 Side バー内 RUN ビューの create a launch.json file をクリックすると、その構成ファイルをワークスペース管理フォルダーに生成する。

リンクをクリックすると、初回デバッグ時に見たものと同じドロップダウンリストが画面上部に表示される。そして、やはり初回に選択した項目を選択する。公式文書の画面イメージは Node を選択したものだ。

基本的なプロパティー

構成ファイル launch.json の書式について簡単に記す。

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}/app.js"
        }
    ]
}

ファイル launch.json をエディターで編集すると IntelliSense が働いて、オブジェクト内で有効なプロパティー名が補完され、同時に解説がポップアップ表示される。指定必須のプロパティーは次の三つ：

type

デバッガーそのものを指定する。例えば、VS Code 内蔵の Node.js デバッガーを指定するには "node" と書く。PHP 拡張機能ならば "php", Go 拡張機能ならば "go" と書く。

request

現在のところ launch または attach を指定するしかない。デバッグ実行と既存プロセスへの取り憑きにそれぞれ対応する。

name

ドロップダウン Debug launch configuration における表示名。

たいていのデバッガーが対応しているプロパティーで、重要なものを次に記す：

program

デバッガー起動時に実行する実行ファイル名。

args

デバッグするプログラムに引き渡すコマンドライン引数。

env

環境変数。未指定を表現するのに null を値に取ることが許される。

cwd

作業ディレクトリーパス。実行ファイルの依存関係を検出させる必要があるならば、この指定は重要だ。

console

端末の種類をこの属性で指定できるようだ。次のような値を取るだろう：

• "internalConsole"

• "integratedTerminal"

• "externalTerminal"

デバッグコマンド

デバッグセッションを開始すると、エディター上部に本家 Visual Studio でも見かけたようなデバッグツールバーが表示される。効率の観点から、デバッグコマンドを実行するのはキーボード操作によるのが自然だ。

デバッグコマンド集合自体は、よそのデバッガーでも見かけるものだ：

キーバインド	コマンド	操作
F5	Continue	次のブレイクまでプログラムカウンターを進める
F5	Pause	進行中のプログラムを一時停止する
F10	Step Over	プログラムカウンターをワンステップ進める
F11	Step Into	プログラムカウンターを関数呼び出しの内部に入る
Ctrl + F11	Step Into Target	Step Into する対象を一覧する（後述）
Shift + F11	Step Out	関数呼び出し復帰直後までプログラムを進める
Ctrl + Shift + F5	Restart Debugging	デバッグセッションを Stop して新しく Start する。
Shift + F5	Stop Debugging	デバッグセッションを打ち切って終了する。

コマンド Step Into Target は説明を要すると思われるのでここに記す。あるステップでプログラムカウンターが停止しているとする。この時点で可能性のある Step Into 対象（関数）すべての一覧がポップアップされる。何か項目を選択すると、プログラムカウンターがその対象に Step Into するというコマンドだ。

ブレイクポイント

ブレイクポイント一つの有効性を反転するにはコマンド Toggle Breakpoint を実行する。コマンドの直接指定以外では、次のいずれかの操作により発動する：

• 対象行にキャレットがある状態で F9 を押す。

• 行番号の左マージンをクリックする。

切り替え以上の細かい制御は Side バー RUN AND DEBUG ビュー BREAKPOINTS セクションで行う。次のコマンドなどを UI 操作で実現できる：

コマンド	操作
Toggle Activate Breakpoints	ブレイクポイントすべてに対する Toggle Breakpoint
Edit Breakpoint	ブレイクポイントに停止条件を与える
Remove Breakpoint	ブレイクポイント一つを削除する
Remove All Breakpoints	ブレイクポイント全てを削除する

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

適用されているデバッガー拡張機能によっては、条件付きブレイクポイント機能も用意されている。次のどれかを行って条件を与える：

• 対象行にキャレットを置いてからコマンド Debug: Add Conditional Breakpoint を直接実行する。

• メインメニューから Run ‣ New Breakpoints ‣ Add Conditional Breakpoint を選択する。

• エディター行左マージンからコンテキストメニューを表示して、項目 Add Conditional Breakpoint を選択する

• 既存のブレイクポイントに対して Edit Condition を実行する。表示方法の例：

  • エディター行左マージンのブレイクポイントの丸印のコンテキストメニュー

  • BREAKPOINTS セクションの鉛筆アイコンクリック

上記の編集コマンドを実行すると、エディターを割り込むように入力 UI が出現する。 VS Code 以外のデバッガーと同様に、停止条件を評価式とヒットカウントのいずれか、もしくは双方により指定する。

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

文が一行に複数あるような場合、C/C++ で言うならばセミコロンが複数あるような行の途中にブレイクポイントを設定したい。こういうときにインラインブレイクポイントを利用する。対象文内にキャレットを置いてから、次のいずれかの方法でインラインブレイクポイントを追加する：

• コマンド Debug: Inline Breakpoint を直接実行する。

• Shift + F9 を押す。

• メインメニューから Run ‣ New Breakpoints ‣ Inline Breakpoint を選択する。

前節で述べた Edit Condition を実行することで、定義済みインラインブレークポイントに条件を設定することもできる。

関数ブレイクポイント

関数名を指定することでブレイクポイントを設定できる。作成方法：

• コマンド Add Function Breakpoint を直接実行する。

• BREAKPOINTS セクション右上のプラスアイコン押し、関数名を入力する。

関数ブレークポイントは BREAKPOINTS セクション一覧に赤三角形で示される。

ログポイント

VS Code 内蔵 JavaScript デバッガーを含むデバッガーのいくつかはコマンド Debugger: Add Logpoint を実装している。

ログポイントとは、事前に定義しておいた書式の文字列をログ出力するようなブレイクポイントだ。この文字列は JavaScript の fstring の要領で中括弧内に評価式を含むことができる。

デバッグ中にプログラムデータを検査する

変数

デバッグ実行中に特定の変数の値をチェックするには、次の方法がある：

• RUN AND DEBUG ビュー VARIABLES セクションにある変数の表示をチェックする。

• エディターで変数にマウスをホバーすると現れるツールチップをチェックする。

VARIABLES ビューの変数に関するコンテキストメニューには、変数にアクセスする有用なコマンドがある。

コマンド	操作
Set Value	現時点での変数の値を任意に変更する
Copy Value	値をクリップボードにコピーする
Copy as Expression	識別子や評価式をクリップボードにコピーする

ウォッチ

変数というより、それを含む式の評価を動的にチェックしたいことがある。それには RUN AND DEBUG ビュー WATCH セクションを利用する。次のいずれかの方法で項目を追加する：

• WATCH セクションの Add Expression アイコンをクリックして式を直接追加する

• VARIABLES セクションの項目コンテキストメニューから Add to Watch を選択する

不要になった項目は Remove 系コマンド各種で削除すればいい。

デバッグ端末

デバッグ中のシンボルを用いた式をデバッグ端末で評価することができる。

デバッグ端末の表示状態を切り替えるコマンドは View: Toggle Debug Console だ。コマンドを実行するには次のいずれかでよい：

• 直接実行する

• メインメニューの View ‣ Debug Console を選択する

• Debug ペインで DEBUG CONSOLE タブの表示を切り替える

• Ctrl + Shift + Y を押す

式を最下部のテキストボックスに入力して Enter を押すと、入力した式が評価される。Google Chrome 開発者ツールのそれと異なり、入力部と出力部が同一でない。

テキストボックスで改行文字を入力する場合は Shift + Enter を押す。

テキストボックスにはエディターの言語モードが適用され、キーワード着色などの固有機能が有効だ。これが便利かというとそうでもなく、括弧の補完などが有効だと邪魔になる。

その他

私がまだ必要としていない機能群を以下に記しておく。

構成ファイル launch.json での高度な属性設定

基本的な設定はもちろん必要だ。

複数対象デバッグ

クライアントサーバーシステムなど、複数のプロセスを含む複雑な状況に対応している。使用方法は、デバッグセッションを順次起動すると、後続セッションが走り始めると同時に、VS Code の UI が複数対象モードに切り替わる。

複合起動構成

複数対象デバッグを実現するさらなる方法だ。構成には並行して起動する複数の起動設定の名前を記載する。オプションで、デバッグセッションそれぞれが開始する前に実行される preLaunchTask を指定することができる。フラグ stopAll は、セッション一つを手動で終了させたときに、複合セッションすべても停止させるかどうかを指定するものだ。