1

クロムに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. 

答えて

0

はあなたの打ち上げの設定を共有していただけますか?あなたのブレークポイントが検証されていない場合、あなたはおそらくソースマップを適切にリンクしていないでしょう。考慮すべき

一つのこと:VS Code Chrome debugging docsから

この拡張はsourcemapにインライン化されているソースを無視する - あなたはクローム開発ツールで動作するセットアップを持ってではなく、このこと拡張子は、パスが正しくないが、Chrome Dev Toolsがインラインソースコンテンツを読み込んでいるためです。

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

関連する問題