Cannot debug in VSCode by attaching to Chrome

vscode-chrome debugger not working
vscode attach to chrome
cannot find debug adapter for type'': chrome
vscode-chrome debugger localhost refused to connect
chrome enable remote debugging
vscode debug headless chrome
visual studio code launch chrome
configured debug type 'chrome' is not supported

I have default config in launch.json, the site runs on port 8080

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceRoot}"
        },
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to Chrome",
            "port": 9222,
            "webRoot": "${workspaceRoot}"
        }
    ]
}

However when I click on Debug button, I get this error:

Cannot connect to the target: connect ECONNREFUSED 127.0.0.1:9222

Question1: why VSCode assigns port 9222 when creating this json

What is so special about this port that MS decided to put it in this launch.json?

Question2: What do I need to change to make things work.

The Launch debug always launches a new window. I am asking specifically about Attach debug option, so that it will open in a new tab instead.

Thanks.

  1. You need to install Debugger for Chrome extension for this to work. Open extensions in VS Code and search for Debugger for Chrome

  2. You need to run a web server on the URL specified in the first configuration (default to http://localhost:8080). I use serve npm package that I installed globally. From my app folder I run serve -p 8080

  3. Select Launch Chrome against localhost option. It will launch the browser and you can set breakpoints in your code and the debugging should work.

Regarding the second configuration (Attach to Chrome). There's nothing special about the port. In order to attach to Chrome you need to run Chrome with remote debugging enabled on port specified in the config. For example chrome.exe --remote-debugging-port=9222. I personally never use this options. Just follow the three steps above and you should be fine.

Introducing Chrome Debugging for VS Code, vscode directory with a launch.json file. Configurations. There are two kinds of Chrome debugging configurations: launch and attach . You can set  I have VSCode debug working if I 'launch' the app. (the app is just the angular.io 'hero' tutorial) However: launching is not a serious option as it does not allow to have any other web page open in Chrome. 'Attach' is therefore the better option. But I just don't understand how that works. Documentation says: You must launch Chrome with remote

When using the configuration url, vscode will search for a tab with the EXACT url and attach to it if found.

Use the configuration urlFilter which can have wildcards like *, to attach the debugger to any sub route in your url.

e.g. "urlFilter": "http://localhost:4200/*"

The complete exacts steps to take:

  1. configure your lanch.json file to looks something like this:

    {
      "version": "0.2.0",
      "configurations": [
        {
          "type": "chrome",
          "request": "attach",
          "name": "Attach to Chrome",
          "port": 9222,
          "urlFilter": "http://localhost:4200/*",
          "webRoot": "${workspaceFolder}"
        }
      ]
    }
    
  2. Close all opened chrome instances (make sure that all of them are killed using task manager in windows).

  3. Lunch chrome with the following parameter: --remote-debugging-port=9222

    make sure that the port in this parameter is the same as the one configured in 'port' property of the attache to chrome configuration in the lunch.json file (like the example above)

  4. Navigate to your site. In this example http://localhost:4200

  5. Run 'Start debugging' in vscode.

How to set up the debugger for Chrome extension in Visual Studio , VS Code - Debugger for Chrome. Debug your JavaScript code running in Google Chrome from VS Code. vsts Marketplace bagde Release. A VS Code  This configuration attaches the debugger to a running instance of Chrome. But in order for this option to work, you need to launch Chrome with remote debugging enabled. Launching a Chrome instance with remote debugging varies depending on your OS. Windows. There are two ways to launch Chrome with remote debugging in Windows.

microsoft/vscode-chrome-debug: Debug your JavaScript , I have made 0 changes, but yesterday when I was debugging it worked. and now I cannot run it without the error in the title (screenshot below in the task manager, Chrome Debugger will not attach and update the url. In your Brave browser, under "chrome://settings/privacy", enable the "Remote debugging" option. Restart your browser. If not done yet, add to your launch.json file this (adjust your path if it is not the same)

Peek into Task Manager. You may have Chrome instances hanging there. Only after killing them will you be able to run the remote and successfully start the debugger. Worked for me.

microsoft/vscode-chrome-debug, How do I install Chrome debugger in Visual Studio code? @mukeshselvaraj The last time recall an issue similar to that was when trying to debug in chrome's debugger tools after attaching in vscode. vscode and chrome debugger (in-browser) are mutually exclusive. I'd need to look deeper and try to recreate the problem after work.

I will put my measly two cents in :) unfortunately or fortunately I had a similar problem and the above post pointed me in the right direction and I learned a little something along the way. Please see my notes below:

1) If you are on Linux, after starting vsCode run the following Linux command:

sudo lsof -i -P -n | grep LISTEN

this will allow you to see what ports are being used, in my case you can see code on 5500.

2) Assuming you have some test html/js code and vsCode has a server and debugger installed then the following files need to be configured as such:

code-workspace file:
/*
Workspace settings override user settings.
https://code.visualstudio.com/docs/getstarted/settings
Check to see if needed ports are listening: sudo lsof -i -P -n | grep LISTEN
*/

{
    "folders": [
        {
            "path": "."
        }
    ],
    "settings": {
        "liveServer.settings.AdvanceCustomBrowserCmdLine": "google-chrome-stable --remote-debugging-port=9222",
    }
}
launch.json:
{
/*
Workspace settings override user settings.
https://code.visualstudio.com/docs/getstarted/settings
Check to see if needed ports are listening: sudo lsof -i -P -n | grep LISTEN
*/
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch 127.0.0.1:5500",
            "type": "chrome",
            "request": "launch",
            "url": "http://127.0.0.1:5500/${relativeFileDirname}/${fileBasename}",
            "webRoot": "${workspaceFolder}/${relativeFileDirname}"
        },
        {
            "name": "Attach 127.0.0.1:5500",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "url": "http://127.0.0.1:5500/${relativeFileDirname}/${fileBasename}",
            "webRoot": "${workspaceFolder}/${relativeFileDirname}/"
        },
    ]
  }
setting.json:
/*
Workspace settings override user settings.
https://code.visualstudio.com/docs/getstarted/settings
Check to see if needed ports are listening: sudo lsof -i -P -n | grep LISTEN
    */

    {
        "cSpell.language": "en",
        "git.enableSmartCommit": true,
        "git.autofetch": true,
        "[html]": {
            "editor.defaultFormatter": "vscode.html-language-features"
        },
        "liveServer.settings.donotShowInfoMsg": true,
        "cSpell.userWords": [
            "lsof",
            "readonly"
        ],
        "[javascript]": {
            "editor.defaultFormatter": "esbenp.prettier-vscode"
        },
        "cSpell.enabledLanguageIds": [
            "asciidoc",
            "c",
            "cpp",
            "csharp",
            "css",
            "git-commit",
            "go",
            "handlebars",
            "haskell",
            "html",
            "jade",
            "java",
            "javascript",
            "javascriptreact",
            "json",
            "jsonc",
            "latex",
            "less",
            "markdown",
            "php",
            "plaintext",
            "pug",
            "python",
            "restructuredtext",
            "rust",
            "scala",
            "scss",
            "text",
            "typescript",
            "typescriptreact",
            "yaml",
            "yml"
        ],
    }

3) NOTE make sure all browsers are closed before starting up the 'Live Server'. Spin-up your server 'Live Server'to open the file you would like to debug as per the configuration for the chrome browser stipulated in the vsCode File>Preferences>Settings, NOTE use 127.0.0.1 I had no luck with localhost, also the default port is 5500. The browser is now launched as per the vsCode-workspace file setting "liveServer.settings.AdvanceCustomBrowserCmdLine": "google-chrome-stable --remote-debugging-port=9222", this is where the debug magic takes place. NOTE make sure all browsers are closed before starting up the 'Live Server'. Especially check to make sure there are no chrome extension like Hangouts running, this will also prevent Chrome from opening port 9222, I had to click the Exit option on the task to kill all Chrome extension in my example:

4) Now if you run sudo lsof -i -P -n | grep LISTEN you will see vsCode 'Live Server' serving on port 127.0.0.1:5500 and the debugger doing its thing on port 127.0.0.1:9222; If you do not see both ports opened then something is not correct and you will need to confirm STEP 3) listed above.

5) You can check the web interface for the debugger by entering http://127.0.0.1:9222/ in a empty browser tab, this url will display links to every tab and extensions open and allow you to poke around with the debugger, click on the link to the file you want to debug, in my case 127.0.0.1:5500/Leason_66/index.html, this is the port and link vsCode will communicate with and re-render in the IDE Debugger.

6) Note: Make sure you are on the file you want to debug. We are almost there, now just click on the Debug Icon then go to the GREEN Play Button and select the attach option from the drop down, please note the information configured in the launch.js file is what will appear in the drop down.

7) Time for some action! Now all you have to do is click on the GREEN Play Button and the Debugger will now attach to tab you have open at 127.0.0.1:5500/<path you your file> and do its debug on port 127.0.0.1:9222

8) Happy Engineering :)

Cannot launch Chrome Debugger after latest update · Issue #45600 , extension. You'll then create a launch-configuration file which we explain in detail in our README right here. If you for example have a breakpoint in a render function that runs on page load, sometimes our debugger might not be attached to Chrome before the code has been executed. This means that you will have to refresh the page in Chrome after we have attached from VS Code to hit your breakpoint.

Cannot launch Chrome Debug configuration in Vscode · Issue #910 , Issue Type: Bug I can no longer launch or attach to the Chrome debugger process after the latest VSCode update. When I open the dev tools I  The renderer debugging process was not working correctly, even though it was mapping fine in the electron shell chrome debugger. Setting the overrides like this worked properly for attaching VSCode to the renderer process of the launched electron shell.

How To Debug JavaScript with Google Chrome DevTools and , VS Code Version: 1.37.0 Chrome : 76.0.3809.100 Node.js : 10.16.0 OS : Windows 10 Profesionnal (64 bits) VS Code extension: 4.11.7 Log file  Supporting source maps also enables debugging of TypeScript straight from VS Code. For now, Chrome needs to be started with remote debugging enabled, and only supports one concurrent connection. This means if you open up DevTools inside Chrome, the connection to VS Code will get terminated by Chrome.

Setting up JavaScript Debugging in Visual Studio Code, How To Debug JavaScript with Google Chrome DevTools and Visual Studio Code The latest version of Visual Studio Code installed on your machine. By adding a variable to the Watch tab, each time you hit a breakpoint,  One of the key features of Visual Studio Code is its great debugging support. VS Code's built-in debugger helps accelerate your edit, compile and debug loop. Debugger extensions. VS Code has built-in debugging support for the Node.js runtime and can debug JavaScript, TypeScript, or any other language that gets transpiled to JavaScript.

Comments
  • Adding * in the URL fixed this for me. Thanks for the pointer.
  • This is the answer I have waited for a long time. Thanks. To me worked with url either.
  • Using urlFilter instead of url worked for me. Here is the docs on this topic github.com/Microsoft/…
  • Thanks for "urlFilter"!
  • (make sure that all of them are killed using task manager in windows). worked for me
  • Best answer. I should also add that the "url" field should be set to whatever your page address is when open. The debugger tries to find the exact match in your browser tab. I was working with vue.js and the default url "http://localhost:8080/" does not work, it should be "http://localhost:8080/#/".