Help us understand the problem. What is going on with this article?

VSCodeのデバッグ機能でJavascriptとTypescriptをデバッグする

デバッグにはconsole.logを使いがちですが、新しいコードを理解する場合はデバッグ機能の方が便利です。VSCodeでJavascriptとTypescriptをデバッグするのが思った以上に簡単です!

Javascript

① デバッグしたいファイルを開けて、デバッグアイコンをクリックし、Debug with Node.jsをクリックします

Screen Shot 2020-01-14 at 12.51.08.png

以上です。設定したブレークポイントがあれば、ちゃんと止まってくれます!

Screen Shot 2020-01-14 at 12.55.32.png

② たまには、トランスパイルしないと実行できないJSもあるので、もちろんそのままデバッグはできません。この場合は、もう少しだけ複雑になりますが、その方法も下で紹介します。

Typescript

トランスパイル必要なJSの場合と、Typescriptの場合は、手順が似ているので、一緒に紹介します。

① デバッグしたいTSファイルを開けて、デバッグアイコンをクリックし、Create a launch.json fileをクリックします。

Screen Shot 2020-01-14 at 13.01.32.png

すると、ワークスペースのルートに.vscodeフォルダーが生成され、その中にlaunch.jsonファイルができます。このファイルには、デバッグ設定が記載されています。

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program", // 好きな名前にできる
      "skipFiles": ["<node_internals>/**"], // nodeランライムの関数には入らないようにする
      "program": "${workspaceFolder}/file.ts", // デバッグしたいファイル
      "outFiles": ["${workspaceFolder}/dist/*.js"]
    }
  ]
}

programoutFilesが自動的に生成されるので、もし間違いがあればまず修正してください。outFilesというのは、ビルド・トランスパイルのアウトプット先のフォルダーです。VSCodeにそれを知らせると、.tsファイルの中でブレークポイントつけられるようになります。

③ ビルド方法をVSCodeに教えます。デバッグを実行する前に、自動的に再ビルドしたい場合は、タスクとしてlaunch.jsonの中に書きます。

たとえば、package.jsonの中のscriptsは以下だとします。

"scripts": {
    "build": "tsc file.ts --sourceMap --outDir dist"
}

この場合は、launch.jsonpreLaunchTaskとして、npm: buildを指定するだけでOKです。

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": ["<node_internals>/**"],
      "program": "${workspaceFolder}/file.ts",
      "preLaunchTask": "npm: build", // package.jsonが自動的に参照されます
      "outFiles": ["${workspaceFolder}/dist/*.js"]
    }
  ]
}

TSの手順を紹介したけど、babelによるトランスパイルの場合も全く同じです。

気をつけるべきなのは、ソースマップです。これがないと、元のファイルにブレークポイントをつけても、デバッガーが止まってくれないです(現在の実行の位置がわからないからです)。なので、ソースマップもちゃんと生成するようにしましょう。

これで、TSもデバッグできます!

Screen Shot 2020-01-14 at 13.24.01.png

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away