TypeScriptをVSCodeでデバックする

5823 ワード
TypeScript VSCode TypeScript テキストリンク

概要

  • TypeScriptのデバック効率を上げたい
  • フロントエンドのコードでは無いのでchromeのデバッグツールが使えない
  • VSCodeのデバックツールを試してみた
  • 5分くらいで設定できた

VSCodeでのデバック画面

こんな感じの画面でデバックができます。

設定方法

VSCodeにおけるTypeScriptデバックの流れとしては、下記の通りです

  1. launch.jsonを読み込む
  2. launch.jsonのpreLaunchTaskにて、実行するタスクを指定する
  3. 指定されたタスクを tasks.jsonから探して実行する
  4. デバッガが動く
.vscode/launch.json
{
  "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を開いたフォルダ
.vscode/tasks.json
{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Compile TypeScript",
      "type": "shell",
      "command": "yarn build",
      "problemMatcher": []
    }
  ]
}

デバックの実行

fn + F5で、デバックが開始されます。

※ node.js version could not be determined というログが出ている原因は、これから見ていきます

参考資料

https://code.visualstudio.com/docs/editor/debugging
https://code.visualstudio.com/docs/editor/tasks#vscode

cssブロック要素のdisplay属性inline-blockの応用