1

我有一个问题,获取VSCode与chrome设置断点与打字稿/ browserify。VSCode browserify源地图调试似乎没有工作

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

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

但是,当不使用browserify时,源地图似乎加载正常并且断点工作。

我只是不知道为什么当独立运行chrome时,需要刷新源映射文件才能显示出来。

无论如何,附上我一饮而尽文件:

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. 

回答

0

能否请您分享您的启动设置?因为如果你的断点没有被验证,你可能没有正确链接源代码。

有一点要考虑:

VS Code Chrome debugging docs

这个扩展将忽略在sourcemap内联来源 - 你可以有一个在Chrome的开发者工具工作的设置,但不是这个扩展名,因为路径不正确,但Chrome开发工具正在阅读内联源代码内容。

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