Frage Wie Debuggen Angular mit VSCode?


Wie kann ich Angular und VSCode konfigurieren, damit meine Breakpoints funktionieren?


76
2018-02-27 20:59


Ursprung


Antworten:


  1. Installiere das Chrome Debugger-Erweiterung
  2. Erstelle das launch.json (im .vscode Ordner)
  3. Benutze mein launch.json (siehe unten)
  4. Erstelle das tasks.json (im .vscode Ordner)
  5. Benutze mein tasks.json (siehe unten)
  6. Drücken Sie STRG+VERSCHIEBUNG+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 5 / CLI 1.5.5


  1. Installiere das Chrome Debugger-Erweiterung
  2. Erstelle das launch.json
  3. Benutze mein launch.json (siehe unten)
  4. Starten Sie den NG Live Entwicklungsserver (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/*"
      }
    }
  ]
}

Getestet mit Angular 2.4.8


110
2018-02-27 21:27



Sieht so aus, als ob das VS Code-Team jetzt Debugging-Rezepte speichert.

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

26
2017-07-27 04:25



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


3
2018-04-24 08:02



Hier ist eine etwas leichtere Lösung, funktioniert mit Angular 2+ (Ich benutze 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"
      ]
    }
  ]
}

1
2018-05-25 11:45



Dafür gibt es zwei verschiedene Möglichkeiten. Sie können starten ein neuer Prozess oder anfügen zu einem bestehenden.

Der entscheidende Punkt in beiden Prozessen ist es zu haben Webpack-Dev-Server und VSCode-Debugger werden gleichzeitig ausgeführt.

Starten Sie einen Prozess

  1. In deinem launch.json Datei fügen Sie 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-Dev-Server von Angular CLI aus, indem Sie ihn ausführen npm start

  3. Wechseln Sie zum VSCode-Debugger und führen Sie die Konfiguration "Angular Debugging Session" aus. Daraufhin 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 es 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-Dev-Server von Angular CLI aus, indem Sie ihn ausführen npm start
  4. Wählen Sie "Chrome Attach" -Konfiguration und führen Sie sie aus.

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

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

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


0
2017-07-03 11:38