VSCodeでlaunch.jsonを作成してデバッグする方法

vscodeVisual Studio Code

VSCodeでlaunch.jsonを作成してデバッグする方法

VSCodeでデバッグするにはプラグインなどを入れたりする必要がありますが、まず最初にlaunch.jsonを作成します。

「デバッグ」-「構成を開く」で以下ファイルが作成されます。

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-node",
      "request": "launch",
      "name": "プログラムの起動",
      "program": "${workspaceFolder}\\index.js",
      "outFiles": [
        "${workspaceFolder}/**/*.js"
      ]
    }
  ]
}

これでF5を押下すると、ワークスペース直下のindex.jsがデバッグモードで実行されます。

typeはnodeにしていますが、chromeに変更すると、Chromeが起動します。

builtinでjavascript debuggerプラグインが入っています。

VSCodeでlaunch.jsonを作成してデバッグする方法

AngularをChrome for Debuggerでデバッグする

まずはAngularをChromeでデバッグする方法です。以下のように記述します。Angularのポートはデフォルトの4200とします。

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Angular Test",
      "url": "http://localhost:4200/",
      "webRoot": "${workspaceRoot}"
    }
  ]
}

${workspaceRoot}は、VisualStudioCodeで開いたフォルダのパスになります。

以下はその他の置換変数です。

置換変数説明
${workspaceRoot}VisualStudioCodeで開いたフォルダのパス
${file}現在アクティブなファイル
${fileBasename}現在アクティブなファイルのベース名
${fileDirname}現在アクティブなファイルのディレクトリ名
${fileExtname}現在アクティブなファイルの拡張子
${CWD}起動時にタスクランナーの現在の作業ディレクトリ

環境変数を設定する

launch.jsonで環境変数を設定することができます。envを指定します。

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "program": "${workspaceFolder}\\node_modules\\mocha\\bin\\mocha",
      "env": { // 環境変数
        "http_proxy": "http://proxy.confrage.co.jp:8080/", // プロキシ
        "NODE_DEBUG":"INFO" // INFOだけ出力
      }
    }
  ]
}

mochaを実行してデバッグ

mochaでテストコードをデバッグしたい場合は以下のようにmochaを指定します。

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "program": "${workspaceFolder}\\node_modules\\mocha\\bin\\mocha", // mocha指定
      "env": {
        "NODE_DEBUG":"INFO,ERROR" // 環境変数なければ設定不要
      },
      "args": [
        "--timeout",
        "900000",
        "${workspaceFolder}\\test\\**\\*.test.js" // この場合は全テストコードがデバッグ対象
      ]
    }
  ]
}

console.logで出力する

デバッグ時にconsole.log()をターミナルに出力したい場合は”console”: “integratedTerminal”を追加します。

"configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "program": "${workspaceFolder}\\node_modules\\mocha\\bin\\mocha",
      "env": {
        "NODE_DEBUG":"INFO,ERROR" // 環境変数なければ設定不要
      },
      "args": [
        "--timeout",
        "900000",
        "${workspaceFolder}\\test\\**\\*.test.js"
      ]
      "console": "integratedTerminal" // ★
    }
]

Lambdaテスト

AWS Lambda(node.js)をローカルでデバッグする方法あれこれ」参照ください。

コメント

タイトルとURLをコピーしました