web-dev-qa-db-ja.com

babel-nodeを使用したVisual Studio Codeでのデバッグ

私は使用しています：

  • VS Code v1.3.1
  • ノードv6.3.1
  • babel-node v6.11.4
  • ウインドウズ10

次の起動ファイルでブレークポイントで停止することができません。デバッガーが実行されてポートにアタッチされますが、ブレークポイントを使用してアプリケーションを実行すると、ブレークポイントで停止せず、そのまま実行されます。これが機能するようになった人は誰でもアドバイスしてください。

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}/src/app.js",
            "stopOnEntry": false,
            "args": [],
            "cwd": "${workspaceRoot}",
            "preLaunchTask": null,
            "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/babel-node.cmd",
            "runtimeArgs": [
                "--nolazy"
            ],
            "env": {
                "NODE_ENV": "development"
            },
            "externalConsole": false,
            "sourceMaps": false,
            "outDir": null
        },
        {
            "name": "Attach",
            "type": "node",
            "request": "attach",
            "port": 5858,
            "address": "localhost",
            "restart": false,
            "sourceMaps": false,
            "outDir": null,
            "localRoot": "${workspaceRoot}",
            "remoteRoot": null
        },
        {
            "name": "Attach to Process",
            "type": "node",
            "request": "attach",
            "processId": "${command.PickProcess}",
            "port": 5858,
            "sourceMaps": false,
            "outDir": null
        }
    ]
}
visual-studio-codebabel-node
36
restassured

次の手順に従って機能させることができました。

Package.json

sourcemaps generationのビルドスクリプトがあることを確認してください。

"scripts": {
    "build": "babel src -d dist --source-maps"
}

tasks.json

npmスクリプトを使用してVS Codeをビルドできるtaskがあることを確認してください。

{
    "version": "0.1.0",
    "command": "npm",
    "isShellCommand": true,
    "showOutput": "always",
    "suppressTaskName": true,
    "tasks": [
        {
            "taskName": "build",
            "args": [ "run", "build" ],
            "isBuildCommand": true
        }
    ]
}

launch.json

スクリプトを起動前にビルドに構成し、preLaunchTaskを使用して、ソースエントリポイントからprogramを開始しますが、outDirはdistフォルダーおよびsourceMapsが有効になっています。

{
    "name": "Launch",
    "type": "node",
    "request": "launch",
    "program": "${workspaceRoot}/src/server.js",
    "stopOnEntry": false,
    "args": [],
    "cwd": "${workspaceRoot}",
    "preLaunchTask": "build",
    "runtimeExecutable": null,
    "runtimeArgs": [ "--nolazy" ],
    "env": {
        "NODE_ENV": "development"
    },
    "externalConsole": false,
    "sourceMaps": true,
    "outDir": "${workspaceRoot}/dist"
}

今、押すたびに F5、babel変換はNodeプロセスが開始する前に実行されますが、すべてのソースマップが同期されます。これにより、ブレークポイントとその他すべてのデバッガーを使用できました。

26
Erick Petrucelli

Babel-nodeでトランスパイルする必要はありません

基本設定（ソースマップ-常に）

.babelrcのsourceMapsおよびretainLinesオプションに注意してください。

{
  "presets": [
    "env"
  ],
  "sourceMaps": "inline",
  "retainLines": true
}

そしてlaunch.jsonで：

{
  "type": "node",
  "request": "launch",
  "name": "Debug",
  "program": "${workspaceFolder}/index.js",
  "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/babel-node",
  "runtimeArgs": ["--nolazy"]
}

事前設定（ソースマップ-デバッグのみ）

デバッグモードでsource-maps/retainLinesのみを生成するように、上記を微調整できます。

{
  "presets": ["env"],
  "env": {
    "debug": {
      "sourceMaps": "inline",
      "retainLines": true
    }
  }
}

そして：

{
  "type": "node",
  "request": "launch",
  "name": "Debug",
  "program": "${workspaceFolder}/index.js",
  "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/babel-node",
  "runtimeArgs": ["--nolazy"],
  "env": {
    "BABEL_ENV": "debug"
  },
}
63
Izhaki

バージョン1.9では、VS Codeはデフォルトでソースマップを自動的に使用しようとしますが、トランスファイルがソースファイルと同じフォルダーにない場合は、outFilesを指定する必要があります。

例として、関連ファイルを以下に示します。この場合、babelはsrcフォルダーからlibフォルダーにトランスパイリングしています。

注：package.jsonおよび.vscode/tasks.jsonのエントリは、デバッグ前にVS Codeがファイルをトランスパイルする場合にのみ必要です。

.vscode/launch.json

Ctrl+Shift+P、>Debug: Open launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceRoot}/lib/index.js",
            "cwd": "${workspaceRoot}",
            "preLaunchTask": "build",
            "outFiles": [
                "${workspaceRoot}/lib/**.js"
            ]
        }
    ]
}

注：package.jsonおよび.vscode/tasks.jsonでpreLaunchTaskタスクも設定した場合にのみ、buildを指定します。

package.json

Ctrl+P、package.json

{
  "scripts": {
    "build": "babel src -d lib -s"
  },
  "devDependencies": {
    "babel-cli": "^6.23.0",
    "babel-preset-env": "^1.1.10"
  }
}

注：babel-cliの異なるバージョンと異なるbabelプリセットを使用できます。

.vscode/tasks.json

Ctrl+Shift+P、>Tasks: Configure Task Runner

{
    "version": "0.1.0",
    "command": "npm",
    "isShellCommand": true,
    "showOutput": "always",
    "suppressTaskName": true,
    "tasks": [
        {
            "taskName": "build",
            "args": ["run", "build"],
            "isBuildCommand": true
        }
    ]
}

公式VSコードドキュメント

ソースマップ

VS CodeのNode.jsデバッガーは、翻訳された言語のデバッグに役立つJavaScriptソースマップをサポートしています。 TypeScriptまたはminified/uglified JavaScript。ソースマップを使用すると、元のソースにシングルステップを実行したり、ブレークポイントを設定したりできます。元のソースのソースマップが存在しない場合、またはソースマップが破損しており、ソースと生成されたJavaScriptの間で正常にマッピングできない場合、ブレークポイントは未検証（灰色の丸）として表示されます。

ソースマップは、2種類のインライン化で生成できます。

  • インライン化されたソースマップ：生成されたJavaScriptファイルには、（ファイルURIを介してソースマップを参照する代わりに）データURIとしてソースマップが最後に含まれます。
  • Inlined source：ソースマップには元のソースが含まれます（パスを介してソースを参照する代わりに）。

VS Codeは、インラインソースマップとインラインソースの両方をサポートしています。

ソースマップ機能は、VS Code 1.9.0以降、デフォルトでsourceMapsに設定されるtrue属性によって制御されます。これは、ノードデバッグが常にソースマップ（使用できる場合）を使用しようとすることを意味し、その結果、program属性でソースファイル（たとえばapp.ts）を指定することもできます。

何らかの理由でソースマップを無効にする必要がある場合は、sourceMaps属性をfalseに設定できます。

生成された（コンパイルされた）JavaScriptファイルがソースの隣ではなく別のディレクトリにある場合は、outFiles属性を設定して、VS Codeデバッガーがそれらを見つけるのを支援する必要があります。この属性は、生成されたJavaScriptファイルのセットにファイルを含めたり除外したりするために、複数のグロブパターンを取ります。元のソースにブレークポイントを設定するたびに、VS CodeはoutFilesで指定されたファイルで生成されたJavaScriptコードを見つけようとします。

ソースマップは自動的に作成されないため、作成に使用するトランスパイラーを構成する必要があります。 TypeScriptの場合、これは次の方法で実行できます。

tsc --sourceMap --outDir bin app.ts

これは、TypeScriptプログラムに対応する起動構成です。

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch TypeScript",
            "type": "node",
            "request": "launch",
            "program": "app.ts",
            "outFiles": [ "bin/**/*.js" ]
        }
    ]
}

ソース

10
jordanbtucker

この設定をlaunch.jsonに追加し、

{
"version": "0.2.0",
"configurations": [
    {   
        "cwd":"<path-to-application>",
        "type": "node",
        "request": "launch",
        "name": "babel-node debug",
        "runtimeExecutable": "<path-to-app>/node_modules/.bin/babel-node",
        "program": "<path-to-app-entry-file>/server.js",
        "runtimeArgs": ["--nolazy"]
    }
]
}

プロジェクトのルートで定義されたプリセットの.babelrcファイルを持つことを忘れないでください。また、launch.jsonのcwd属性が正しい必要があります。そうでない場合、babelコンパイラは.babelrcを見つけることができず、コンパイルエラーが発生します。

    {
        "presets": ["@babel/preset-env"]
    }

この設定で実行すると、デフォルトポート（通常5000）でアプリケーションが自動的に起動し、生成されたデバッグポートに接続されます。いくつかの超古いvscodeを使用しない限り、ソースマップは追加設定なしで機能します

1
Zigzauer

これが私にとってうまくいったことです（vscode v1.33で他のソリューションはどれもうまくいきませんでした）：

./ project.json

"scripts": {
  "build": "babel src -d dist --source-maps",
},

。vscode/task.json

{
  "version": "2.0.0",
  "tasks": [{
    "label": "build-babel",
    "type": "npm",
    "script": "build",
    "group": "build"
  }]
}

。vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [{
    "type": "node",
    "request": "launch",
    "preLaunchTask": "build-babel",
    "name": "Debug",
    "program": "${workspaceRoot}/src/server.js",
    "outFiles": ["${workspaceRoot}/dist/**/*.js"]
  }]
}
1
Kevin

私の場合（VSCode 1.36.0）に欠けていたのは、ソースマップパスのオーバーライドでした：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Debug",
            "program": "${workspaceRoot}/src/cli/index.js",
            "sourceMaps": true,
            "sourceMapPathOverrides": {
                "*": "${workspaceRoot}/src/*"
            },
            "outFiles": [
                "${workspaceRoot}/lib/**/*.js"
            ]
        }
    ]
}

コンパイルはgulpパイプラインを介して呼び出され、ソースマップはcli/index.jsではなくsrc/cli/index.jsを参照していました。 sourceMapPathOverrides を使用した再マッピングで修正されました。

0
qbik