Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Visual Studio CodeでNode.jsデバッグ

More than 5 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

kuniken
React,Nodejs,Salesforceをよく使ってます。 ーー エンジニア募集中です! https://paiza.jp/career/job_offers/5412 システムに関するご相談はこちらより承っております。 https://solutionware.jp/contact.html
https://solutionware.jp/blog/category/kunitak/
solutionware
WEBサービスの開発・運営を通じてお客様の生産性向上を実現します
https://solutionware.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away