I'm currently experiencing an issue with setting breakpoints in Chrome using VSCode, especially when working with TypeScript and Browserify.
Oddly enough, if I open Chrome separately and manually refresh the page, the source maps load correctly and I can debug my .ts files without any problems using the built-in Chrome debugger.
However, when I attempt to launch Chrome through the VSCode chrome debugger extension, breakpoints cannot be set and the source map files won't load.
Interestingly, when I don't use Browserify, the source maps load just fine and the breakpoints work as expected.
The confusing part for me is why Chrome needs to be refreshed for the source mapped files to appear when running it independently.
Here's a snippet of 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('.'));
});
Below are the results from 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.