Antworten:
launch.json(innerhalb des .vscode-Ordners)launch.json(siehe unten)tasks.json(innerhalb des .vscode-Ordners)tasks.json(siehe unten)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
}
}
]
}
launch.jsonlaunch.json(siehe unten)ng serve)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/*"
}
}
]
}
NG Live Development Serverund dann starten können ? ChromeF5
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 .
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"]
}
]
}
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 .
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}"
}
]
}
Führen Sie den Webpack-Entwicklungsserver über Angular CLI aus, indem Sie ihn ausführen npm start
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
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}"
}
]
}
npm startIn 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
chrome.exe --remote-debugging-port=9222starte, muss ich diesen Befehl ausführen. Gibt es eine Alternative für eine einmalige Konfiguration
Dies wird auf der Visual Studio Code-Website ausführlich erläutert: https://code.visualstudio.com/docs/nodejs/angular-tutorial
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}"
}
]
}
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"
]
}
]
}
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"
}
]
}
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: