如何配置Angular和VSCode，以便我的断点起作用？
如何使用VSCode调试Angular？
第2608篇《如何使用VSCode调试Angular？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点
共7个回答
看起来VS Code团队现在正在存储调试配方。
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"]
}
]
}
有两种不同的方法。您可以启动新流程或将其附加到现有流程。
这两个过程的关键是要同时运行webpack开发服务器和VSCode调试器。
启动一个过程
在
launch.json文件中添加以下配置：{ "version": "0.2.0", "configurations": [ { "name": "Angular debugging session", "type": "chrome", "request": "launch", "url": "http://localhost:4200", "webRoot": "${workspaceFolder}" } ] }通过执行从Angular CLI运行Webpack开发服务器
npm start- 转到VSCode调试器并运行“ Angular调试会话”配置。结果，将打开包含您的应用程序的新浏览器窗口。
附加到现有流程
为此，您需要在打开端口的调试器模式下运行Chrome（在我的情况下为
9222）：苹果电脑：
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222视窗：
chrome.exe --remote-debugging-port=9222launch.json文件将以以下方式显示：{ "version": "0.2.0", "configurations": [ { "name": "Chrome Attach", "type": "chrome", "request": "attach", "port": 9222, "url": "http://localhost:4200/", "webRoot": "${workspaceFolder}" } ] }- 通过执行从Angular CLI运行Webpack开发服务器
npm start - 选择“ Chrome Attach”配置并运行它。
在这种情况下，调试器将附加到现有的Chrome进程，而不是启动新窗口。
我写了自己的文章，并在其中举例说明了这种方法。
这是一个更轻便的解决方案，可用于Angular 2+（我正在使用Angular 4）
如果您运行MEAN堆栈，还添加了Express Server的设置。
{
// 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"
]
}
]
}
可以使用此配置：
{
"version": "0.2.0",
"configurations": [
{
"name": "ng serve",
"type": "chrome",
"request": "launch",
"preLaunchTask": "npm: start",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
}
]
}
在Visual Studio Code网站上对此进行了详细说明：https：//code.visualstudio.com/docs/nodejs/angular-tutorial
经过Angular 5 / CLI 1.5.5测试
- 安装Chrome调试器扩展
- 创建
launch.json（在.vscode文件夹中） - 用我的
launch.json（见下文） - 创建
tasks.json（在.vscode文件夹中） - 用我的
tasks.json（见下文） - 按CTRL+ SHIFT+B
- 按 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
}
}
]
}
经过Angular 2.4.8测试
- 安装Chrome调试器扩展
- 创建
launch.json - 用我的
launch.json（见下文） - 启动NG Live开发服务器（
ng serve） - 按 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答案非常彻底，但是正如某些人指出的那样，仍然需要多次交互才能启动
ng serve，然后在Chrome中启动Angular应用程序。我使用以下配置单击一下就可以使用此功能。与@Asesjix答案的主要区别是任务类型现在shell是，命令调用start之前已经添加，ng serve因此ng serve可以存在于自己的进程中，并且不会阻止调试器启动：task.json：
launch.json：