CODEWITHSUNDEEP
visual-studio-codedebuggingvscode-debugger
Malix
Malix

Reputation: 71

How can I attach VS Code Debugger to a Chrome browser tab?

I want to attach the debugger to a chrome browser tab.

Tests

Content

I tested with this config: 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": [
        {
            "name": "Attach to Chrome",
            "type": "chrome",
            "request": "attach",
            "url": "https://en.wikipedia.org/wiki/A"
        }
    ]
}

But it doesn't work.

Error

Cannot connect to the target at localhost:0: Could not connect to debug target at http://localhost:0: Could not find any debuggable target

Upvotes: 3

Views: 3944

Answers (1)

starball
starball

Reputation: 51354

You need to run your chromium browser telling it to listen for debuggers on a specific port.

See the VS Code docs for attaching the debugger to browsers.

To attach to a running browser, it needs to be launched in a special debug mode. You can do this using the following command, replacing edge.exe with the path to your Edge or Chrome binary:

edge.exe --remote-debugging-port=9222 --user-data-dir=remote-debug-profile

Setting the --remote-debugging-port tells the browser to listen on that port for a debug connection. Setting a separate --user-data-dir forces a new instance of the browser to be opened; if this flag isn't given, then the command will open a new window of any running browser and not enter debug mode.

Next, add a new section to the vscode/launch.json file as below:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "msedge",
      "request": "attach",
      "name": "Attach to browser",
      "port": 9222
    }
  ]
}

Now, you can press F5 or the Start button in the Run and Debug view to attach to the running browser. You can even add a host property to debug a browser running on a different machine.

Related docs for the now-superseded Chrome debug extension: https://github.com/Microsoft/vscode-chrome-debug#attach.

Upvotes: 3

Related Questions