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

Posted 2023-02-22

【中文标题】使用 Visual Studio Code 进行调试不起作用

【英文标题】：Debug with Visual Studio Code not working

【发布时间】：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”。

从在 ***/github 问题上找到的其他答案中，我了解到我可能必须在尝试这样做之前杀死所有 chrome 实例，所以我只需关闭 chromium 并运行 killall chromium-browser。

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

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

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

但它不会改变任何东西。

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

感谢您的帮助！

PS：一些相关的***问题和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，我什么也看不到。 （“本地主机未授权连接”）。

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

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 ***.com/questions/42495655/…

【参考方案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