VSCode 调试器空白页面并在使用 VS Code 1.76.1 和 Chrome 111 启动时加载

Question

我在调试 Angular 应用程序时遇到 VS Code 调试器问题。我有一个由ng new命令生成的干净的 Angular 应用程序。我在该函数中添加了几行代码ngOnInit。
我想启动 chrome 调试器。浏览器启动成功，但应用程序未加载。我只能看到空白页面，加载程序仍在旋转，开发控制台完全是空的。请参阅随附的屏幕截图。
几天前一切都运转良好。该应用程序使用命令启动npm start，包 json 进行了唯一的修改 - host 更改为127.0.0.1。该应用程序在正常浏览器窗口中正常工作（无调试模式）。

我使用 macOS，最新的 macOS Ventura 版本。

有人可以帮忙解决这个问题吗？

这是我的launch.json文件：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://127.0.0.1:8080",
            "webRoot": "${workspaceFolder}",
        }
    ]
}

浏览器：
未加载 DOM，网络选项卡也为空（仅向 127.0.0.1 发出单个请求，但没有响应。

我已重新启动 VS Code，并安装了最新更新。操作系统也一样。我尝试过不同的角度应用程序，结果相同。我也尝试过与 8080 不同的端口，但没有成功。

Answer 1

这并不是一个很好的答案，但我在 WebStorm 上遇到了同样的问题，然后在 VSCode 上也遇到了类似的问题。在 VSCode 中，我删除了调试器会话中各处的所有断点，重新启动了调试会话，然后加载得很好。之后，我就可以添加初始加载后遇到的断点。

我相信这与新的 Chrome 更新有关。这是 JetBrains 一直在解决的问题的链接，它可能有助于更多地解释该问题，但对您最终解决该问题几乎没有帮助。

https://intellij-support.jetbrains.com/hc/en-us/community/posts/10432962465682-unable-to-debug-javascript-in-2022-3-2-ultimate-edition-with-chrome-111- on-mac-m1-arm-?page=1

Answer 2

原因

这可能是由 Chromium 调试器最近的更改引起的。请参阅问题 1421661：检测暂停事件中断 CDP 消费者中缺少调用帧。引用问题单描述：

一位 VS Code 工程师报告称，检测暂停 ( https://crrev.com/c/4174085 ) 中省略调用帧会破坏 VS Code，因为其处理程序不希望出现空堆栈跟踪。

由于这可能会影响其他 CDP 使用者，因此我们应该恢复并提出一种向后兼容的方法来避免创建昂贵的堆栈跟踪。

^{他们将回滚 Chromium v​​112 中的更改。}

扩展vscode-js-debug维护人员正在开发一个恢复版本来修复该问题。请参阅Chrome 111 断点不起作用 #1604。

解决方案

如果您遇到此问题，您有以下几种选择：

• 更新到 VS 代码 1.76.2。

• 尝试切换到扩展程序的夜间版本vscode-js-debug

• 切换到 VS Code insiders 1.77 也可能会解决该问题。

• 许多用户报告称，删除所有断点可以“解决”他们的问题，并且他们可以在删除重新加载调试会话后添加断点。

• ^{有些人发现删除相应的文件夹后问题就消失了workspaceFolders（我打赌可以通过删除有关断点的信息来解决问题，所以我建议不要采取这种核路线）。}