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配對。