Visual Studio CodeでNode.jsデバッグ

#Visual Studio Code
Visual Studio Code
[https://www.visualstudio.com/ja-jp/products/code-vs.aspx](https://www.visualstudio.com/ja-jp/products/code-vs.aspx)
でNode.jsがデバッグできるとのことだったので試してみました。

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

##プロジェクトを開く
Visual Studio Codeを起動したら、
<img width="1021" alt="スクリーンショット 2015-11-25 9.04.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/89819/4e98d4ac-acf7-68ab-f86a-61ccd2fcdf59.png">

デバッグしたいソースがあるプロジェクトをVisual Studio Codeで開きます。
右上にある、<img width="50" alt="スクリーンショット 2015-11-25 9.06.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/89819/33fb31f0-0654-586b-7f3e-6209f96edff2.png">をクリックして、<img width="198" alt="スクリーンショット 2015-11-25 9.07.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/89819/5b9f11f3-ac5c-5adc-abb5-765ef4dcfd33.png">をクリックするか、メニューバーの[FIle]->[Open...]でプロジェクトを開きます。
↓こんな感じ
<img width="1021" alt="スクリーンショット 2015-11-25 9.27.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/89819/27bcd88e-1625-bf45-3ef7-56236cc6b75c.png">

##launch.jsonの設定
デバッグするには、<img width="42" alt="スクリーンショット 2015-11-25 9.13.23.png" src="https://qiita-image-store.s3.amazonaws.com/0/89819/d2a04f84-5433-5cea-a23c-998e0a99bfb9.png">をクリックします。

Visual Code Editorのお作法でlaunch.jsonを作成する必要があるようです。
歯車のアイコンをクリックして、
<img width="323" alt="スクリーンショット 2015-11-25 9.15.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/89819/416a470f-6778-da50-19fc-6dbfb7067922.png">
Node.jsを選択します。
<img width="433" alt="スクリーンショット 2015-11-25 9.16.03.png" src="https://qiita-image-store.s3.amazonaws.com/0/89819/86c71ae2-ea44-bd6b-573a-89e563855b6d.png">
すると、
<img width="1017" alt="スクリーンショット 2015-11-25 9.17.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/89819/34035d35-f4a4-3a55-627e-391e057f5eea.png">
launch.jsonが作成されました。

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

##デバッグ実行
デバッグ実行するには、
<img width="370" alt="スクリーンショット 2015-11-25 9.22.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/89819/e0dd2288-df29-6431-161a-3aada7f3d229.png">
の緑色の再生アイコンをクリックするだけです。

デバッグが始まったら、右にコンソールが表示されます。
<img width="1021" alt="スクリーンショット 2015-11-25 9.28.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/89819/ad41e5d2-c11a-7155-f042-a1d1c120d553.png">
実際に、http://localhost:5000にアクセスしてみる。
<img width="1237" alt="スクリーンショット 2015-11-25 9.30.38.png" src="https://qiita-image-store.s3.amazonaws.com/0/89819/c849286f-bf9a-c16b-66a1-7ac5f25dd95b.png">

##ブレークポイント
以下のようにブレークポイントを置けば、ライン実行もできます。
<img width="1026" alt="スクリーンショット 2015-11-25 10.03.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/89819/e03c295d-1b7a-9e7d-6cb3-767741ad665a.png">

変数の中身を覗きたければ、カーソルを当てることで見れますし、右下
<img width="442" alt="スクリーンショット 2015-11-25 10.07.15.png" src="https://qiita-image-store.s3.amazonaws.com/0/89819/3bd144a1-4415-7946-b382-2852e5b2edba.png">
のようにコマンド欄に変数名を入力してenterすれば、コンソールで中身を確認することができます。

変数の状態を監視したい場合は、以下のように変数で右クリックして、
<img width="1221" alt="スクリーンショット 2015-11-25 20.52.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/89819/ca11bee9-ac81-54ce-317c-60c8443d788f.png">
Debug: Add to Watch
をクリックします。すると、左のWATCHの所に変数が追加されます。
<img width="648" alt="スクリーンショット 2015-11-25 20.54.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/89819/51ed30c4-d0e9-f986-8e43-b6c7582e0923.png">