1

typescript/browserify を使用して VSCode でクロムにブレークポイントを設定する際に問題が発生しています。

Chrome を単独で実行し、ページを更新すると、ソース マップが正しく読み込まれ、組み込みの Chrome デバッガーが .ts ファイルを正常に処理できます。

ただし、VSCode クロム デバッガー拡張機能を使用して chrome を起動しようとすると、ブレークポイントを設定できず、ソース マップ ファイルが読み込まれません。

ただし、browserify を使用していない場合、ソース マップは正常に読み込まれ、ブレークポイントが機能するようです。

Chrome をスタンドアロンで実行しているときに、ソース マップされたファイルを表示するために更新する必要がある理由がわかりません。

とにかく、添付されているのは私の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.
4

1 に答える 1

1

起動セットアップを共有していただけますか? ブレークポイントが検証されていない場合、ソースマップを適切にリンクしていない可能性があります。

考慮すべき1つのこと：

VS Code Chrome デバッグ ドキュメントから:

この拡張機能は、ソースマップでインライン化されているソースを無視します。パスが正しくないため、Chrome 開発ツールで機能するセットアップがあっても、この拡張機能が機能しない可能性がありますが、Chrome 開発ツールはインライン化されたソース コンテンツを読み取っています。

私が知る限り、browserify は、ディスク上のファイルへのパスを提供するのではなく、ソースマップにインライン化されたソースを出力します。これは、ブラウザー自体でデバッグするときに、ソース ファイルの複雑さと非同期読み込みを軽減するためです。しかし、それは VSCode とペアになりません。

于 2016-12-15T11:57:50.403 に答える