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? :-/

Attention

Seeing the same - no change of computer or config in my case, just a VSCode update... – Solley

Seeing the exact same - chrome crashes on login. It used to work, but stopped working when VS auto updated this month. – Length

I have just installed the vs code 1.50 september update which includes some new debugger features and I can debug again in chrome. ¯_(ツ)_/¯ – Attention

I've version 1.52 of VS Code, and I've this error. – Grew

Same here all of a sudden after Windows 10 update: Version 10.0.19042 version 19042 – Lyndsaylyndsey

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.

Overstay

Answer 2

It happens to me and I just click debug anyway. it will open new session. In the callstack it also show 2 debug session, just kill them all, and launch again. Everything will be normal

It happen because my chrome is not close correct (window hang)

Footrest

Answer 3

For me, what solved this issue was uninstalling the "Debugger for Chrome" extension.

It appears that this extension has been deprecated as Visual Studio Code now has a bundled JavaScript Debugger that covers the same functionality. It is a debugger that debugs Node.js, Chrome, Edge, WebView2, VS Code extensions, and more. You can safely un-install this extension and you will still be able to have the functionality you need.

Glockenspiel

Answer 4

I'm using Mac, but hopefully this also works on Windows using the task manager. Similar to some of the other answers, I did the following and it worked for me:

1. Try running from VS Code and click "Debug Anyway" from the error message.
2. Hold Command-Option-Escape to bring up the "Force Quit Applications" window.
3. Select the instance of Chrome that just opened from choosing "Debug Anyway"
4. Click Force Quit
5. Run from VS Code again.

Hopefully this helps.

Caesar

Answer 5

The following workaround worked for me on mac with vscode 1.91.1:

• close vscode
• open the terminal
• go to cd ~/Library/Application\ Support/Code/User/workspaceStorage/
• you probably have several folders inside workspaceStorage with different “workspaceId”
• find the folder “ms-vscode.js-debug”: find ./ -type d -name "ms-vscode.js-debug"
• I found just one folder, something like this .//ef9caeb1e7f124b93d5ec52c7410aafb/ms-vscode.js-debug
• before deleting you could back it up
• after backing up delete the “ms-vscode.js-debug” folder: rm -rf ef9caeb1e7f124b93d5ec52c7410aafb/ms-vscode.js-debug/
• open vscode and launch the debugger again

Norway

Answer 6

I've faced the same issue recently and the problem was that I just forgot to run the following command: ng s.

You need to run that because it helps you build and deploy the project and only then it makes sense starting the debugger.

It might sound like the most obvious thing to do but just make sure you're doing it before spending a whole hour trying to figure it out like I did :)

Thrombosis

Answer 7

I ran into this issue with Edge. When I clicked "Debug Anyway" on the initial prompt, got a message saying it couldn't attach to the browser.

Shut down VS Code and all Edge instances (except the ones you just can't kill through Task Manager). After restarting VS Code, same result.

Rebooting worked, but ... something is wrong when you have to do that.

Solidify