res*_*red 40 visual-studio-code babel-node
我正在使用:
我无法使用以下启动文件在断点处停止.调试器运行并附加到端口,但是当我使用断点运行应用程序时,它不会在断点处停止并直接运行.任何有这个工作的人,请指教.
{
"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
}
]
}
Izh*_*aki 67
请注意以下选项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"
},
}
Eri*_*lli 27
我能够按照以下步骤使其正常工作:
确保您具有生成源映射的构建脚本.
"scripts": {
"build": "babel src -d dist --source-maps"
}
确保您具有允许使用脚本构建VS Code的任务.npm
{
"version": "0.1.0",
"command": "npm",
"isShellCommand": true,
"showOutput": "always",
"suppressTaskName": true,
"tasks": [
{
"taskName": "build",
"args": [ "run", "build" ],
"isBuildCommand": true
}
]
}
配置要在启动前使用a 构建的脚本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进程启动之前运行,但所有源映射都会同步.有了它,我能够使用断点和所有其他调试器的东西.
jor*_*ker 10
从版本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都会尝试在指定的文件中查找生成的JavaScript代码outFiles.
由于不会自动创建源映射,因此必须配置用于创建源映射的转换器.对于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" ]
}
]
}
这是对我有用的（使用 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"]
}]
}
| 归档时间： |
|
| 查看次数： |
20517 次 |
| 最近记录： |