Angular2 Typescript mit Visual Studio Code debuggen und ausführen?

Antworten:

124

Nach vielen Recherchen fand ich diese Schritte -

Bevor Sie beginnen, stellen Sie sicher, dass Sie über die neueste Version des VS-Codes verfügen. Sie können die neueste Version überprüfen - Hilfe> Nach Updates suchen oder Info.

  1. Installieren Sie die Erweiterung "Debugger for Chrome". Starten Sie nach Abschluss der Installation den VS-Code neu.

  2. Gehen Sie zum Debug-Fenster und öffnen Sie launch.json mit Chrome.

  3. Verwenden Sie im Konfigurationsabschnitt Launch.json die folgende Konfiguration

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

  4. Stellen Sie in tsconfig.json sicher, dass Sie "sourceMap": true haben

Damit sind Ihre Einstellungen für die Debug-Umgebung abgeschlossen. Stellen Sie jetzt vor dem Debuggen sicher, dass alle vorhandenen Chrome.exe-Instanzen geschlossen sind. Überprüfen Sie dies im Task-Manager ODER verwenden Sie den DOS-Befehl 'killall chrome'.

  1. Führen Sie Ihr Projekt mit dem Befehl npm start und Chrome als Standardbrowser aus.

  2. Sobald die Anwendung erfolgreich ausgeführt wurde, erhalten Sie die Portnummer. Kopieren Sie die URL aus dem Chrome-Browser und fügen Sie sie in den obigen URL-Abschnitt ein. (HINWEIS: Wenn Sie Routing in Ihrer Anwendung verwenden, möchte die URL oben, andernfalls wird index.html usw. beendet.)

  3. Platzieren Sie nun Haltepunkte in Ihren Typoskriptdateien, wo immer Sie möchten.

  4. Gehen Sie erneut zum Debug-Fenster in VS-Code und klicken Sie auf Ausführen. Ihre mit dem Debugger verbundene Registerkarte / Instanz sieht wie folgt aus.

Chrome-Debugging

— Sanket
quelle
4
kann nicht verstehen .. 1. welche Erweiterung zu installieren. 2. Wo ist Launch.json?
— Azulay7
3
@ azulay7 Verwenden Sie VScode zum ersten Mal? Sein VScode ist nicht Visual Studio 2015 IDE. Auf der linken Seite sehen Sie die Debug- Option (oder verwenden Sie STRG + UMSCHALT + D), um das Debug-Fenster zu öffnen. Sobald Sie das Debug-Fenster geöffnet haben, sehen Sie oben rechts im Debug-Fenster die Option zum Öffnen von Launch.json . Für die Chrome-Erweiterung sehen Sie auf der linken Seite die Erweiterungsoption (oder verwenden Sie STRG + UMSCHALT + X). Suchen Sie nach dem Öffnen des Erweiterungsfensters nach Debugger für Chrome. Installieren Sie diese Erweiterung. Sie müssen VScode neu starten. Hoffe das hilft.
— Sanket
4
Ich hatte auch Probleme mit "open launch.json". Die Schritte sind wie folgt: Klicken Sie auf das Symbol "Debug" in der linken Seitenleiste, dann auf das Zahnrad in der oberen rechten Ecke des Debug-Fensters und wählen Sie "Chrome" aus der Dropdown-Liste, falls es angezeigt wird.
— Ivan Krivyakov
6
Failed to load resource: net::ERR_CONNECTION_REFUSED (http://localhost:3000/)
— Alle
3
Ich erhalte auch Verbindungsfehler am Debug-Port? HTTP GET failed: Error: connect ECONNREFUSED 127.0.0.1:9222Laden auf localhost gut.
— Mangopop
15

Geben Sie ein userDataDir an. Dadurch werden Kollisionen mit anderen Chrome-Instanzen vermieden, die möglicherweise bereits ausgeführt werden. Ich habe aus diesem Grund festgestellt, dass Chrome auf keinen von Ihnen angegebenen Port mehr hört. Unten ist was ich benutze und es ist großartig!

{
    "name": "Launch",
    "type": "chrome",
    "request": "launch",
    "url": "http://localhost:3000/#/about",
    "port": 9223,
    "sourceMaps": true,
    "diagnosticLogging": true,
    "webRoot": "${workspaceRoot}",
    "userDataDir": "${workspaceRoot}/out/chrome"
}

Dank an @reecebradley - GitHub: Verbindung zum Ziel kann nicht hergestellt werden: ECONNREFUSED verbinden

— HydTechie
quelle
Trotzdem kann es zu Problemen kommen. Ich habe meine Codebasis auf das Laufwerk C: (root) verschoben. Das Debugging hat einwandfrei funktioniert.
— HydTechie
Angular 2 Chrome Debugging funktioniert nicht hat seltsame Gründe. Manchmal checkt alles aus, was in der Quellcodeverwaltung ansteht. Nehmen Sie einen sauberen Ordner. Das neueste Debugging funktioniert. Grund, warum ich es nicht weiß. :(
— HydTechie
Ich verwende unten start json - könnte konsistent den Debug-Modus-Code \ 0 /: {"version": "0.2.0", "configuration": [{"name": "localhost with sourcemaps starten", "type" ausführen: "chrome", "request": "launch", "url": " localhost: 4200 ", "webRoot": "$ {workspaceRoot} / app / files", "sourceMaps": true}, {"name": " Launch "," type ":" chrome "," request ":" launch "," url ":" 127.0.0.1:4200 "," port ": 9222," sourceMaps ": true, //" diagnosticLogging ": true , "trace": "verbose", "webRoot": "$ {workspaceRoot}", "userDataDir":
— HydTechie
VERSUCHEN Sie die Startoption für das Live-Debugging anstelle von Quellkarten!
— HydTechie
5

Ich hatte ein ähnliches Problem, aber mein Projekt enthielt auch ein Webpack, das dazu führte, dass die oben genannten Lösungen fehlschlugen. Nachdem ich das Internet durchquert hatte, fand ich eine Lösung in einem Thread auf Github:

https://github.com/AngularClass/angular2-webpack-starter/issues/144#issuecomment-218721972

Jedenfalls wurde dies getan.

Hinweis: - Bevor Sie beginnen, müssen Sie überprüfen, ob Sie über die neueste Version von Visual Studio-Code verfügen und die Erweiterung " Debugger für Chrome " in VS Code installiert haben .

Erstens in './config/webpack.dev.js'

  • use => devtool: 'source-map'
  • anstelle von => devtool: 'cheap-module-source-map'

Dann installieren und verwenden Sie das Write-File-Webpack-Plugin:

  • npm install --save write-file-webpack-plugin

Fügen Sie das Plugin zu './config/webpack.dev.js' hinzu, indem Sie Folgendes hinzufügen:

  • const WriteFilePlugin = require ('Schreibdatei-Webpack-Plugin');

unter den Webpack Plugins oben. Weiter hinzufügen:

  • neues WriteFilePlugin ()

zur Liste der Plugins nach dem neuen neuen DefinePlugin (), dh

plugins:[
    new DefinePlugin({....}),
    new WriteFilePlugin(),
    ....
]

Dadurch wird sichergestellt, dass die Quellzuordnungen auf die Festplatte geschrieben werden

Schließlich ist meine launch.json unten angegeben.

{
    "version": "0.2.0",
    "configurations": [{
        "name": "Launch Chrome against localhost, with sourcemaps",
        "type": "chrome",
        "request": "launch",
        "url": "http://localhost:3000/",
        "runtimeArgs": [
           "--user-data-dir",
           "--remote-debugging-port=9222"
        ],
        "sourceMaps": true,
        "diagnosticLogging": true,
        "webRoot": "${workspaceRoot}",
        "userDataDir": "${workspaceRoot}/.vscode/chrome"
    },
    {
        "name": "Attach to Chrome, with sourcemaps",
        "type": "chrome",
        "request": "attach",
        "url": "http://localhost:3000/",
        "port": 9222,
        "sourceMaps": true,
        "diagnosticLogging": true,
        "webRoot": "${workspaceRoot}"
    }]
}

Beachten Sie das Fehlen von '/ dist /' in der Webroot. Mit dieser Konfiguration befinden sich Quell-Maps in ./dist/, zeigen jedoch auf ./src/. vscode stellt dem Arbeitsbereich das absolute Stammverzeichnis voran und löst die Datei korrekt auf.

— malmike21
quelle
5

Hier finden Sie eine offizielle Dokumentation zum Visual Studio-Code zum Debuggen von Angular in VSCode https://code.visualstudio.com/docs/nodejs/angular-tutorial#_configure-the-chrome-debugger

Um den clientseitigen Angular-Code zu debuggen, müssen wir die Erweiterung Debugger for Chrome installieren. Öffnen Sie die Ansicht "Erweiterungen" (Strg + Umschalt + X) und geben Sie "Chrom" in das Suchfeld ein. Sie sehen mehrere Erweiterungen, die auf Chrome verweisen. Klicken Sie auf die Schaltfläche Installieren für Debugger for Chrome. Die Schaltfläche ändert sich in Installieren und nach Abschluss der Installation in Neu laden. Drücken Sie Neu laden, um VS Code neu zu starten und die Erweiterung zu aktivieren.

Wir müssen den Debugger zunächst konfigurieren. Wechseln Sie dazu in die Debug-Ansicht (Strg + Umschalt + D) und klicken Sie auf die Zahnradschaltfläche, um eine Debugger-Konfigurationsdatei für launch.json zu erstellen. Wählen Sie Chrome aus der Dropdown-Liste Umgebung auswählen. Dadurch wird eine launch.json-Datei in einem neuen .vscode-Ordner in Ihrem Projekt erstellt, die die Konfiguration zum Starten der Website oder zum Anhängen an eine laufende Instanz enthält. Für unser Beispiel müssen wir eine Änderung vornehmen: Ändern Sie den Port von 8080 auf 4200.

— Teddy
quelle
Was ist, wenn ich Internet Explorer und nicht Chrome ausführen möchte?
— Robermann
Ich weiß nicht, warum Sie das tun möchten, aber derzeit gibt es keine IE-Unterstützung.
— Teddy
3

Ich hatte Probleme damit und während @Sankets Antwort half, war es dieses Problem, das es für mich löste https://github.com/angular/angular-cli/issues/2453 .

Fügen Sie speziell das Folgende zu launch.json hinzu

"sourceMapPathOverrides": {
    "webpack:///c:/foo/bar/angular-project/*": "${workspaceRoot}/*"
}
— Rubie
quelle
2

Für eckige Samen:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug with chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:5555",
      "sourceMaps": true,
      "webRoot": "${workspaceRoot}/src/client",
      "userDataDir": "${workspaceRoot}/out/chrome",
      "sourceMapPathOverrides": {
        "app/*": "${webRoot}/app/*"
      }
    }
  ]
}
— Matt Bierner
quelle
0

Diese Mods launch.jsonfunktionierten für mich unter MacOS, wodurch ich den Debugger und die Haltepunkte in einer neuen Instanz von Chrome pro Debug-Sitzung zum Laufen bringen konnte ...

// This forces chrome to run a brand new instance, allowing existing
// chrome windows to stay open.
"userDataDir": "${workspaceRoot}/.vscode/chrome",
"webRoot": "${workspaceRoot}",
"sourceMaps": true,
"sourceMapPathOverrides": { "webpack:///./*": "${webRoot}/*" }
— Simeon
quelle
0

Dieser ist bewährt -

Schritt 1: Chrome-Debugger installieren: Öffnen Sie einfach die Befehlspalette (Strg + Umschalt + P) in VS Code und geben Sie den Befehl Extensions: Install Extension ein. Wenn die Erweiterungsliste angezeigt wird, geben Sie 'chrome' ein, um die Liste zu filtern und die Debugger for Chrome-Erweiterung zu installieren. Anschließend erstellen Sie eine Startkonfigurationsdatei.

[Weitere Details zu Schritt 1]

Schritt 2: Erstellen und aktualisieren Sie die Datei launch.json: Zwei Beispiele für die Konfiguration von launch.json mit "request": "launch". Sie müssen entweder eine Datei oder eine URL angeben, um Chrome für eine lokale Datei oder eine URL zu starten. Wenn Sie eine URL verwenden, setzen Sie webRoot auf das Verzeichnis, aus dem Dateien bereitgestellt werden. Dies kann entweder ein absoluter Pfad oder ein Pfad sein, der $ {workspaceRoot} (den im Code geöffneten Ordner) verwendet. webRoot wird verwendet, um URLs (wie " http: //localhost/app.js ") in eine Datei auf der Festplatte (wie "/Users/me/project/app.js") aufzulösen. Achten Sie also darauf, dass sie richtig eingestellt sind. Aktualisieren Sie den Inhalt der Datei launch.json wie folgt:

{
    "version": "0.1.0",
    "configurations": [
        {
            "name": "Launch localhost",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost/some_name",
            "webRoot": "${workspaceRoot}/wwwroot"
        },
        {
            "name": "Launch index.html (disable sourcemaps)",
            "type": "chrome",
            "request": "launch",
            "sourceMaps": false,
            "file": "${workspaceRoot}/index.html"
        },
    ]
}

[Weitere Details zu Schritt 2]

— Enthusiast
quelle
0

Ich muss verwenden, CORSdamit ich Chrome mit deaktivierter Web-Sicherheit öffne. Dann debugge ich die Angular-Anwendung, indem ich den Debugger an Chrome anhänge.

CMD-Linie zum Starten von Chrome mit deaktivierter Websicherheit:

cd "C:\Program Files (x86)\Google\Chrome\Application\"
chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security --remote-debugging-port=9222

launch.json Datei zum Anhängen des Debuggers:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to Chrome",
            "port": 9222,
            "webRoot": "${workspaceFolder}"
        },
    ]
}
— Karthik
quelle
0

Sankets Antwort war richtig, aber ich hatte einige Probleme damit.

Erstens befindet sich Launch.json im Verzeichnis ".vscode" des Projekts, und zweitens sollte die Portnummer mit dem Standardserverport übereinstimmen, den Sie zum Starten Ihrer App verwenden. Ich verwende ng serve von cmd zum Starten meines Projekts und die Standardportnummer war 4200 , daher habe ich die Datei launch.json wie folgt geändert.

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:4200",
            "sourceMaps": true,
            "webRoot": "${workspaceFolder}"
        }
    ]
}
— Hamed Mahdizadeh
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.