visual-studio-code - 旧的调试 session 阻止在 chrome 中使用 vs 代码进行调试

Question

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

It looks like a browser is already running from an old debug session. Please close it before trying to debug, otherwise VS Code may not be able to connect to it.

然后我可以单击“无论如何调试”按钮，这会打开 chrome，但是当我登录到我的应用程序时它会崩溃。该应用程序在不调试时运行良好。
我的应用程序没有任何其他实例正在运行，所以我不明白这个错误。有没有人遇到过这个？
我正在运行 VS Code 1.49.0 以及 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}"
        }
    ]
}

我最近换了电脑，这个配置适用于上一个。我错过了什么吗？ :-/

Answer 1

我遇到了同样的问题，这是我的解决方法(虽然它不是您确切问题的直接答案，但它可能会帮助您和其他人继续使用同一扩展提供的替代方法进行调试)。
这种 Debug模式( 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 中解释的说明进行操作，取决于您的操作系统:

Windows:

• Right click the Chrome shortcut, and select properties
• In the "target" field, append --remote-debugging-port=9222 Or in a command prompt, execute /chrome.exe --remote-debugging-port=9222

macOS

• In a terminal, execute /Applications/Google
  Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

Linux

• In a terminal, launch google-chrome --remote-debugging-port=9222

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

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

第 3 步:
在 Chrome 中，打开您想要的网址:

http://localhost:3000

第四步:
最后，在 VS Code 中选择并启动“Attach to Chrome”调试器。
这对我有用，我希望它也能帮助你。
注:在此示例中，我们使用端口 3000，因为 是问题中使用的 url，但它可以是任何 url。它只需要是 完全相同的网址 在配置的 url 属性中给出。如果您导航离开原始 url，让我们说 http://localhost:3000/page/你尝试附加，它不会工作。