第2回 Visual Studio Codeのデバッグ構成ファイルの基本:Node.js編特集:Visual Studio Codeデバッグ入門(3/3 ページ)

» 2017年08月04日 05時00分 公開
[かわさきしんじInsider.NET編集部]
前のページへ 1|2|3       

[Attach Program]構成でデバッグ

 まずはコンソールや統合ターミナルから「node debug bin\www」「node --debug bin\www」などのコマンドを入力して、デバッグモードでアプリを実行する。あるいはpackage.jsonファイルにデバッグ用のスクリプトを記述して、「npm run-script debug」などとしてもよい。

 例えば、以下は統合ターミナルからコマンドラインでプログラムをデバッグモードで実行しているところだ。

--debug-brkオプションを指定してプログラムを実行したところ --debug-brkオプションを指定してプログラムを実行したところ

 そして、[デバッグ]ビューで[Attach Program]構成を選択して、[デバッグの開始]ボタンを実行する。アタッチができれば後は通常通りにデバッグを行える。

アタッチしてデバッグを行っているところ アタッチしてデバッグを行っているところ

 デバッグ用のツールバーの右端には、アタッチを解除するボタンがあるので、デバッグが終了したらこれをクリックしよう(ただし、起動したプログラムは依然として実行を続けた状態となるので注意)。

npmスクリプト経由でプログラムをデバッグ実行する

 VS Codeではnpmをランタイム環境としてデバッグを行うことも可能だ。これには、runtimeExecutable属性を指定する。例えば、package.jsonファイルに以下のようなデバッグ用スクリプトを追加し、その設定を利用してデバッガーを起動できる。ここではInspectorプロトコルを使うように指定している(デフォルトのポート番号は9229)。

{
  "name": "expressapp",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www",
    "debug": "node --inspect ./bin/www"
  },
  "dependencies": {
    …… 省略 ……
  }
}


Inspectorプロトコルを使用して、デバッグ実行を行う

 このとき、対応するlaunch.jsonファイルのエントリは次のようになる。

{
  "version": "0.2.0",
  "configurations": [
    {
      …… 省略 ……
    },
    {
      …… 省略 ……
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Launch from npm script",
      "runtimeExecutable": "C:\\Program Files\\nodejs\\npm.cmd",
      "runtimeArgs": [
        "run-script", "debug"
      ],
      "protocol": "inspector",
      "port": 9229
    }
  ]
}


対応するlaunch.jsonファイルのエントリ
runtimeExecutable属性とruntimeArgs属性、protocol属性、port属性を指定している

 ここではruntimeExecutable属性にはnpmへのフルパスを指定している(筆者が試したところでは単に「npm」とするだけではうまくいかなかったため)。runtimeArgs属性にはnpmに与える引数を指定する。「npm run-script debug」コマンドを実行するので、ここでは"run-script"と"debug"を指定している。protocol属性にはpackage.jsonで指定した「"node --inspect ./bin/www"」に合わせて"inspector"を指定し、port属性にはInspectorプロトコルで使用するデフォルトポート番号の9229を指定している。

 この状態で、[Launch from npm script]を選択して[デバッグの開始]ボタンをクリックすれば、[デバッグ コンソール]パネルからプログラムが起動されて、デバッグ実行が開始される。

 この辺りの設定は結構面倒くさいところがあり(特にVS Codeの側でいろいろと気を使ってくれるのが、逆に分かりにくくなっているような気がする)、試行錯誤が必要になるかもしれない。うまくいかないときには、ポートとプロトコルを適切に設定できているかに注意しよう。


 今回はNode.jsプログラムのデバッグを行う際に、そのデバッグ構成を行う方法を見た。本稿では取り上げなかった属性もたくさんあるので、興味のある方は「Node.js Debugging in VS Code」ページや「Node.js Tutorial in VS Code」ページなどを参照されたい。

 次回はVS Codeで.NET Coreコードをデバッグするための構成などについて見ていく予定だ。

「特集:Visual Studio Codeデバッグ入門」のインデックス

特集:Visual Studio Codeデバッグ入門

前のページへ 1|2|3       

Copyright© Digital Advantage Corp. All Rights Reserved.

スポンサーからのお知らせPR

注目のテーマ

Microsoft & Windows最前線2025
AI for エンジニアリング
ローコード/ノーコード セントラル by @IT - ITエンジニアがビジネスの中心で活躍する組織へ
Cloud Native Central by @IT - スケーラブルな能力を組織に
システム開発ノウハウ 【発注ナビ】PR
あなたにおすすめの記事PR

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。