Why not login to Qiita and try out its useful features?

We'll deliver articles that match you.

You can read useful information later.

10
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

VSCode + Babel でデバッグをする

Posted at

Visual Studio Code を利用して node.js のプロジェクトのデバッグを行うとブレークポイントの利用ができるなど非常に便利です。しかし、babelを利用してコードのトランスパイルを行っていると、デフォルトの設定ではブレークポイントを貼り付けることができません。ここではその対応を行い、bableを利用してもブレークポイントを利用してデバッグができるようにします。

ビルドをするscriptを定義する

babelでコードをトランスパイラするためのscriptをpackage.jsonに定義します。

package.json
"scripts": {
  "build": "babel src/ -d build/ --source-maps",
}

パスなどは自分の環境に合わせて変更をしてください。--source-mapsというオプションを付けてトランスパイル元のファイルと前のファイルを結びつけます。

タスクを定義する

次に、Visual Studio Code で利用するタスクを定義します。.vscode/tasks.jsonを編集します。

.vscode/tasks.json
{
  "version": "2.0.0",
  "tasks": [
    {
      "identifier": "build",
      "type": "npm",
      "script": "build",
      "problemMatcher": []
    }
  ]
}

Visual Studio Code からnpm run buildを呼び出すことができるように成りました。

実行の構成を作る

最後にVisual Studio Code の実行のための構成を作ります。.vscode/launch.jsonを編集します。

.vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [

    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}/build/index.js",
      "preLaunchTask": "build",
      "sourceMaps": true,
      "outFiles": ["${workspaceRoot}/build"]
    }
  ]
}

preLaunchTaskで先程定義をしたbuildタスクを呼び出してbabelによるトランスパイルを行います。sourceMapsオプションをtrueとしoutFilesにトランスパイルされたファイルが格納されているディレクトリのリストを指定します。

Visual Studio Codeのデバッグ->デバッグの開始でコードの実行ができます。また、トランスパイル前のコードにブレークポイントを設定しても、コードを停止することが可能です。

まとめ

Visual Studio Codeのデバッグ機能を利用してbableによってトランスパイルされたコードに対してもブレークポイントを利用するための設定を紹介しました。

10
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up

Comments

No comments

Let's comment your feelings that are more than good

10
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Login to continue?

Login or Sign up with social account

Login or Sign up with your email address