クロムにtypescript/browserifyでブレークポイントを設定する際に問題があります。VSCodeはソースマップをデバッグしても動作しないようです
クロムを単独で実行し、ページをリフレッシュすると、ソースマップが正常にロードされ、内蔵のクロムデバッガが私の.tsファイルをうまく処理できます。
しかし、VSCodeクロムデバッガ拡張を使用してクロームを起動しようとすると、ブレークポイントを設定できず、ソースマップファイルがロードされません。
ただし、browserifyを使用しないと、ソースマップが正常にロードされ、ブレークポイントが機能するように見えます。
クロムをスタンドアロンで実行しているときに、ソースマップファイルが表示されるようにリフレッシュする必要があるのはなぜか分かりません。とにかく
、私ゴクゴクファイルで添付:
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.