我正在使用：
我无法使用以下启动文件在断点处停止。 调试器运行并附加到端口，但是当我使用断点运行应用程序时，它不会在断点处停止并直接运行。 任何有这个工作的人，请指教。
{
"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
}
]
}
答案 0 :(得分：52)
请注意sourceMaps中的retainLines和.babelrc选项：
{
"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"
},
}
答案 1 :(得分：22)
我能够按照以下步骤使其正常工作：
确保您拥有包含 sourcemaps 代的构建脚本。
"scripts": {
"build": "babel src -d dist --source-maps"
}
确保您拥有任务，可以使用npm脚本构建 VS Code 。
{
"version": "0.1.0",
"command": "npm",
"isShellCommand": true,
"showOutput": "always",
"suppressTaskName": true,
"tasks": [
{
"taskName": "build",
"args": [ "run", "build" ],
"isBuildCommand": true
}
]
}
使用preLaunchTask将脚本配置为在构建之前构建，从源入口点开始program，但outDir指向< em> 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进程启动之前运行，但所有源映射都会同步。有了它，我可以使用断点和所有其他调试器。
答案 2 :(得分：8)
从版本1.9开始，默认情况下，VS Code会自动尝试使用源映射，但如果转换后的文件与源文件不在同一文件夹中，则必须指定outFiles。
例如，以下是相关文件。在这种情况下，babel正从src文件夹转发到lib文件夹。
注意：只有在调试前希望VS Code转换文件时才需要package.json和.vscode/tasks.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"
]
}
]
}
注意：如果您还在preLaunchTask和build设置了package.json任务，则只需指定.vscode/tasks.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预设。
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 Code的Node.js调试器支持JavaScript源映射，它有助于调试转换后的语言，例如： TypeScript或minified / uglified JavaScript。使用源映射，可以单步执行或在原始源中设置断点。如果原始源不存在源映射，或者源映射已损坏且无法在源和生成的JavaScript之间成功映射，则断点将显示为未验证（灰色空心圆）。
可以使用两种内联生成源映射：
VS Code支持内联源映射和内联源。
源地图功能由sourceMaps属性控制，默认为true，以VS Code 1.9.0开头。这意味着节点调试总是尝试使用源映射（如果它可以找到任何映射），因此您甚至可以使用program属性指定源文件（例如app.ts）。
如果由于某种原因需要停用源地图，可以将sourceMaps属性设置为false。
如果生成的（已转换的）JavaScript文件不在其源旁边但位于单独的目录中，则必须通过设置outFiles属性来帮助VS Code调试器找到它们。此属性采用多个glob模式来包含和排除生成的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" ]
}
]
}
答案 3 :(得分：0)
这是对我有用的东西（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"]
}]
}
答案 4 :(得分：0)
在我的情况下（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重新映射可以解决此问题。
答案 5 :(得分：0)
将此配置添加到您的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，否则源映射将无需任何其他配置即可工作