Debugging Angular2-apps in Visual Studio Code

Ich versuche zu entwickeln, die eine grundlegende angular2-app mit VSC. Der code ist geschrieben in Typoskript. Es ist eine grundlegende todo-app, und alle code - (.ts, js, .js.Karte) ist in der app/- Unterverzeichnis.

Dies ist mein Start.json-die Konfiguration für die Ausführung:

 {
            "name": "Run",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}/node_modules/lite-server/bin/lite-server",
            "stopOnEntry": false,
            "args": [],
            "cwd": "${workspaceRoot}",
            "preLaunchTask": null,
            "runtimeExecutable": null,
            "runtimeArgs": [
                "--nolazy"
            ],
            "env": {
                "NODE_ENV": "development"
            },
            "externalConsole": false,
            "sourceMaps": false,
            "outDir": null
        },

Wenn ich es laufen, die app lädt im chrome aber keiner meiner breakpoints arbeiten. Wenn ich das schweben eines breakpoint, sehe ich den "Breakpoint ignoriert, da die generierten Codes nicht gefunden (Quelle map-problem?)."

Habe ich einen Haltepunkt in /app/todo.Komponente.ts. In meinem /app/todo.Komponente.js.Karte kann ich sehen:

"file":"todo.component.js","sourceRoot":"/Users/xxx/Documents/webs/angular2-todo/app/","sources":["todo.component.ts"],"names":[],"mappings":";;;;;;;;;;

Source root und Quellen scheinen ok zu mir.

Irgendwelche Ideen?

  • Wenn Sie wollen Debuggen mit chrome-Erweiterung, dann finden Sie diese - stackoverflow.com/questions/36494938/...
  • Ist es chrome-Erweiterung zwingend?
  • ja... wenn Sie wollen, um es mit chrome
  • Kein Glück ohne chrome-Erweiterung?
  • Ich gab auf. Ich bin mit der Erweiterung
  • Folgen Sie meine Schritte? oder hast du eine andere Lösung mit extension?
  • Was ist dieses "Programm": "${workspaceRoot}/node_modules/lite-server/bin/lite-server"? Sollten Sie nicht finden Sie Ihre Haupt-app.js? So etwas wie dieses: "Programm": "${workspaceRoot}/app/app.js"
  • Möglich, Duplikat der Debug & Run Angular2 Typoskript mit Visual Studio-Code?

InformationsquelleAutor Chux | 2016-06-11
  1. 16

    Haben Sie zu tun:

    1. Installieren Sie den "Debugger für Chrome"-Erweiterung
    2. Löschen der Start.json und eine neue erstellen (wählen Sie "Chrome" anstelle von "Node.js").
    3. Ändern Sie den port 3000 (wenn Sie die lite-server, wie in der tour-der-Helden-tutorial), und fügen Sie ein "userDataDir":

    Beispiel:

    {
    "name": "Launch Chrome against localhost, with sourcemaps",
    "type": "chrome",
    "request": "launch",
    "url": "http://localhost:3000",
    "sourceMaps": true,
    "webRoot": "${workspaceRoot}",
    "userDataDir": "${workspaceRoot}/out/chrome"
}

    1. Starten Sie den server mit "npm start" (terminal-Fenster oder Konsole).

    2. Start Debugging (F5 oder wählen Sie "Starten Sie Chrome gegen localhost..." im dropdown).

    • Dadurch werden die Haltepunkte in den ts-Dateien. Ich fand heraus, dass die userDataDir ist wichtig!
    • dies funktioniert für die "tour-der-Helden-tutorial" - Projekt von github.com/angular/quickstart, aber es nicht für ein Projekt erzeugt mit "ng neue Projektname", das nicht *.js & *.js.map-Dateien in das src/app/ - Verzeichnis. Gibt es einen Weg, um zu arbeiten-debugging mit einem Projekt-Struktur, die nicht über generierte Dateien unter src/ ?
    • Darüber hinaus können Sie die preLaunchTask option zum aufrufen einer Aufgabe code.visualstudio.com/docs/editor/tasks und haben die Aufgabe ausführen "npm start", um alles zu bekommen, arbeiten nur mit der f5-Taste
    InformationsquelleAutor Michael Csitkovics
Schreibe einen Kommentar