VSCode browserify源圖調試似乎不起作用

Question

我遇到一個問題，讓VSCode在chrome中使用typescript / browserify設置斷點。

如果我自己運行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調試文檔 ：

此擴展程序會忽略源地圖中內聯的來源 - 您可能有一個適用於Chrome開發者工具的設置，但不適用此擴展程序，因為路徑不正確，但Chrome開發者工具正在閱讀內聯的源內容。

據我所知，browserify輸出源映射中內聯的源，而不是提供磁盤上文件的路徑。 這是為了在瀏覽器本身進行調試時節省一些復雜性和源文件的異步加載。 但這並不與VSCode配對。