Wie debugge ich Angular mit VSCode?

127

Wie kann ich Angular und VSCode so konfigurieren, dass meine Haltepunkte funktionieren?

angular debugging webpack visual-studio-code Asesjix
quelle
Was meinst du? Wie funktionieren sie nicht?
TylerH
2
@ TylerH, es sollte eine Anleitung sein, wie es funktioniert. es funktioniert nicht ohne modifizierte launch.json.
Asesjix

Antworten:

178

Getestet mit Angular 5 / CLI 1.5.5

  1. Installieren Sie die Chrome Debugger-Erweiterung
  2. Erstellen Sie den launch.json(innerhalb des .vscode-Ordners)
  3. Benutze meine launch.json(siehe unten)
  4. Erstellen Sie den tasks.json(innerhalb des .vscode-Ordners)
  5. Benutze meine tasks.json(siehe unten)
  6. Drücken Sie CTRL+ SHIFT+B
  7. Drücken Sie F5

launch.json for angular/cli >= 1.3

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200/#",
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "Attach Chrome",
      "type": "chrome",
      "request": "attach",
      "url": "http://localhost:4200/#",
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "Launch Chrome (Test)",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:9876/debug.html",
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "Launch Chrome (E2E)",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/node_modules/protractor/bin/protractor",
      "protocol": "inspector",
      "args": ["${workspaceFolder}/protractor.conf.js"]
    }
  ]
}

tasks.json for angular/cli >= 1.3

{
    "version": "2.0.0",
    "tasks": [
      {
        "identifier": "ng serve",
        "type": "npm",
        "script": "start",
        "problemMatcher": [],
        "group": {
          "kind": "build",
          "isDefault": true
        }
      },
      {
        "identifier": "ng test",
        "type": "npm",
        "script": "test",
        "problemMatcher": [],
        "group": {
          "kind": "test",
          "isDefault": true
        }
      }
    ]
  }

Getestet mit Angular 2.4.8

  1. Installieren Sie die Chrome Debugger-Erweiterung
  2. Erstellen Sie die launch.json
  3. Benutze meine launch.json(siehe unten)
  4. Starten Sie den NG Live Development Server ( ng serve)
  5. Drücken Sie F5

launch.json for angular/cli >= 1.0.0-beta.32

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true,
      "userDataDir": "${workspaceFolder}/.vscode/chrome",
      "runtimeArgs": [
        "--disable-session-crashed-bubble"
      ]
    },
    {
      "name": "Attach Chrome",
      "type": "chrome",
      "request": "attach",
      "url": "http://localhost:4200",
      "port": 9222,
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true
    }
  ]
}

launch.json for angular/cli < 1.0.0-beta.32

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Lunch Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}/src/app",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///./~/*": "${workspaceFolder}/node_modules/*",
        "webpack:///./src/*": "${workspaceFolder}/src/*"
      },
      "userDataDir": "${workspaceFolder}/.vscode/chrome",
      "runtimeArgs": [
        "--disable-session-crashed-bubble"
      ]
    },
    {
      "name": "Attach Chrome",
      "type": "chrome",
      "request": "attach",
      "url": "http://localhost:4200",
      "port": 9222,
      "webRoot": "${workspaceFolder}/src/app",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///./~/*": "${workspaceFolder}/node_modules/*",
        "webpack:///./src/*": "${workspaceFolder}/src/*"
      }
    }
  ]
}
Asesjix
quelle
7
Wissen Sie, wie Sie mit nur einem Klick starten NG Live Development Serverund dann starten können ? ChromeF5
Merdan Gochmuradov
2
Entschuldigung, das ist nicht möglich, da die Aufgabe "ng serve" in der preLaunchTask gestartet werden müsste. "ng serve" muss permanent ausgeführt werden und daher ist die "preLaunchTask" nicht abgeschlossen, was bedeutet, dass der vs-Code den Debug-Prozess nicht startet. aber ich habe eine neue Konfiguration hinzugefügt, die die Arbeit ein bisschen schneller machen soll ;-)
Asesjix
1
Klare und kurze Antwort. Es wäre gut, wenn Sie kurz erklären könnten launch.jsonund tasks.jsontut hier. Wie ich verstanden habe, launch.jsonsoll der Knotenserver gestartet und Port 8080 abgehört werden, und es wird tasks.jsonangewiesen npm, den Befehl ng servezum Ausführen der Anwendung zu verwenden und auszuführen .
Shaijut
@Zachscs welche eckige Version hast du benutzt?
Asesjix
1
Ich hatte das gleiche Problem, da keine Haltepunkte gesetzt wurden, bis mir schließlich klar wurde, dass meine Webroot falsch war. Ich hatte den Standardwert für webRoot ("webRoot": "$ {workspaceFolder}") anstelle von $ {workspaceFolder} / my-app-
Joseph Simpson
48

Das VS Code-Team speichert jetzt Debugging-Rezepte.

https://github.com/Microsoft/vscode-recipes/tree/master/Angular-CLI

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Chrome with ng serve",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceRoot}"
    },
    {
      "name": "Launch Chrome with ng test",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:9876/debug.html",
      "webRoot": "${workspaceRoot}"
    },
    {
      "name": "Launch ng e2e",
      "type": "node",
      "request": "launch",
      "program": "${workspaceRoot}/node_modules/protractor/bin/protractor",
      "protocol": "inspector",
      "args": ["${workspaceRoot}/protractor.conf.js"]
    }      
  ]
}
Levi Fuller
quelle
10

Dafür gibt es zwei verschiedene Möglichkeiten. Sie können einen neuen Prozess starten oder anhängen einen vorhandenen .

Der entscheidende Punkt in beiden Prozessen ist, dass der Webpack-Entwicklungsserver und der VSCode-Debugger gleichzeitig ausgeführt werden .

Starten Sie einen Prozess

  1. Fügen Sie Ihrer launch.jsonDatei die folgende Konfiguration hinzu:

    {
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Angular debugging session",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

  2. Führen Sie den Webpack-Entwicklungsserver über Angular CLI aus, indem Sie ihn ausführen npm start

  3. Gehen Sie zum VSCode-Debugger und führen Sie die Konfiguration "Angular Debugging Session" aus. Infolgedessen wird ein neues Browserfenster mit Ihrer Anwendung geöffnet.

An einen vorhandenen Prozess anhängen

  1. Dazu müssen Sie Chrome im Debugger-Modus mit geöffnetem Port ausführen (in meinem Fall wird dies der Fall sein) 9222 ):

    Mac:

    /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

    Windows:

    chrome.exe --remote-debugging-port=9222

  2. launch.json Die Datei sieht folgendermaßen aus:

    {
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Chrome Attach",
      "type": "chrome",
      "request": "attach",
      "port": 9222,
      "url": "http://localhost:4200/",
      "webRoot": "${workspaceFolder}"
    } 
  ]
}
  3. Führen Sie den Webpack-Entwicklungsserver über Angular CLI aus, indem Sie ihn ausführen npm start
  4. Wählen Sie die Konfiguration "Chrome Attach" und führen Sie sie aus.

In diesem Fall wird der Debugger an den vorhandenen Chrome-Prozess angehängt, anstatt ein neues Fenster zu öffnen.

Ich habe meinen eigenen Artikel geschrieben, in dem ich diesen Ansatz mit Illustrationen beschrieben habe.

Einfache Anleitung zum Konfigurieren des Debuggers für Angular in VSCode

Skryvets
quelle
Vielen Dank, jedes Mal, wenn ich das Chrome chrome.exe --remote-debugging-port=9222starte, muss ich diesen Befehl ausführen. Gibt es eine Alternative für eine einmalige Konfiguration
Saurabh47g
Abhängig von Ihren Anmeldeinformationen können Sie möglicherweise im Windows-Startmenü mit der rechten Maustaste auf Chrom klicken, auf Eigenschaften klicken und dort das Flag hinzufügen. Dies funktioniert auf meinem Arbeitscomputer nicht, daher habe ich den Befehl in git bash für Windows aliasiert.
vitale232
7

Dies wird auf der Visual Studio Code-Website ausführlich erläutert: https://code.visualstudio.com/docs/nodejs/angular-tutorial

Victor Ionescu
quelle
Meinten Sie code.visualstudio.com/docs/nodejs/… ? Der · # _Debugging-Winkel zeigt direkt auf den interessanten Punkt, wenn Sie Ihre Antwort bearbeiten möchten ...
Pipo
@Pipo Nein, ich meinte nicht nodejs, ich benutze keine nodejs auf der Serverseite, also würde ich es nicht wissen.
Victor Ionescu
3

Kann diese Konfiguration verwenden:

{
 "version": "0.2.0",
"configurations": [
{
        "name": "ng serve",
        "type": "chrome",
        "request": "launch",
        "preLaunchTask": "npm: start",
        "url": "http://localhost:8080",
        "webRoot": "${workspaceFolder}"
      }
]
}
Ahmad Aghazadeh
quelle
2

Hier ist eine etwas leichtere Lösung, funktioniert mit Angular 2+ (ich verwende Angular 4)

Außerdem wurden die Einstellungen für den Express-Server hinzugefügt, wenn Sie den MEAN-Stack ausführen.

{
  // Use IntelliSense to learn about possible Node.js debug attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Angular Client",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200",
      "runtimeArgs": [
        "--user-data-dir",
        "--remote-debugging-port=9222"
        ],
        "sourceMaps": true,
        "trace": true,
        "webRoot": "${workspaceRoot}/client/",
        "userDataDir": "${workspaceRoot}/.vscode/chrome"
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Express Server",
      "program": "${workspaceRoot}/server/bin/www",
      "outFiles": [
        "${workspaceRoot}/out/**/*.js"
      ]
    }
  ]
}
Isak La Fleur
quelle
Können Sie Ihren serverseitigen Code gleichzeitig mit Angular mit dieser Konfiguration debuggen / pausieren?
Mika571
@ Mika571 nein leider ... ich habe das gerade versucht. Ich möchte gleichzeitig Server- und Client-Seite debuggen.
Leniel Maccaferri
1

Die Antwort von @Asesjix ist sehr gründlich, aber wie einige bereits betont haben, sind immer noch mehrere Interaktionen erforderlich, ng serveum die Angular-App in Chrome zu starten und anschließend zu starten. Ich habe dies mit einem einzigen Klick mit der folgenden Konfiguration zum Laufen gebracht. Der Hauptunterschied zur Antwort von @ Asesjix besteht darin, dass der Aufgabentyp jetzt lautet shellund die Befehlsaufrufe startzuvor hinzugefügt wurden, ng servesodass er ng servein einem eigenen Prozess vorhanden sein kann und den Debugger nicht am Starten hindert:

task.json:

{
    "version": "2.0.0",
    "tasks": [
      {
        "label": "ng serve",
        "type": "shell",
        "command": "\"start ng serve\""
      },
      {
        "label": "ng test",
        "type": "shell",
        "command": "\"start ng test\"",
      }
    ]
  }

launch.json:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch in Chrome",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}",
            "preLaunchTask": "ng serve"
        }
    ]
}
Ubiquibacon
quelle
0

In meinem Fall hatte ich den ursprünglichen Angular-Projektordnerbaum nicht verwendet und wusste, dass mit webRoot/ ein Fehler aufgetreten ist{workspaceFolder} bit aber alle meine Experimente ergaben kein Ergebnis. Ich habe einen Tipp von einer anderen SO-Antwort erhalten, den ich verlinken werde, wenn ich ihn wieder finde.

Was mir geholfen hat, war, den Inhalt der Variablen {workspaceFolder}zur Laufzeit zu finden und ihn dann an den Speicherort meines Ordners "src" zu ändern, unter dem Sie "app / *" haben. Um es zu finden, habe ich preLaunchTaskmeiner Datei launch.json eine und eine Aufgabe hinzugefügt , um den Wert von auszugeben {workspaceFolder}.

launch.json , das nach der Installation des Chrome-Debuggers angezeigt wird

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}/src/newProjectRoot/",
      "preLaunchTask": "Echo values" //Just to see what the cryptic vs code variables actually are https://code.visualstudio.com/docs/editor/variables-reference
    }
  ]
}

Tasks.json Standardmäßig nicht vorhanden. Drücken Sie Strg + Umschalt + p und ich denke, es heißt "Aufgabe für anderen Befehl erstellen" oder ähnliches. Kann es nicht sehen, nachdem task.json erstellt wurde. Sie können die Datei auch einfach am selben Speicherort wie launch.json erstellen

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Echo values",
      "command": "echo",
      "args": ["${env:USERNAME}", "workspaceFolder = ${workspaceFolder}"],
      "type": "shell"
    }
  ]
}

Sobald ich den Wert von $ {workspaceFolder} kannte, habe ich ihn so korrigiert, dass er auf meinen src-Ordner in meinem neuen Projektbaum verweist, und alles hat funktioniert. Das Debuggen muss ng serveentweder als Prelaunch-Task oder als Teil des Builds (Beispiele oben) oder an einer Eingabeaufforderung ausgeführt worden sein.

Hier ist ein Link zu allen Variablen, die Sie verwenden können:

Asche
quelle