如何用 VSCode 调试角度？

如何配置角度和 VSCode 使断点工作？

130788 次浏览
小开
最佳答案

用角度5/CLI 1.5.5进行测试

  1. 安装 Chrome 调试器扩展
  2. 创建 launch.json(在.vscode 文件夹内)
  3. 使用我的 launch.json(见下文)
  4. 创建 tasks.json(在.vscode 文件夹内)
  5. 使用我的 tasks.json(见下文)
  6. 按 CTRL + SHIFT + B
  7. 按 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
}
}
]
}

使用角度2.4.8进行测试

  1. 安装 Chrome 调试器扩展
  2. 创建 launch.json
  3. 使用我的 launch.json(见下文)
  4. 启动 NG Live 开发服务器(ng serve)
  5. 按 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/*"
}
}
]
}
小开

这里有一个轻一点的解决方案，与角度2 + (我使用角度4)

如果运行 MEAN 堆栈，还添加了 ExpressServer 的设置。

{
// 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"
]
}
]
}
小开

看起来 VS 代码团队现在正在存储调试配方。

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

这在 VisualStudio 代码站点 https://code.visualstudio.com/docs/nodejs/angular-tutorial中有详细解释

小开

有两种不同的方法可以做到这一点。您可以 发射一个新的进程或 接上到一个现有的。

这两个过程的关键点都是 同时运行 webpack 开发服务器和 VSCode 调试器。

启动程序

  1. 在 launch.json文件中添加以下配置:

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

  2. Run Webpack dev server from Angular CLI by executing npm start

  3. Go to VSCode debugger and run "Angular debugging session" configuration. As a result, new browser window with your application will be opened.

Attach to an existing process

  1. For that you need to run Chrome in the debugger mode with opened port (in my case it will be 9222):

    Mac:

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

    视窗:

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

  2. launch.json file will look in the following way:

    {
"version": "0.2.0",
"configurations": [
{
"name": "Chrome Attach",
"type": "chrome",
"request": "attach",
"port": 9222,
"url": "http://localhost:4200/",
"webRoot": "${workspaceFolder}"
}
]
}
  3. Run Webpack dev server from Angular CLI by executing npm start
  4. Select "Chrome Attach” configuration and run it.

In this case, debugger attached to the existing Chrome process instead of launching up a new window.

I wrote my own article, where I described this approach with illustrations.

Simple instruction how to configure debugger for Angular in VSCode

小开

可以使用以下配置:

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

@ Asesjix 的回答非常全面，但正如一些人指出的那样，启动 ng serve并在 Chrome 中启动 Angular 应用程序仍然需要多次交互。我使用下面的配置通过一次单击就可以完成这项工作。与@Asesjix 回答的主要区别在于，任务类型现在是 shell，命令调用在 ng serve之前添加 start，这样 ng serve就可以存在于自己的进程中，而不会阻止调试器的启动:

任务 json:

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

Json:

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

在我的情况下，我没有使用原始的角项目文件夹树，我知道有一些错误的 webRoot/{workspaceFolder}位，但我所有的实验没有产生任何结果。从另一个 SO 答案得到一个提示，我会链接，如果我再次找到它。

帮助我的是在运行时查找变量 {workspaceFolder}的内容，然后将其修改为我的“ src”文件夹中的“ app/*”位置。为了找到它，我在 launch.json 文件中添加了一个 preLaunchTask和一个输出 {workspaceFolder}值的任务。

Json ，在安装 Chrome 调试器后显示

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

默认情况下不存在。按下 Ctrl + Shift + p，我想这就是所谓的“为其他命令创建任务”或类似的东西。在 tasks.json 创建后似乎看不到它。您也可以在与 < strong > launch.json 相同的位置创建文件

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

一旦我知道 ${ workspaceFolder }的值，我就把它修正为指向新项目树中的 src 文件夹，它就全部工作了。调试要求 ng serve作为启动前任务或构建的一部分(上面的例子)或命令提示符运行。

这里 是指向所有可以使用的变量的链接:


提交答案