1

我在让 VSCode 使用 typescript/browserify 在 chrome 中设置断点时遇到问题。

如果我自己运行 chrome 并刷新页面，源映射加载正常，并且内置的 chrome 调试器可以很好地遍历我的 .ts 文件。

但是，当我尝试使用 VSCode chrome 调试器扩展启动 chrome 时，它​​无法设置断点，也不会加载源映射文件。

但是，当不使用 browserify 时，源映射似乎可以正常加载并且断点可以正常工作。

我只是不确定为什么在独立运行 chrome 时，需要刷新它才能显示源映射文件。

无论如何，附上我的 gulp 文件：

var gulp = require('gulp');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var tsify = require('tsify');
var sourcemaps = require('gulp-sourcemaps');
var buffer = require('vinyl-buffer');
var paths = {
    pages: ['*.html']
};

gulp.task('copyHtml', function () {
    return gulp.src(paths.pages)
        .pipe(gulp.dest('.'));  
});

gulp.task('default', function () {
    return browserify({
        basedir: '.',
        debug: true,
        entries: ['main.ts'],
        cache: {},
        packageCache: {}
    })
    .plugin(tsify)
    .bundle()
    .pipe(source('bundle.js'))
    .pipe(buffer())
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('.'));
});

并且，VSCode 调试器控制台的结果：

›OS: darwin x64
›Node: v5.10.0
›vscode-chrome-debug-core: 0.1.6
›debugger-for-chrome: 0.4.4
›spawn('/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',  ["--remote-debugging-port=9222","--no-first-run","--no-default-browser-check","file:///Users/andy/src/cayman/web/index.html"])
›Attempting to attach on port 9222
›SourceMaps.setBP: /Users/andy/src/cayman/web/main.ts can't be resolved to a loaded script. It may just not be loaded yet.
›SourceMaps.setBP: /Users/andy/src/cayman/web/greet.ts can't be resolved to a loaded script. It may just not be loaded yet.
4

1 回答 1

1

你能分享你的启动设置吗？因为如果您的断点未经过验证，您可能没有正确链接源映射。

需要考虑的一件事：

来自VS Code Chrome 调试文档：

此扩展忽略源映射中内联的源 - 您可能有一个在 Chrome 开发工具中工作的设置，但不是此扩展，因为路径不正确，但 Chrome 开发工具正在读取内联的源内容。

据我所知，browserify 输出源映射中内联的源，而不是提供磁盘上文件的路径。这是为了在浏览器本身调试时节省一些复杂性和异步加载源文件。但这不与 VSCode 配对。

于 2016-12-15T11:57:50.403 回答