Old debug session preventing debugging in chrome with vs code

Question

When debugging in chrome using VS Code, I get the following warning from 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.

I can then click the "Debug anyway" button, which opens chrome, but it then crashes when I log into my app. The app works perfectly fine when not debugging.

I don't have any other instances of my app running so I don't understand this error. Has anyone come across this before?

I am running VS Code 1.49.0 along with the Debugger for Chrome extension v4.12.10. Firefox is my default browser but the debugger launches Chrome for debugging. My launch config is as follows:

{
    // 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}"
        }
    ]
}

I recently changed computer and this config worked on the previous one. Am I missing something? :-/

Answer 1

I had the same problem, and this was my workaround (though it's not a direct answer to your exact problem, it might help you and others to continue debugging with an alternative method provided by the same extension).

This debugging mode (attach mode), will let you debug an already open url, instead of "launching" the url.

Step 1:

Add in launch.json an "attach" configuration. Your config will look now like this:

{
// 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}"
    }
]
}

Step 2:

Close Chrome and reopen it with remote debugging enabled, following the instructions explained here in the Debugger for Chrome docs, depending on your OS:

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

I use Ubuntu, so I just executed in terminal:

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

Step 3:

In Chrome, open your desired url:

http://localhost:3000

Step 4:

Finally, in VS Code select and start the "Attach to Chrome" debugger.

This worked for me, I hope it also helps you.

Note: In this example we are using port 3000, because is the url used in the question, but it could be any url. It just need to be exactly the same url given in the url property of the configuration. If you navigated away from the original url, let's say to http://localhost:3000/page/ and you try to attach, it wont work.