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

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とします。

※2023/05/21 Chrome for Debugger不要で、現在はlaunch.jsonだけでデバッグできます

{
  "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)をローカルでデバッグする方法あれこれ」参照ください。

Pythonコードをデバッグ

Pythonコードをデバッグするには「Python」プラグインをインストールします。

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Python: Current File",
            "type": "python",
            "request": "launch",
            "program": "hoge.py", ★
            "console": "integratedTerminal",
            "justMyCode": false
        }
    ]
}

これで、hoge.pyが実行され、ブレークポイントで止まります。

${file}と指定すると、現在開いているファイルに対してテスト実行(F5)します。

PHPをデバッグする

PHPをWSL2+VSCode(launch.json)でデバッグする方法」を参照下さい。

Spring Bootをデバッグする

「Spring Boot Extension Pack 」プラグインをインストールします。

mainClassに@SpringBootApplicationアノテーションがあるクラスを指定すればデバッグ可能です。

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "java",
            "name": "App",
            "request": "launch",
            "mainClass": "jp.co.example.App",
            "projectName": "xxx"
        }
    ]
}

コメント

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