使用 Visual Studio Code 进行调试不起作用答案

【问题标题】：Debug with Visual Studio Code not working使用 Visual Studio Code 进行调试不起作用
【发布时间】：2017-03-19 12:00:15
【问题描述】：

我希望能够使用 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 徽标并选择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 中我选择：“Launch Chrome against localhost, with sourcemaps”。

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

所以我设置了：
“runtimeExecutable”：“铬浏览器”
（就像我在我的 Ubuntu 上没有有铬但有铬）。

Angular-cli 启动应用程序的默认端口是 4200。将网址从“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"
]

但它不会改变任何东西。

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

感谢您的帮助！

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

但是，如果我这样启动铬：

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() 以启用生产模式。”显示在控制台中，页脚现在有橙色背景）

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

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

【问题讨论】：

使用 Angular 2.4.8 stackoverflow.com/questions/42495655/…

标签： angular google-chrome-devtools visual-studio-code angular-cli

【解决方案1】：

我能够在 OSX 上解决这个问题。造成如此痛苦的原因是有多种原因导致此问题。

您首先使用--user-data-dir=remote-profile：如果您已经在运行 Chrome（例如，已经打开了标签页 - 谁没有？），您必须使用不同的 userDataDir 让 Chrome 启动独立实例。
然而，正确的做法是将"userDataDir": "${workspaceRoot}/.vscode/chrome", 添加到您的launch.json 配置中（见下文）。这需要一个路径。如果使用“remote-profile”，它会尝试查找名为“remote-profile”的相对目录。
您需要在您的launch.json 配置中设置sourceMapPathOverrides，其值取决于您的操作系统：
OSX："sourceMapPathOverrides": { "webpack:///./*": "${webRoot}/*" }
视窗："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
铬：55.0.2883.95
Visual Studio 代码：1.8.1
VSCode 扩展“Chrome 调试器”msjsdiag.debugger-for-chrome: 2.4.2

【讨论】：

不支持“chrome”。
@fuzz 你安装了扩展Debugger for Chrome 吗？
非常感谢您提供launch.json 文件。效果很好！

【解决方案2】：

我终于让它完全正常工作了！

对于那些感兴趣的人：

（在 Linux 上使用 chromium-browser，但您可以轻松地替换为“chrome”）。

首先，这是 launch.json 配置：

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Attach to Chrome, with sourcemaps",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}/src",
            "url": "http://localhost:4200/",
            "sourceMapPathOverrides": {
              "webpack:///*": "/*"
            }
        }
    ]
}

我决定删除带有 "request": "launch" 的部分，因为我需要启动一个新的浏览器窗口。

然后，像这样启动浏览器：

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

在新窗口中，访问http://localhost:4200。

然后从 VSC 运行调试。

一切都应该正常工作，你应该能够使用断点:)

可在此处查看 GIF 动图：http://hpics.li/0156b80

【讨论】：

Windows 用户请注意：sourceMapPathOverrides 必须包含您的相关驱动器号。例如。 "webpack:///c:*": "c:/*" 当您从 C: drive 运行项目时。
太棒了！我已经尝试过几次，但永远无法让它工作。 sourceMapPathOverrides 是关键！

【解决方案3】：

我在 Mac OSX 上使用 Angular CLI 1.7.3 和 Angular: 5.2.9。这是对我有用的配置：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Client in Chrome",
            "sourceMaps": true,
            "url": "http://localhost:4200",
            "webRoot": "${workspaceRoot}",
            "userDataDir": "${workspaceRoot}/.vscode/chrome",
            "sourceMapPathOverrides": {
                "webpack:/./*": "${webRoot}/*",
                "webpack:/src/*": "${webRoot}/src/*",
                "webpack:/*": "*",
                "webpack:/./~/*": "${webRoot}/node_modules/*",
            }
        }
    ]
}

【讨论】：

【解决方案4】：

类似于Aaron F.'s answer，我在 Windows 环境中使用以下设置进行 Angular 2+ 开发。

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Chrome against localhost, with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4200",
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}",
            "trace": true,
            "smartStep": true,
            "runtimeArgs": [
              "--disable-session-crashed-bubble",
              "--disable-infobars"
            ],
            "userDataDir": "${workspaceRoot}/.vscode/chrome",
            "sourceMapPathOverrides": {
                "webpack:///./*": "${webRoot}/*"
            }
        }
    ]
}

【讨论】：

【解决方案5】：

我在使用 windows-vscode 时遇到了同样的问题，我的 launch.json 如下：

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [

        {
        "type": "chrome",
        "request": "launch",
        "name": "Launch Chrome against localhost",
        "url": "http://localhost:4200",
        "webRoot": "${workspaceFolder}"
        }
        ]
}

然后我从here 安装了 chrome 调试扩展，然后错误解决了。

您可以直接从以下位置安装此扩展程序：

vscode-->Extensions-->search and select "Debugger From Chrome"-->click on install

你可能需要重启 vscode。

【讨论】：

该扩展已被弃用。没有它有什么办法吗？

【解决方案6】：

您只需要安装 Debugger for Chrome 扩展程序。

【讨论】：

【解决方案7】：

以下配置适用于我在 macOS 上使用 VSCode v1.23、Angular 6 和 Chrome 66。

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "http://localhost:4200",
      "smartStep": true,
      "sourceMaps": true,
      "webRoot": "${workspaceFolder}",
      "sourceMapPathOverrides": {
        "webpack:///./*": "${webRoot}/*",
        "webpack:///src/*": "${webRoot}/src/*",
        "webpack:///*": "*",
        "webpack:///./~/*": "${webRoot}/node_modules/*"
      }
    }
  ]
}

【讨论】：

这在使用电子 + 角度 7 设置调试时对我有用。渲染器调试过程无法正常工作，即使它在电子外壳 chrome 调试器中映射良好。像这样设置覆盖可以正确地将 VSCode 附加到已启动的电子外壳的渲染器进程。

【解决方案8】：

不推荐使用 chrome 调试扩展。要使用等效的本机 VSC 调试，请参阅 launch.json 文档。 Github page

与旧设置的区别在于 PWA 部分：

{
    "version": "0.2.0",
    "configurations": [
        {
          "type": "pwa-chrome",
          "request": "launch",
          "name": "Launch Chrome with ng serve",
          "url": "http://localhost:4200/",
          "webRoot": "${workspaceRoot}",
          "sourceMapPathOverrides": { "webpack:/*": "${webRoot}/*" }
        }
      ]
}

【讨论】：

感谢 Alex，在花了 1 小时寻找解决方案后，您拯救了我的一天！

【解决方案9】：

使用 angular 和 karma 在 vs 代码中进行测试和调试是一个解决方案，角度测试用例必须在 2 个文件中进行设置，

Karm.conf.json（这是一个设置你的业力测试运行器的文件。
LaunchSetting.json（这是您的 Chome 调试器扩展使用的文件

在 vs 代码中）

所以总是首先你必须在那个端口上运行你的 karma 测试运行器，然后你可以在正在运行的端口上附加调试器。

步骤 1) 设置 Karma.conf.json，打开由 cli 创建的默认文件，你有这样的东西，端口：9876，颜色：真实，日志级别：config.LOG_INFO，自动手表：是的，浏览器：['Chrome']，

如果您运行 ng test，您会在控制台中看到一些信息，例如 Chrome 是否正在运行，并且会在浏览器中打开一个带有 http://localhost:9876 的页面，

现在是时候添加带有端口 9222 的 headlesschrome，

在 config.set 中，添加这个，
```
    customLaunchers:{
          ChromeHeadless:{
            base:'Chrome',
            flags:[
              '--headless',
              '--disable-gpu',
              '--no-sandbox',
             // Without a remote debugging port, Google Chrome exits immediately.
              '--remote-debugging-port=9222',
            ]
          }
        }
```
现在去添加浏览器数组 ChoromeHeadless，所以更新后的数组将如下所示， browsers: ['Chrome','ChromeHeadless'],

现在运行 ng 测试，您在控制台 chrome 和 chrome headless 中都运行，

步骤 2) 是时候设置你的启动器了，在 9222 上调试，调试工作你需要创建源映射才能正常工作，这很重要，所以为了同样的工作，只需将配置设置从下面的配置数组复制粘贴到您的 launchsetting.json 配置数组作为新配置，
```
configurations: [
    {
                "name": "Attach to Chrome, with sourcemaps",
                "type": "chrome",
                "request": "attach",
                "port": 9222,
                "webRoot": "${workspaceFolder}",
                "sourceMapPathOverrides": {
                    "*": "${webRoot}/*",
                },
                "sourceMaps": true,
    }
    ]
```
运行 ng test，然后去调试器选择我们添加的配置，你的调试器工作，

如果你使用 npm run test，那么请确保在你定义运行测试的 package.config 中，你没有将 source map 设置为 false，如果没有，那么你可以设置调试器， npm run test 也是如此。

【讨论】：

【解决方案10】：

我遇到了 Aaron F 提供的 launch.json 的奇怪问题。

".scripts" 在调试器命令行中给出这样的 url：

webpack-internal:///./src/app/app.component.ts (/home/user/my-dream-app/src/app/app.component.ts)
- webpack:/src/app/app.component.ts (/home/user/my-dream-app/src/app/webpack:/src/app/app.component.ts)

所以 VS Code 试图使用文件“/home/user/my-dream-app/src/app/webpack:/src/app/app.component.ts”（注意 webpack: 在中间）。

源映射不起作用，因为我的 Chrome 将 url 指定为“webpack:/”，并带有一个斜杠。

让它与这个 launch.json 一起工作：

{
    "version": "0.2.0",
    "configurations": [
        {
          "type": "chrome",
          "request": "launch",
          "name": "Launch Chrome with ng serve",
          "url": "http://localhost:4200/",
          "webRoot": "${workspaceRoot}",
          "sourceMapPathOverrides": { "webpack:/*": "${webRoot}/*" }
        }
      ]
}

得到正确的映射

webpack-internal:///./src/app/app.component.ts (/home/user/my-dream-app/src/app/app.component.ts)
- webpack:/src/app/app.component.ts (/home/user/my-dream-app/src/app/app.component.ts)

Ubuntu：16.04
铬：64.0.3282.186
VSCode：1.20.1
Angular CLI：1.7.2
节点：7.10.1

【讨论】：