Question

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

如果我自己运行chrome，并刷新页面，则源映射加载正常，内置的chrome调试器可以正常浏览我的.ts文件。

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

但是，当不使用browserify时，源映射似乎加载正常并且断点有效。

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

无论如何，附件是我的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.

Answer 1

您能分享一下您的发布设置吗？因为如果您的断点未经过验证，您可能无法正确链接源图。

需要考虑的一件事：

来自VS Code Chrome debugging docs：

此扩展程序会忽略源地图中内联的来源 - 您可能有一个适用于Chrome开发者工具的设置，但不适用此扩展程序，因为路径不正确，但Chrome开发工具正在阅读内联的源内容。

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

VSCode browserify源图调试似乎不起作用

1 个答案: