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で開いたフォルダのパスになります。
以下はその他の置換変数です。
置換変数 | 説明 |
---|---|
${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" } ] }

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