旧的调试会话无法使用vs代码在Chrome中进行调试 第 1 步：第 2 步：第 3 步：第 4 步：

编程问答 2022-07-24

问题描述

使用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 @R_607_4045@ion,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}"
        }
    ]
}

我最近更换了计算机，并且此配置在上一台计算机上有效。我想念什么吗？ ：-/

解决方法

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

此调试模式（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,"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

第 3 步：

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

http://localhost:3000

第 4 步：

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

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

注意：在此示例中，我们使用端口 3000，因为 是问题中使用的 url，但它可以是任何 url。它只需要与配置的 url 属性中给出的 url 完全相同。如果您导航离开原始网址，例如对 http://localhost:3000/page/ 说，并且您尝试附加，它将不起作用。

javascript-debuggervisual-studio-code