Visula Studio Code で超簡単・拡張機能の必要最小限のデバッグ環境を構築してみる(JavaScript編)

JavaScriptのデバッグ環境を構築する

JavaScriptで作成した拡張機能(Extension) の最低限のデバッグ環境を構築し、 Visula Studio Code で超簡単・拡張機能を作ってみる(JavaScript・デバッグ環境無編) で作成した JavaScript の超簡単な拡張機能(Extension)をデバッグ起動してみます。

Node.js をインストールします。

Node.jsは、VSCode に基本（ベースとなっているソフトウェア）でもありますし、TypeScript を利用する上でも必須です。

https://nodejs.org/ja/download/releases/ から、 現在インストールしている VSCodeが使用している Node.js と同じバージョンをダウンロードファイルし、インストールします。

ここでは、//nodejs.org/dist/v6.11.2/node-v6.11.2-win-x64.zip をダウンロードし、 適当なディレクトリに解凍します。(ポータブル版なので、そこがインストール先ディレクトリとなります。)

続けて、環境設定でインストール先のパスを PATH 環境に追加します。

環境が整っているか、確認しておきます。

適当なディレクトリで node が実行できるか確認しておきます。
以下のようにバージョン情報が確認できれば、PATHの設定ができています。 もし、うまく出力されない場合は、こちらの環境設定を再度実行してみてください。

C:\temp> node -v
v7.4.0

次に、同じように適当なディレクトリで npm が実行できるか確認しておきます。
以下のようにバージョン情報が確認できれば OK です。 もしうまく出力されない場合は、先のダウンロードしたファイルに誤りがなかったか再確認にしてください。

C:\temp> npm -v
4.0.5

最後に、同じように適当なディレクトリで Visual Studio Code が実行できるか確認しておきます。
以下のようにバージョン情報が確認できれば、PATHの設定ができています。 もし、うまく出力されない場合は、こちらの環境設定にならって、 PATH に Visual Studio Code のインストール先の code.cmd があるパスを追加してみてください。

C:\temp> code -v
1.15.1
41abd21afdf7424c89319ee7cb0445cc6f376959

JavaScript の拡張機能(Extension)をデバッグしてみる。

ここまでの環境で、JavaScript の拡張機能(Extension)ができます。

Visula Studio Code で超簡単・拡張機能を作ってみる(JavaScript・デバッグ環境無編) で作成したサンプルを使って、実際にデバッグしてみましょう。
ここでは、C:\temp\vsc\extension\sample の配下に先に作成した js ファイル および jsonファイルがあるものとします。

1. VSCodeがデバッグ時に参照するディレクトリを作成します。
   

   C:\temp\vsc\extension\sample> mkdir .vscode

2. カレントディレクトリを開き、VSCodeを起動します。
   

   C:\temp\vsc\extension\sample> code .

3. 起動したVSCodeで、.vscode/launch.json を作成、編集します。各項目についての詳細は、 こちらを参照してください。
   

   { "version": "0.1.0", "configurations": [ { "name": "Launch Extension", "type": "extensionHost", "request": "launch", "runtimeExecutable": "${execPath}", "args": ["--extensionDevelopmentPath=${workspaceRoot}" ] } ] }

4. デバッグ起動(F5) でデバッグ実行します。
   
   

   上図のようにVSCodeが起動されるはずです。

5. その起動したVSCode からコマンドパネル(Ctrl + Shift + P)を起動します。
   
   
   
6. コマンドパネル に "sample" を入力すると、"Super Simple Sample" が表示されるはずなので、そちらを起動します。
   
   

   上図のような通知メッセージが表示されればOKです。

   
   

ここまでできると、ブレイクポイントの設定もできますし、ダンプもできます。 ほぼ、これで、デバッグ環境が作れたことになります。

（おまけ）Launch.jsonの設定項目の解説

以下に、Launch.jsonの設定項目の一覧を記載しておきます。

• type必須[ Y ]起動構成に使用するデバッガの種類

  インストールされたすべての拡張機能は型(例: ビルトインnodeデバッガではnode、php(PHP拡張機能)、go(Go拡張機能))を持っています。

• request必須[ Y ]起動構成のリクエストタイプ

  現在サポートされているのはlaunchとattachです。

• name必須[ Y ]デバッグ起動構成のドロップダウンに表示する親しみやすい名前

• preLaunchTask必須[ N ]デバッグセッションの開始前に起動するタスク

  属性はtasks.json(ワークスペースの.vscodeフォルダーの下)で指定したタスクの名前になります。

• internalConsoleOptions必須[ N ]デバッグセッション中のデバッグコンソールパネルの動作制御

• debugServer必須[ N ]拡張機能作成者用: 起動するデバッグアダプターの代わりに接続する特定のポート

• program必須[ N ]デバッガを起動するときに起動する実行可能ファイルもしくはファイル

• args必須[ N ]デバッグするプログラムに渡される引数

• env必須[ N ]環境変数

• cwd必須[ N ]環境依存とその他のファイルを見つけ出すために利用する現在の作業ディレクトリ

• port必須[ N ]実行中のプロセスにアタッチするときのポート

• stopOnEntry必須[ N ]プログラムを起動したとき指定したものを停止します

• console必須[ N ]使用するコンソールの種類。例:internalConsole, integratedTerminal, externalTerminal