我希望能够使用 Visual Studio Code 调试 Angular2 应用程序。
这是我的环境：
使用 angular-cli 创建一个新项目：
ng new test-VSC-debug
cd test-VSC-debug
然后我打开 VSC 并加载项目：File/open folder
我点击debug标志和我configure launch.json通过选择chrome。它生成以下文件：
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Chrome against localhost, with sourcemaps",
"type": "chrome",
"request": "launch",
"url": "http://localhost:8080",
"sourceMaps": true,
"webRoot": "${workspaceRoot}"
},
{
"name": "Attach to Chrome, with sourcemaps",
"type": "chrome",
"request": "attach",
"port": 9222,
"sourceMaps": true,
"webRoot": "${workspaceRoot}"
}
]
}
然后我通过运行以下命令启动 angular2 项目：
ng serve
启动后，在 VSC 中我选择：“针对本地主机启动 Chrome，使用源映射”。
然后，我收到以下错误：
“找不到 chrome：安装它或在启动配置中设置 runtimeExecutable 字段。”
所以我设置：
“runtimeExecutable”：“chromium 浏览器”
（像我这样做not有 chrome，但我的 Ubuntu 上有 chromium）。
启动应用程序的 Angular-cli 默认端口是 4200。 更改网址：“http://本地主机:8080 http://localhost:8080" to "http://本地主机:4200 http://localhost:4200".
现在浏览器正在打开应用程序，但 VSC 出现以下错误： “无法连接到运行时进程，10000 毫秒后超时 - （原因：无法连接到目标：连接 ECONREFUSED 127.0.0.1:9222”。
从 stackoverflow/github 问题上找到的其他答案中，我读到我可能必须在尝试执行此操作之前杀死所有 chrome 实例，因此我只需关闭 chromium 并运行killall chromium-browser.
我尝试再次运行调试：与之前相同的错误（无法连接）。
我还发现以下论点可能会有所帮助：
"runtimeArgs": [
"--remote-debugging-port=9222",
"--user-data-dir"
]
但这并没有改变任何事情。
我决定为我的打字稿开发人员（主要是 Angular2）使用 VSC，这种调试方式似乎非常强大。我感觉如果不使用它就太糟糕了:)。
谢谢你的帮助 ！
PS：一些相关的 stackoverflow 问题和 github 问题：
- 使用 Visual Studio Code 调试和运行 Angular2 Typescript？ https://stackoverflow.com/questions/36494938/debug-run-angular2-typescript-with-visual-studio-code
- https://github.com/angular/angular-cli/issues/2453 https://github.com/angular/angular-cli/issues/2453
- https://github.com/angular/angular-cli/issues/1936 https://github.com/angular/angular-cli/issues/1936
- https://github.com/angular/angular-cli/issues/1281 https://github.com/angular/angular-cli/issues/1281
编辑1：!!!部分改进！我找到了一种在 Visual Studio Code 控制台中获取调试信息的方法！ 所以它还不完美，因为断点不起作用，但事情是这样的。 到目前为止，如果我打开http://本地主机:9222 http://localhost:9222我什么也看不见。 （“本地主机未授权连接”）。
但是，如果我像这样启动 chromium ：
chromium-browser --remote-debugging-port=9222 --user-data-dir=remote-profile
重要的是要注意这个论点：--user-data-dir=remote-profile。如果你只是传递 --user-data-dir ，它会启动一个没有人连接的新窗口。但这还不够。你需要通过远程配置文件作为价值。
(as you can see, I do have the "Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode." displayed in console and the footer now has an orange background)So far, I hope it can help some people.
But the problem now is that breakpoints are not working.
我继续挖掘，如果找到原因，我会再次编辑。
我能够在 OSX 上解决这个问题。之所以如此痛苦，是因为有多种原因导致了这个问题。
--user-data-dir=remote-profile：如果您已经在运行 Chrome（例如，已经打开了标签页 - 谁没有打开？），则必须使用不同的userDataDir让 Chrome 启动一个独立的实例。"userDataDir": "${workspaceRoot}/.vscode/chrome",到您的 launch.json 配置（见下文）。这需要是一条路径。如果使用“remote-profile”，它将尝试查找名为“remote-profile”的相对目录。sourceMapPathOverrides在您的 launch.json 配置中，其值取决于您的操作系统："sourceMapPathOverrides": { "webpack:///./*": "${webRoot}/*" }"sourceMapPathOverrides": { "webpack:///C:*":"C:/*" } "sourceMapPathOverrides": { "webpack:///*": "/*" } 这是我的工作launch.json on OSX:
{
// 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 Chrome against localhost, with sourcemaps",
"type": "chrome",
"request": "launch",
"url": "http://localhost:4200",
// This forces chrome to run a brand new instance, allowing existing
// chrome windows to stay open.
"userDataDir": "${workspaceRoot}/.vscode/chrome",
"sourceMaps": true,
"webRoot": "${workspaceRoot}",
//"diagnosticLogging": true,
"sourceMapPathOverrides": { "webpack:///./*": "${webRoot}/*" }
},
{
"name": "Attach to Chrome, with sourcemaps",
"type": "chrome",
"request": "attach",
"url": "http://localhost:4200",
"port": 9222,
"sourceMaps": true,
"webRoot": "${workspaceRoot}",
"diagnosticLogging": true,
"sourceMapPathOverrides": { "webpack:///./*": "${webRoot}/*" }
}
]
}
为此，请运行ng serve在终端中，然后在 Visual Studio Code 中按 F5。
以下是我正在使用的版本：