VS Codeでsailsjs開発の続きです。今回は、VS Codeで開発アプリのデバッグを行うための設定。

まず、Node Debug 拡張機能をインストールします。
---1

その後、デバッグの設定をVS Code上で行っていけばいいんですが毎回同じことの繰り返しになるのでデバッグ用の設定ファイルを作成しちゃいます。

プロジェクト内に.vscodeというフォルダを作成し(既にあればそこへ)以下の内容の launch.json ファイルを作成します。

{
  // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "http://localhost:1337",
      "webRoot": "${workspaceFolder}"
    },
    {
      "type": "pwa-node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": ["<node_internals>/**"],
      "program": "${workspaceFolder}\\app.js"
    }
  ]
}

設定的にプログラムを起動したらその後にブラウザを自動で立ち上げるような事は出来なさそうだったので、基本は"name": "Launch Program"の方だけでもOKです。

launch.jsonの詳細は、https://code.visualstudio.com/docs/editor/debugging#_launch-configurations を参照してください。

launch.jsonを保存したら「ctrl+shift+D」か左ペインのデバッグアイコンを押下してデバッグビューを表示します。そして、実行で「Launch Program」を選択し実行させればデバックモードが開始されます。

--2-1

デバッグポイントを置いて、「Launch Chrome」でChromeを起動するか、別途ブラウザの方で http://localhost:1337 アクセスしたのが以下のキャプチャーです。
--3-1