无法在 VS Code 中设置断点调试 Node Typescript
Can't set Breakpoints debugging Node Typescript in VS Code
我看到其他问题也有同样的问题,但我已经尝试了所有其他解决方案,但没有任何效果。
我有一个 typescript Node 应用程序,我正在尝试在 VSCode 中进行调试。
我的launch.json是
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "attach",
"name": "Attach",
"port": 5858,
"sourceMaps": true,
"outFiles": ["${workspaceRoot}/build/**/*.js"]
}
]
这非常适合我的应用程序。我可以暂停和恢复,一切正常,但我无法进入代码或设置断点。
我正在 运行通过 gulp nodemon
安装我的应用程序
nodemon({
script: 'build/server.js',
watch: 'src',
ext: 'ts',
tasks: ['clean', 'compile'],
exec: 'node --debug'
});
控制台输出
Debugger listening on [::]:5858
现在,当我尝试设置断点时,它显示
Unverified breakpoint, Breakpoint ignored because generated code not found (source map problem?).
更新;
我也尝试过使用周围其他帖子建议的 webRoot
项目,键入验证抱怨 Property webRoot is not allowed.
,我尝试继续无济于事。
我运行正在使用 Node v6.11.5 和 VS Code v1.23.0
我在一篇帖子中看到人们调用 运行 .scripts 标记以获取更多信息帮助解决但是当我在调试控制台中输入 .scripts
时它说 invalid expression: unexpected token .
我的tsconfig.json是
"compilerOptions": {
"outDir": "build",
"target": "es6",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"typeRoots": ["node_modules/@types"]
},
但是;我的构建文件夹中没有 .js.map
个文件。我正在 运行ning 通过 gulp-typescript 构建如下
gulp.task('compile', () => {
tsProject = ts.createProject('tsconfig.json');
let tsResult = tsProject.src().pipe(ts());
return merge([
tsResult.dts.pipe(gulp.dest('build/definitions')),
tsResult.js.pipe(gulp.dest('build'))
]);
});
根据建议,我还添加了以下 gulp 任务
gulp.task('jsMaps', function() {
gulp.src('build/**/*.js')
.pipe(sourcemaps.init())
.pipe(sourcemaps.write())
.pipe(gulp.dest('build'));
});
并确认我的构建 .js 文件具有内联写入的源映射,看起来像 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIiwic291cmNlc...........
,但我在尝试设置断点时仍然遇到相同的错误。
为了调试打字稿,您需要生成源映射文件。确保以下内容在您的 tsconfig.json
中,您应该会在构建目录中看到 .js.map
个文件。
{
"compilerOptions": {
"sourceMap": true
}
}
使用 gulp-typescript:
gulp-typescript
建议使用 gulp-sourcemaps 来生成源映射。
这是我开始工作的 gulp 任务,创建 .js.map
在断点处中断的文件。找到 in this gulp-typescript issue
var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');
var path = require('path');
var ts = require('gulp-typescript');
gulp.task('compile', () => {
tsProject = ts.createProject('tsconfig.json');
let tsResult = tsProject.src()
.pipe(sourcemaps.init())
.pipe(tsProject());
tsResult.js
.pipe(sourcemaps.write({
sourceRoot: function (file) {
var sourceFile = path.join(file.cwd, file.sourceMap.file);
return path.relative(path.dirname(sourceFile), file.cwd);
}
}))
.pipe(gulp.dest('build'));
});
自从更新 VS Code 后,我无法再调试应用程序。
通过下载 1.23,我能够再次调试。
请查看此处发布的答案:
也在这里:
Visual Studio Code - Node debugger breakpoints not being hit
我看到其他问题也有同样的问题,但我已经尝试了所有其他解决方案,但没有任何效果。
我有一个 typescript Node 应用程序,我正在尝试在 VSCode 中进行调试。
我的launch.json是
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "attach",
"name": "Attach",
"port": 5858,
"sourceMaps": true,
"outFiles": ["${workspaceRoot}/build/**/*.js"]
}
]
这非常适合我的应用程序。我可以暂停和恢复,一切正常,但我无法进入代码或设置断点。
我正在 运行通过 gulp nodemon
安装我的应用程序nodemon({
script: 'build/server.js',
watch: 'src',
ext: 'ts',
tasks: ['clean', 'compile'],
exec: 'node --debug'
});
控制台输出
Debugger listening on [::]:5858
现在,当我尝试设置断点时,它显示
Unverified breakpoint, Breakpoint ignored because generated code not found (source map problem?).
更新;
我也尝试过使用周围其他帖子建议的 webRoot
项目,键入验证抱怨 Property webRoot is not allowed.
,我尝试继续无济于事。
我运行正在使用 Node v6.11.5 和 VS Code v1.23.0
我在一篇帖子中看到人们调用 运行 .scripts 标记以获取更多信息帮助解决但是当我在调试控制台中输入 .scripts
时它说 invalid expression: unexpected token .
我的tsconfig.json是
"compilerOptions": {
"outDir": "build",
"target": "es6",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"typeRoots": ["node_modules/@types"]
},
但是;我的构建文件夹中没有 .js.map
个文件。我正在 运行ning 通过 gulp-typescript 构建如下
gulp.task('compile', () => {
tsProject = ts.createProject('tsconfig.json');
let tsResult = tsProject.src().pipe(ts());
return merge([
tsResult.dts.pipe(gulp.dest('build/definitions')),
tsResult.js.pipe(gulp.dest('build'))
]);
});
根据建议,我还添加了以下 gulp 任务
gulp.task('jsMaps', function() {
gulp.src('build/**/*.js')
.pipe(sourcemaps.init())
.pipe(sourcemaps.write())
.pipe(gulp.dest('build'));
});
并确认我的构建 .js 文件具有内联写入的源映射,看起来像 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIiwic291cmNlc...........
,但我在尝试设置断点时仍然遇到相同的错误。
为了调试打字稿,您需要生成源映射文件。确保以下内容在您的 tsconfig.json
中,您应该会在构建目录中看到 .js.map
个文件。
{
"compilerOptions": {
"sourceMap": true
}
}
使用 gulp-typescript:
gulp-typescript
建议使用 gulp-sourcemaps 来生成源映射。
这是我开始工作的 gulp 任务,创建 .js.map
在断点处中断的文件。找到 in this gulp-typescript issue
var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');
var path = require('path');
var ts = require('gulp-typescript');
gulp.task('compile', () => {
tsProject = ts.createProject('tsconfig.json');
let tsResult = tsProject.src()
.pipe(sourcemaps.init())
.pipe(tsProject());
tsResult.js
.pipe(sourcemaps.write({
sourceRoot: function (file) {
var sourceFile = path.join(file.cwd, file.sourceMap.file);
return path.relative(path.dirname(sourceFile), file.cwd);
}
}))
.pipe(gulp.dest('build'));
});
自从更新 VS Code 后,我无法再调试应用程序。
通过下载 1.23,我能够再次调试。
请查看此处发布的答案:
也在这里:
Visual Studio Code - Node debugger breakpoints not being hit