Edited at

Visual Studio CodeでNode.jsデバッグ

More than 3 years have passed since last update.


Visual Studio Code

Visual Studio Code

https://www.visualstudio.com/ja-jp/products/code-vs.aspx

でNode.jsがデバッグできるとのことだったので試してみました。

以前はCOBOLのようにlog吐くようにしてデバッグしてたのですが(eclipseは重くて使いたくない。。)、Visual Studio Codeは無料なのにライン実行できて大助かりです。


プロジェクトを開く

Visual Studio Codeを起動したら、

スクリーンショット 2015-11-25 9.04.07.png

デバッグしたいソースがあるプロジェクトをVisual Studio Codeで開きます。

右上にある、スクリーンショット 2015-11-25 9.06.33.pngをクリックして、スクリーンショット 2015-11-25 9.07.40.pngをクリックするか、メニューバーの[FIle]->[Open...]でプロジェクトを開きます。

↓こんな感じ

スクリーンショット 2015-11-25 9.27.28.png


launch.jsonの設定

デバッグするには、スクリーンショット 2015-11-25 9.13.23.pngをクリックします。

Visual Code Editorのお作法でlaunch.jsonを作成する必要があるようです。

歯車のアイコンをクリックして、

スクリーンショット 2015-11-25 9.15.04.png

Node.jsを選択します。

スクリーンショット 2015-11-25 9.16.03.png

すると、

スクリーンショット 2015-11-25 9.17.43.png

launch.jsonが作成されました。

次に、作成されたlaunch.jsonを実際にデバッグできるように編集します。

"program": "app.js"

を変えるだけです。

このプロジェクトの場合は、server/server.jsが起点になっていますので、

"program": "server/server.js"

とします。


デバッグ実行

デバッグ実行するには、

スクリーンショット 2015-11-25 9.22.10.png

の緑色の再生アイコンをクリックするだけです。

デバッグが始まったら、右にコンソールが表示されます。

スクリーンショット 2015-11-25 9.28.32.png

実際に、http://localhost:5000にアクセスしてみる。

スクリーンショット 2015-11-25 9.30.38.png


ブレークポイント

以下のようにブレークポイントを置けば、ライン実行もできます。

スクリーンショット 2015-11-25 10.03.55.png

変数の中身を覗きたければ、カーソルを当てることで見れますし、右下

スクリーンショット 2015-11-25 10.07.15.png

のようにコマンド欄に変数名を入力してenterすれば、コンソールで中身を確認することができます。

変数の状態を監視したい場合は、以下のように変数で右クリックして、

スクリーンショット 2015-11-25 20.52.42.png

Debug: Add to Watch

をクリックします。すると、左のWATCHの所に変数が追加されます。

スクリーンショット 2015-11-25 20.54.51.png