Visual Studio-Code-debugging chrome, Haltepunkte wird nicht getroffen

Ich habe eine Angular2/Typoskript app ich bin in der Entwicklung in VSCode. Ich benutze Schluck zu bauen, die typescript-Dateien und gulp-sourcemap zum erstellen von map-Dateien. Anbringen/starten von chrome gut funktioniert nach etwas Herumprobieren mit der chrome-debug-Erweiterung für VSCode, aber ich Schaffe es nicht, die Haltepunkte zu schlagen. Ich die Webseite mit "dnx-web", aber ich glaube nicht, dass zählen sollte.

Meine Ordner-Struktur ist wie folgt:

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

Meine 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 mein gulp-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'));
})

Habe ich verifiziert, dass die Karten-Dateien generiert und gespeichert in den gleichen Ordner wie die js-Dateien. beim Bau.

Vielen Dank für alle Hinweise.

Möglich, Duplikat der Wie man die Volle JavaScript/TypeScript-Debugging in Chrome mit Visual Studio (Wie bei IE)
Visual studio Code ist nicht Visual studio.
Versuchen sourceRoot: '../../scripts'.
Nur ein follow-up: ich landete mit dem debugger im Chrome statt. Funktioniert alles richtig. Kein problem mit dem .map-Dateien gibt. Ich kann sehen, das Typoskript Quell-und debug durch.

InformationsquelleAutor Snorre | 2016-04-22

10

Einstellung der Arbeitsbereich-Speicherort an den Speicherort meiner typescript-Dateien, und nicht meine build-Dateien, für mich gearbeitet.

Ungeprüfte Haltepunkt (meine kompilierte Datei Speicherort)
```
"webRoot": "${workspaceRoot}/build/client"
```
Arbeiten Haltepunkt (meine ts-Datei, Speicherort)
```
"webRoot": "${workspaceRoot}/client"
```
Ich das Gefühl, ich sollte erwähnen, dass ich die - Debugger für Chrome Erweiterung
- Danke 🙂 ich bin mit einem Arbeitsbereich mit mehreren app und library-Projekten und konnte nicht die meisten meiner Haltepunkte zu schlagen, Sie wurden als unbestätigt von breakpoints. Ich hatte nicht bemerkt das "webRoot" - Einstellung in der launch.json. Musste nur einstellen, dass der Ordner des start-up-app, die ich auf Mission war zu jeder Zeit gegeben, jetzt Debuggen funktioniert perfekt auch in die Bibliothek Projekte " Haltepunkte.
- Wenn Sie verwirrt sind, was Pfad hinzufügen, benutzen Sie einfach Process Monitor von Sysinternals und filter auf Ihre source-Dateien (zB .ts) und den Fehler nicht gefunden. Dies zeige dir den Weg VSCode versucht zu lösen Ihre source-Dateien aus.
InformationsquelleAutor RVCA18
2

So, ich habe messing, mit dieser für Stunden und schließlich habe es funktioniert: RVCA18 hatte Recht mit seiner Antwort:

, Die Sie benötigen, um sicherzustellen, dass webRoot richtig eingestellt ist, und richtig wird hängt davon ab, wo Sie ausgeführt werden dnx aus. Wenn von Ihrem "Projekt" - Ordner, dann das ist Ihre eigentliche webRoot.

Können Sie auch mit Ihrem sourcemap-Datei. Wenn Sie die Datei öffnen, es hat eine Struktur, die so etwas wie dieses:
{"version":3,"sources":[],"names":[],"sourcesContent":[]}

Finden Sie die sources prop ist ein array, dass alle Ihre source-Dateien. Zum Beispiel, wenn ich Suche für einen meiner Klasse Namen, ich finde die Quelle, um so etwas wie: "webpack:///./app/components/TargetCard.js". Ich bin mit webpack und haben die dir-Struktur ist wie folgt (vereinfacht):
```
main
  app
  dist
```
das bedeutet, dass meine webRoot soweit VSCode betroffen ist, sollte gleich die dir ein level höher 'app', oder 'main'. Dies ist auch, wo ich laufen webpack aus, so macht es Sinn. Wenn ich öffnen Sie die "main" - Ordner in VSCode, dann meine ${workspaceRoot} werden auch die 'Haupt -', so habe der debugger finden meine Dateien, die ich einstellen sollte webRoot einfach ${workspaceRoot}.

InformationsquelleAutor DrewJordan
0

Wenn Sie den debugger für chrome-Erweiterung würde ich schauen, dass Sie laufen chrome mit remote-debugging?
Ich war in der Lage mir funktioniert, nachdem ich fing an zu laufen chrome mit remote-debugging.
von https://code.visualstudio.com/blogs/2016/02/23/introducing-chrome-debugger-for-vs-code

Für jetzt, Chrome gestartet werden muss mit der remote-debugging aktiviert, und unterstützt nur eine gleichzeitige Verbindung. Dies bedeutet, wenn Sie öffnen DevTools innen Chrom, die Verbindung zu VS-Code abgebrochen von Chrome. Dies ist etwas ärgerlich, und wir hoffen, dass dieses Problem behoben wird, irgendwann bald.

Dazu habe ich eine batch-Datei, öffnet sich chrome mit diesem Befehl.
```
start /d  "C:\Program Files (x86)\Google\Chrome\Application"  chrome.exe --remote-debugging-port=9222
```
- dies ist nur erforderlich für request:'attach', wenn Sie request:'launch' eine neue Instanz starten Sie mit remote-debugging bereits aktiviert.
InformationsquelleAutor Jay Culpepper
0

Ich bin völlig einverstanden mit RVCA18. Es geht um die webRoot Einstellung, die falsch war.
Ich hatte VS-Code ${workspaceRoot} verweist auf einen Unterordner (nur weil ich das Projekt geöffnet und hatte kein Skript in den Ordner der obersten Ebene). Da die index.html gestartet wird ist im Ordner der obersten Ebene, die ich hatte, um die folgende Option in starten.json
```
"webRoot": "${workspaceRoot}/.."
```
InformationsquelleAutor nhaggen

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.