VSCode browserify source map debugging does not seem to work

Question

I'm having an issue getting VSCode to set breakpoints in chrome with typescript/browserify.

If I run chrome by itself, AND refresh the page, the source maps load fine, and the built-in chrome debugger can step through my .ts files just fine.

However, when I try to launch chrome using the VSCode chrome debugger extension, it can't set breakpoints, and won't load the source map files.

However, when NOT using browserify, the source maps seems to load fine and the breakpoints work.

I'm just not sure why when running chrome stand-alone, it needs to be refreshed for the source mapped files to show up.

Anyway, attached is my gulp file:

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('.'));
});

And, the results of the VSCode debugger console:

›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.

score 1 · Answer 1 · answered Dec 15 '16 at 11:57

Could you please share your launch setup? Because if your breakpoint are not validated, you're probably not linking the sourcemaps properly.

One thing to consider:

From VS Code Chrome debugging docs:

This extension ignores sources that are inlined in the sourcemap - you may have a setup that works in Chrome Dev Tools, but not this extension, because the paths are incorrect, but Chrome Dev Tools are reading the inlined source content.

For all I can tell, browserify outputs the sources inlined in the sourcemaps, rather than provide the path to the file on disk. This is to save some complexity and async loading of source files when debugging in the browser itself. But that doesn't pair with VSCode.

VSCode browserify source map debugging does not seem to work

1 Answers1