it-swarm.com.de

Debuggen und Angular2 TypeScript mit Visual Studio-Code ausführen?

Debuggen und Angular2 TypeScript mit Visual Studio-Code ausführen?

Ich versuche, Angular2 TypeScript-Anwendung mit VS-Code zu debuggen https://angular.io/guide/quickstart

Kann jemand bitte Schritte zum Debuggen und Ausführen von VS-Code teilen?

76
Sanket

Nach langer Recherche fand ich diese Schritte

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

  1. Installieren Sie die Erweiterung "Debugger für Chrome". Wenn die Installation abgeschlossen ist, starten Sie den VS-Code erneut.

  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" haben: true

Damit sind Ihre Einstellungen für die Debug-Umgebung abgeschlossen. Bevor Sie mit dem Debuggen beginnen, stellen Sie sicher, dass alle vorhandenen Chrome.exe-Instanzen geschlossen sind. Überprüfen Sie im Task-Manager OR. 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 URL-Bereich über .. ein.

  3. Platzieren Sie Haltepunkte jetzt an beliebigen Stellen in Ihren TypeScript-Dateien.

  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

120
Sanket

Geben Sie ein userDataDir an - dies verhindert Kollisionen mit anderen Chrome-Instanzen, die Sie möglicherweise bereits ausgeführt haben. Aus diesem Grund ist mir aufgefallen, dass Chrome an jedem von Ihnen angegebenen Port nicht 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"
}

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

15
HydTechie

Ich hatte ein ähnliches Problem, aber mein Projekt enthielt auch ein Webpack, durch das 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 prüfen, ob Sie über die neueste Version von Visual Studio Code verfügen und außerdem die Erweiterung ' Debugger for Chrome ' in VS Code installiert haben.

Zunächst in './config/webpack.dev.js' 

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

Dann installiere und verwende 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 = required ('write-file-webpack-plugin');

unter den Webpack-Plugins oben. Weiter hinzufügen:

  • neues WriteFilePlugin ()

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

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

Dies stellt sicher, dass die Quellkarten auf die Festplatte geschrieben werden

Zum Schluss ist mein launch.json unten aufgeführt.

{
    "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 Quellkarten in ./dist/, sie zeigen jedoch auf ./src/. vscode stellt den absoluten Stamm dem Arbeitsbereich voran und löst die Datei korrekt auf.

5
malmike21

Hier finden Sie eine offizielle Visual Studio Code-Dokumentation 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 Debugger-Erweiterung für Chrome ..__ installieren. Öffnen Sie die Erweiterungsansicht (Strg + Umschalttaste + X) und geben Sie "Chrome" in das Suchfeld ein. Es werden mehrere Erweiterungen angezeigt, die auf Chrome ..__ verweisen. Klicken Sie auf die Schaltfläche Installieren für Debugger für Chrome. Die Schaltfläche ändert sich in Installieren und dann nach dem Abschluss der Installation in Neu laden. Klicken Sie auf Neu laden, um VS Code neu zu starten und die Erweiterung zu aktivieren.

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

5
Teddy

Ich hatte Probleme mit diesem Problem, und während die Antwort von @Sankets dazu beitrug, löste es dieses Problem für mich https://github.com/angular/angular-cli/issues/2453 .

Spezifisches Hinzufügen des Folgenden zu launch.json

"sourceMapPathOverrides": {
    "webpack:///c:/foo/bar/angular-project/*": "${workspaceRoot}/*"
}
3
rubie

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/*"
      }
    }
  ]
}
2
Maxime Duc

Diese Mods für launch.json funktionierten für mich unter MacOS, sodass ich Debugger und 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}/*" }
0
Simeon

Dieser ist bewährt -

Schritt 1: Chrome Debugger installieren: Öffnen Sie einfach die Befehlspalette (Strg + Umschalttaste + P) in VS Code und geben Sie Erweiterungen: Erweiterungsinstallationsbefehl ein. Wenn die Erweiterungsliste angezeigt wird, geben Sie 'chrome' ein, um die Liste zu filtern und die Erweiterung Debugger für Chrome zu installieren. Sie erstellen dann eine Startkonfigurationsdatei.

[Weitere Details zu Schritt 1]

Schritt 2: Erstellen und Aktualisieren der Datei "launch.json": Zwei Beispielkonfigurationen für "launch.json" mit "request": "launch". Sie müssen entweder Datei oder URL angeben, um Chrome mit einer lokalen Datei oder einer URL zu starten. Wenn Sie eine URL verwenden, setzen Sie webRoot auf das Verzeichnis, in dem die Dateien bereitgestellt werden. Dies kann entweder ein absoluter Pfad oder ein Pfad sein, der $ {workspaceRoot} (den in 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. Seien Sie also vorsichtig richtig einstellen . 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]

0
enthusiast

Ich muss CORS verwenden, damit ich Chrome mit deaktivierter Internetsicherheit öffne. Dann debuggen Sie die Angular-Anwendung, indem Sie den Debugger an Chrome anschließen.

CMD-Linie zur Einführung 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}"
        },
    ]
}
0
Karthik

@ 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 from 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}" } ] }

0