旧的调试会话阻止使用 vs 代码在 chrome 中进行调试

Posted 2023-02-22

【中文标题】旧的调试会话阻止使用 vs 代码在 chrome 中进行调试

【英文标题】：Old debug session preventing debugging in chrome with vs code

【发布时间】：2021-01-03 03:49:50

【问题描述】：

使用 VS Code 在 chrome 中调试时，我从 Chrome 收到以下警告：

看起来浏览器已经从旧的调试会话运行。请在尝试调试前关闭它，否则 VS Code 可能无法连接到它。

然后我可以单击“仍然调试”按钮，该按钮会打开 chrome，但是当我登录我的应用程序时它会崩溃。该应用在不调试时运行良好。

我的应用程序没有任何其他实例正在运行，所以我不明白这个错误。有没有人遇到过这种情况？

我正在运行 VS Code 1.49.0 以及 Debugger for Chrome 扩展程序 v4.12.10。 Firefox 是我的默认浏览器，但调试器会启动 Chrome 进行调试。我的启动配置如下：

    // 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": "pwa-chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:3000",
            "webRoot": "$workspaceFolder"
        
    ]

我最近更换了电脑，这个配置在之前的电脑上工作。我错过了什么吗？ :-/

【问题讨论】：

看到相同 - 在我的情况下没有更改计算机或配置，只是 VSCode 更新......

看到完全相同 - 登录时 chrome 崩溃。它曾经可以工作，但是当本月 VS 自动更新时停止工作。

我刚刚安装了 vs code 1.50 9 月更新，其中包括一些新的调试器功能，我可以在 chrome 中再次调试。 ¯_(ツ)_/¯

我有 1.52 版的 VS Code，我有这个错误。

Windows 10 更新后突然出现这里：Version 10.0.19042 version 19042

【参考方案1】：

我遇到了同样的问题，这是我的解决方法（虽然它不是您确切问题的直接答案，但它可能会帮助您和其他人继续使用同一扩展提供的替代方法进行调试）。

这种调试模式（attach 模式）可以让你调试一个已经打开的 url，而不是“启动”这个 url。

第 1 步：

添加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": "pwa-chrome",
        "request": "launch",
        "name": "Launch Chrome against localhost",
        "url": "http://localhost:3000",
        "webRoot": "$workspaceFolder"
    ,
    
        "name": "Attach to Chrome",
        "type": "pwa-chrome",
        "request": "attach",
        "port": 9222,
        "url": "http://localhost:3000",
        "webRoot": "$workspaceFolder"
    
]

第 2 步：

关闭 Chrome 并在启用远程调试的情况下重新打开它，按照Debugger for Chrome docs 中的说明进行操作，具体取决于您的操作系统：

窗户：

右键单击 Chrome 快捷方式，然后选择属性 在“目标”字段中，附加 --remote-debugging-port=9222 或者在命令提示符下，执行 /chrome.exe --remote-debugging-port=9222

macOS

在终端中，执行 /Applications/Google Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

Linux

在终端中，启动 google-chrome --remote-debugging-port=9222

我使用的是 Ubuntu，所以我只是在终端中执行：

$ google-chrome --remote-debugging-port=9222

第三步：

在 Chrome 中，打开您想要的网址：

http://localhost:3000

第四步：

最后，在 VS Code 中选择并启动“Attach to Chrome”调试器。

这对我有用，我希望它对你也有帮助。

注意：在此示例中，我们使用端口 3000，因为问题中使用的是 url，但它可以是任何 url。它只需要与配置的 url 属性中给出的完全相同的 url。如果您离开了原始网址，比如http://localhost:3000/page/，然后您尝试附加，它将无法正常工作。

【参考方案2】：

对我来说，解决这个问题的方法是卸载“Debugger for Chrome”扩展。

此扩展似乎已被弃用，因为 Visual Studio Code 现在具有包含相同功能的捆绑 javascript 调试器。它是调试 Node.js、Chrome、Edge、WebView2、VS Code 扩展等的调试器。您可以安全地卸载此扩展程序，您仍然可以使用您需要的功能。