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プラグインが入っています。

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で開いたフォルダのパスになります。

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

環境変数を設定する

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"
        }
    ]
}

preLaunchTask

launch.jsonのpreLaunchTaskは、デバッグ開始前に実行するtasks.jsonで定義したタスクを指定します。

tasks.jsonで定義されたタスク(ラベル名 or ${defaultBuildTask})を指定します。

"preLaunchTask": "debug"

拡張機能開発でデバッグする

VS Code拡張機能開発時のデバッグはtypeにextensionHostと指定します。

argsは、["--extensionDevelopmentPath=${workspaceFolder}"]を指定することにより、指定フォルダ（通常は開発中の拡張機能のプロジェクトディレクトリ）を拡張機能の開発モードで動かす設定になります。

outFilesでトランスパイルしたjsファイルの場所を指定します。これを指定することでソースマップを介してTypeScriptコードにブレークポイントを指定することが出来るようになります。

outFilesは必須ではありませんが、TypeScriptやBabelなどでトランスパイルを行うプロジェクトでは指定推奨です。

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "extensionHost",
            "name": "Sample",
            "request": "launch",
            "args": ["--extensionDevelopmentPath=${workspaceFolder}"],
            "outFiles": ["${workspaceFolder}/dist/**/*.js"]
        }
    ]
}

インタラクティブに値を動的に変更してデバッグ

F5デバッグ時にユーザーに入力を求め、その値をargsに渡す、みたいなケースでデバッグしたい場合はinputsセクションを使用して実現することが出来ます。

pickString・・・ユーザーに選択肢から選ばせる

promptString・・・ユーザーに文字列入力を求める

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "java",
      "name": "Debug Java with Env and Args",
      "request": "launch",
      "mainClass": "com.example.Main",
      "args": "--env ${input:environment} ${input:programArgs}"
    }
  ],
  "inputs": [
    {
      "id": "environment",
      "type": "pickString",
      "description": "Select the environment",
      "options": ["dev", "staging", "prod"],
      "default": "dev"
    },
    {
      "id": "programArgs",
      "type": "promptString",
      "description": "Enter program arguments (space separated)",
      "default": ""
    }
  ]
}

高橋

KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES20xx),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^