angular - 使用 Visual Studio Code 调试不起作用

Question

我希望能够使用 Visual Studio Code 调试 Angular2 应用程序。

这是我的环境:

• 操作系统:Ubuntu 16.10 x64
• 浏览器:Chromium 53.0.2785.143
• 节点:6.8.0
• Angular-cli:1.0.0-beta.19-3

使用 angular-cli 创建一个新项目:

ng new test-VSC-debug
cd test-VSC-debug

然后我打开 VSC 并加载项目:File/open folder

我单击 debug Logo ，然后通过选择 chrome configure launch.json。它生成以下文件:

{
    "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 中选择:“使用 sourcemaps 针对本地主机启动 Chrome”。

然后，我得到以下错误:
“找不到 chrome:安装它或在启动配置中设置 runtimeExecutable 字段。”

所以我设置:
"runtimeExecutable": "chromium-browser"
(正如我在我的 Ubuntu 上没有有 chrome 但有 chrome)。

启动应用程序的 Angular-cli 默认端口是 4200。将 url 从“http://localhost:8080”更改为“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"
]

但这并没有改变任何东西。

我决定为我的 typescript 开发人员(主要是 angular2)使用 VSC，这种调试方式似乎非常强大。我觉得不使用它太糟糕了:)。

感谢您的帮助!

PS:一些相关的stackoverflow问题和github问题:
- Debug & Run Angular2 Typescript with Visual Studio Code?
- https://github.com/angular/angular-cli/issues/2453
- https://github.com/angular/angular-cli/issues/1936
- https://github.com/angular/angular-cli/issues/1281

编辑 1:!!!部分改进!!!我找到了一种在 Visual Studio Code 控制台中获取调试信息的方法!所以它还不完美，因为断点不起作用，但事情就是这样。到目前为止，如果我打开 http://localhost:9222我什么也看不见。 (“本地主机未授权连接”)。

但是，如果我像那样启动 Chrome :

chromium-browser --remote-debugging-port=9222 --user-data-dir=remote-profile

重要的是要注意参数:--user-data-dir=remote-profile。如果您只是传递 --user-data-dir ，它会启动一个没有任何连接的新窗口。但这还不够。您需要将 remote-profile 作为值传递。

• 它打开一个新的浏览器窗口
• 我打开 http://localhost:4200我也可以到达http://localhost:9222 !
• 我可以使用“使用源映射附加到 chrome”选项连接 VSC! (如您所见，我确实在控制台中显示了“Angular 2 正在开发模式下运行。调用 enableProdMode() 以启用生产模式。”并且页脚现在具有橙色背景)

到目前为止，我希望它能帮助到一些人。但是现在的问题是断点不起作用。

我会继续挖掘，如果找到原因，我会再做一次编辑。

Answer 1

我能够在 OSX 上解决这个问题。之所以如此痛苦，是因为有多种因素导致了这个问题。

1. 您使用 --user-data-dir=remote-profile 命中第一个:如果您已经在运行 Chrome(例如，已经打开了标签页 - 谁没有？) ，您必须使用不同的 userDataDir 让 Chrome 启动一个独立的实例。
   然而，正确的方法是添加 "userDataDir": "${workspaceRoot }/.vscode/chrome", 到你的 launch.json 配置(见下文)。这需要一个路径。如果使用“remote-profile”，它会尝试查找名为“remote-profile”的相对目录。
2. 您需要在 launch.json 配置中设置 sourceMapPathOverrides，其值取决于您的操作系统:
   OSX: "sourceMapPathOverrides": { "webpack:///./*": "${webRoot}/*"}
   Windows: "sourceMapPathOverrides": { "webpack:///C:*":"C:/*"}
   Linux: "sourceMapPathOverrides": { "webpack:///*": "/*"}
   (注意:我没有测试过 Windows 或 Linux 版本)

这是我在 OSX 上工作的 launch.json:

{
    // 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。

以下是我正在使用的版本:

• angular-cli: 1.0.0-beta.24
• 节点:7.3.0
• Chrome:55.0.2883.95
• Visual Studio 代码:1.8.1
• VSCode 扩展“Chrome 调试器”msjsdiag.debugger-for-chrome:2.4.2