タグ別アーカイブ: Express.js

Visual Studio CodeでNode.jsデバッグ

※この記事は
http://qiita.com/kuniken/items/a6341297a97925f5081a
で投稿した内容と同じものです。

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

デバッグしたいソースがあるプロジェクトをVisual Studio Codeで開きます。
右上にある、スクリーンショット 2015-11-25 9.06.33をクリックして、スクリーンショット 2015-11-25 9.07.40をクリックするか、メニューバーの[FIle]->[Open…]でプロジェクトを開きます。
↓こんな感じ
スクリーンショット 2015-11-25 9.02.40

launch.jsonの設定

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

Visual Code Editorのお作法でlaunch.jsonを作成する必要があるようです。
歯車のアイコンをクリックして、
スクリーンショット 2015-11-25 9.15.04
Node.jsを選択します。
スクリーンショット 2015-11-25 9.16.03
すると、
スクリーンショット 2015-11-25 9.17.43
launch.jsonが作成されました。

次に、作成されたlaunch.jsonを実際にデバッグできるように編集します。
“program”: “app.js”
を変えるだけです。
このプロジェクトの場合は、server/server.jsが起点になっていますので、
“program”: “server/server.js”
とします。

デバッグ実行

デバッグ実行するには、
スクリーンショット 2015-11-25 9.22.10
の緑色の再生アイコンをクリックするだけです。

デバッグが始まったら、右にコンソールが表示されます。
スクリーンショット 2015-11-25 9.28.32
実際に、http://localhost:5000 にアクセスしてみる。
スクリーンショット 2015-11-25 9.30.38
画面が表示されました。

ブレークポイント

以下のようにブレークポイントを置けば、ライン実行もできます。
スクリーンショット 2015-11-25 10.03.55

変数の中身を覗きたければ、カーソルを当てることで見れますし、右下
スクリーンショット 2015-11-25 10.07.15
のようにコマンド欄に変数名を入力してenterすれば、コンソールで中身を確認することができます。

変数の状態を監視したい場合は、以下のように変数で右クリックして、
スクリーンショット 2015-11-25 20.52.42
Debug: Add to Watch
をクリックします。すると、左のWATCHの所に変数が追加されます。
スクリーンショット 2015-11-25 20.54.51