JavaScriptのデバッグ環境を構築する
JavaScriptで作成した拡張機能(Extension) の最低限のデバッグ環境を構築し、
Visula Studio Code で超簡単・拡張機能を作ってみる(JavaScript・デバッグ環境無編) で作成した JavaScript の超簡単な拡張機能(Extension)をデバッグ起動してみます。
ここで確認した環境は、以下のとおりです。
- Windows 8 Pro
- Visual Studio Code v1.15.1
Node.js をインストールします。
Node.jsは、VSCode に基本(ベースとなっているソフトウェア)でもありますし、TypeScript を利用する上でも必須です。
https://nodejs.org/ja/download/releases/ から、
現在インストールしている VSCodeが使用している Node.js と同じバージョンをダウンロードファイルし、インストールします。
ここで同じバージョンを使うのは、できるだけVSCodeの開発環境に合わせることで、変な問題に遭遇しないようにしているだけです。
もし、既に最新バージョンなどがインストールされている場合は、それをご利用になっても良いかと思います。
ここでは、//nodejs.org/dist/v6.11.2/node-v6.11.2-win-x64.zip をダウンロードし、
適当なディレクトリに解凍します。(ポータブル版なので、そこがインストール先ディレクトリとなります。)
続けて、環境設定でインストール先のパスを PATH 環境に追加します。
通常のインストール版では、パスの設定までやってくれるようです。
面倒な方は、そちらをご利用ください。
ここでは、環境の理解のために手動で行っています。以下の図は、Windowsにおける環境設定(パス設定)を行う手順を示したものです。
- Windows Key + Pause Key で以下のシステムコントロールパネルを表示します。
"環境設定" をクリックします。
- 以下の手順でパス設定を行います。
- "システムのプロパティ"画面 から "詳細設定" タブをクリックし、"環境変数" をクリックします。
- "環境変数" 画面から "PATH" を選択し、"編集" をクリックします。
- "ユーザ変数の変種" 画面から "変数値" の最後に ";" + Node.js のインストール先ディレクトリを追記し、"OK" をクリックします。
- 随時、呼び元の画面でもOKをクリックし終了です。
環境が整っているか、確認しておきます。
適当なディレクトリで 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ファイルがあるものとします。
- VSCodeがデバッグ時に参照するディレクトリを作成します。
C:\temp\vsc\extension\sample> mkdir .vscode
|
- カレントディレクトリを開き、VSCodeを起動します。
C:\temp\vsc\extension\sample> code .
|
- 起動したVSCodeで、.vscode/launch.json を作成、編集します。各項目についての詳細は、 こちらを参照してください。
{
"version": "0.1.0",
"configurations": [
{
"name": "Launch Extension",
"type": "extensionHost",
"request": "launch",
"runtimeExecutable": "${execPath}",
"args": ["--extensionDevelopmentPath=${workspaceRoot}" ]
}
]
}
|
- デバッグ起動(F5) でデバッグ実行します。
上図のようにVSCodeが起動されるはずです。
- その起動したVSCode からコマンドパネル(Ctrl + Shift + P)を起動します。
- コマンドパネル に "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
いかがだったでしょうか?
Node,js のインストール と .vscode/
launch.json の設定 でデバッグ環境を整えることができます。
launch.json は、起動設定ファイルという意味合いだと思いますが、VSCodeは、起動しているプロジェクト(開いているディレクトリ)の
.vscode ディレクトリ配下の
launch.jsonファイルを参照し、デバッグ機能してくれます。
(
.vscodeは、Windpwsのエクスプローラでは作成できないことがあります。その際は、コマンド mkdir を使えば作成できます。)
やってみると、案外、簡単にできたのではないでしょうか?
JavaScriptを書ける方には、この環境で簡単に独自の拡張機能(Extension)を作成できると思います。
ただ、VSCodeを制御する上で、
VSCodeのAPIは理解する必要があるかとは思います。
一度、試されてはいかがでしょうか。
コメントをどうぞ