概要
VSCodeでのデバック画面
こんな感じの画面でデバックができます。
設定方法
VSCodeにおけるTypeScriptデバックの流れとしては、下記の通りです
{ "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "Debugging TypeScript", "program": "${file}", // tasks.json のlabelで指定 "preLaunchTask": "Compile TypeScript", "cwd": "${workspaceFolder}", "outFiles": [ "${workspaceFolder}/build/**/*.js" ] } ] } // ${file}: 今開いているコード // ${workspaceFolder} : VS Codeを開いたフォルダ
{ "version": "2.0.0", "tasks": [ { "label": "Compile TypeScript", "type": "shell", "command": "yarn build", "problemMatcher": [] } ] }
デバックの実行
fn + F5で、デバックが開始されます。
※ node.js version could not be determined
というログが出ている原因は、これから見ていきます :pray:
参考資料
https://code.visualstudio.com/docs/editor/debugging https://code.visualstudio.com/docs/editor/tasks#vscode