使用 Visual Studio 代码进行调试无效

Question

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

这是我的环境：

OS: 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 徽标，然后通过 selecting 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 项目运行ning :

ng serve

启动后，在 VSC 中我 select : "Launch Chrome against localhost, with sourcemaps".

然后，我收到以下错误：
"Can't find chrome : Install it or set the runtimeExecutable field in the launch config."

所以我设置：
"runtimeExecutable": "chromium-browser"
（正如我所做的那样没有有 chrome 但铬在我的 Ubuntu 上）。

Angular-cli 启动应用程序的默认端口是 4200。将 url 更改为：“http://localhost:8080" to "http://localhost:4200”。

现在浏览器正在打开应用程序，但 VSC 出现以下错误： "Cannot connect to runtime process, timeout after 10000 ms - (reason: Cannot connect to the target: connect ECONREFUSED 127.0.0.1:9222".

根据在 Whosebug/github 问题上找到的其他答案，我读到我可能必须在尝试这样做之前杀死所有 chrome 个实例，所以我只关闭 Chromium 和运行 killall chromium-browser.

我再次尝试运行调试：与之前相同的错误（无法连接）。

我还看到以下论点可能有帮助：

"runtimeArgs": [
  "--remote-debugging-port=9222",
  "--user-data-dir"
]

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

我决定为我的打字稿开发人员（主要是 angular2）使用 VSC，这种调试方式似乎非常强大。我有一种感觉，不使用它太糟糕了:)。

感谢您的帮助！

PS：一些相关的 Whosebug 问题和 github 问题：
-
- 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 代码控制台中获取调试信息的方法！所以它还不完美，因为断点不起作用，但事情就是这样。到目前为止，如果我打开 http://localhost:9222，我什么也看不到。 ("localhost doesn't authorized the connection").

但是，如果我像那样启动铬：

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

重要的是要注意这个论点：--user-data-dir=remote-profile。如果你只是通过 --user-data-dir 它会启动一个新的 window 没有任何连接。但这还不够。您需要将 remote-profile 作为值传递。

它打开一个新的浏览器window
我打开 http://localhost:4200 我也可以到达 http://localhost:9222 !
我可以使用 "Attach to chrome with source map" 选项连接 VSC！（如您所见，我确实在控制台中显示了 "Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode."，并且页脚现在具有橙色背景）

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

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

Answer 1

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

对于那些感兴趣的人：

（在 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" 的部分，因为我需要启动一个新的浏览器 window。

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

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

在新的window中，访问http://localhost:4200.

然后从 VSC，运行调试。

一切正常，您应该可以使用断点:)

GIF 可在此处查看实际效果：http://hpics.li/0156b80

Answer 2

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

你用 --user-data-dir=remote-profile 命中了第一个：如果你已经运行宁 Chrome （例如，已经打开了标签 - 谁没有？），你必须使用不同的 userDataDir 才能让 Chrome 启动独立实例。
然而，正确的方法是将 "userDataDir": "${workspaceRoot}/.vscode/chrome", 添加到 launch.json 配置（见下文）。这需要一个路径。如果使用 'remote-profile'，它会尝试查找名为 'remote-profile'.
您需要在 launch.json 配置中设置 sourceMapPathOverrides，其值取决于您的 OS:
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 代码中按 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

Answer 3

类似于，我在 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}/*"
            }
        }
    ]
}

Answer 4

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

调试器命令行中的

".scripts" 给出如下 urls：

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
Chrome: 64.0.3282.186
VSCode: 1.20.1
Angular命令行界面：1.7.2
节点：7.10.1

Answer 5

我在 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/*",
            }
        }
    ]
}

Answer 6

以下配置适用于我在 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/*"
      }
    }
  ]
}

Answer 7

我在使用 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。

Answer 8

您只需要为 Chrome 扩展安装调试器。

Answer 9

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

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

在 vs 代码中）

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

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

如果你运行 ng 测试，你会在控制台中看到一些信息，比如 Chrome 是运行ning，并且页面将在浏览器中打开 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，所以更新后的数组将如下所示，浏览器：['Chrome'、'ChromeHeadless']、

现在运行 ng 测试你在控制台 chrome 和 chrome 都没有头运行ning,

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

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

Answer 10

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}/*" }
        }
      ]
}

使用 Visual Studio 代码进行调试无效

Debug with Visual Studio Code not working

google-chrome-devtools

visual-studio-code

angular-cli

angular