Debugging von Visual Studio Code chrome, Breakpoints werden nicht gefunden

Question

Ich habe eine Angular2/Typescript App, die ich in VSCode entwickle. Ich benutze Gulp, um die Typoskript-Dateien und gulp-sourcemap zu erstellen, um Map-Dateien zu erstellen. Das Anfügen/Starten von Chrome funktioniert gut, nachdem ich mit der Chrome-Debug-Erweiterung für VSCode herumgebastelt habe, aber ich kann die Haltepunkte nicht erreichen. Ich betreibe die Website mit "dnx web", aber das sollte nicht wichtig sein.

Meine Ordnerstruktur wie folgt lautet:

project/wwwroot/index.html 
project/wwwroot/app/myfile.js 
project/wwwroot/app/myfile.js.map 
project/scripts/myfile.ts 

Mein launch.json sieht wie folgt aus:

{ 
    "version": "0.2.0", 
    "configurations": [ 
    { 
     "name": "Launch", 
     "type": "chrome", 
     "request": "launch", 
     "url": "http://localhost:8001/portfolios", 
     "runtimeArgs": [ 
      "--new-window", //Open in new window 
      "--user-data-dir=C:/temp/", 
      "--remote-debugging-port=9222" 
     ], 
     "webRoot": "${workspaceRoot}/wwwroot", 
     "sourceMaps": true 
    } 
    ] 
} 

und meine schluck Build-Task sieht wie folgt aus:

gulp.task('ts', function (done) { 
    var files = gulp.src(tsToMove) 
    .pipe(sourcemaps.init()) 
    .pipe(ts(tsConfig), undefined, ts.reporter.fullReporter()); 
    return files.js.pipe(sourcemaps.write(".",{sourceRoot: '../scripts'})) 
    .pipe(gulp.dest('scripts')); 
}) 

ich überprüft haben, Diese Dateien werden im selben Ordner wie die js-Dateien generiert und gespeichert. beim Bauen.

Danke für Hinweise.

Answer 1

Das Festlegen des Arbeitsbereichs auf den Speicherort meiner Typoskript-Dateien und nicht auf meine Build-Dateien, funktionierte für mich.

Ungeprüft Breakpoint- (meine kompilierte Datei Standort)

"webRoot": "${workspaceRoot}/build/client" 

Arbeits Breakpoint- (meine ts Speicherort der Datei)

"webRoot": "${workspaceRoot}/client" 

Ich glaube, ich sollte erwähnen, dass ich für Chrome Erweiterung des Debugger bin mit

Answer 2

Wenn Sie den Debugger für Chrome-Erweiterung verwenden, würde ich überprüfen, dass Sie Chrom wi laufen Remote-Debugging? Ich konnte meine arbeiten, nachdem ich Chrome mit Remote-Debugging gestartet habe. von https://code.visualstudio.com/blogs/2016/02/23/introducing-chrome-debugger-for-vs-code

Vorerst muss Chrome mit Remote-Debugging aktiviert werden gestartet und unterstützt nur eine gleichzeitige Verbindung. Das bedeutet, wenn Sie DevTools in Chrome öffnen, wird die Verbindung zu VS-Code von Chrome beendet. Das ist etwas nervig, und wir hoffen, dass dieses Problem bald behoben wird.

Dazu habe ich eine Batch-Datei, die Chrom mit diesem Befehl öffnet.

start /d "C:\Program Files (x86)\Google\Chrome\Application" chrome.exe --remote-debugging-port=9222 

Answer 3

So stundenlang mit dieser Unordnung und habe es endlich ich habe gearbeitet:

Sie müssen sicherstellen, dass webRoot richtig eingestellt ist, und wird richtig: RVCA18 Recht auf seine Antwort war abhängig davon, wo du dnx aus führst. Wenn Sie aus Ihrem 'Projekt' Ordner, dann das ist Ihre eigentliche WebRoot.

Sie können auch Ihre Quellkartendatei verwenden.Wenn Sie die Datei öffnen, hat es eine Struktur etwas wie folgt aus: {"version":3,"sources":[],"names":[],"sourcesContent":[]}

Finden Sie die sources Stütze, die ein Array aller Quelldateien ist. Zum Beispiel, wenn ich nach einem meiner Klassennamen suche, finde ich die Quelle so etwas wie: "webpack:///./app/components/TargetCard.js". Ich verwende webpack und haben eine Richt Struktur wie unten (vereinfacht):

main 
    app 
    dist 

was bedeutet, dass meine webRoot soweit VSCode betrifft zum dir eine Ebene über ‚App‘ oder ‚Haupt‘ gleichsetzen sollte. Dies ist auch der Ort, von dem aus ich das Webpack starte, also macht es Sinn. Wenn ich den Ordner 'main' in VSCode öffne, dann ist meine ${workspaceRoot} auch 'main'. Um also den Debugger meine Dateien finden zu lassen, sollte ich webRoot einfach auf ${workspaceRoot} setzen.