CODEWITHSUNDEEP
javascriptdebugginggoogle-chrome-extensionvisual-studio-code
GabeMeister
GabeMeister

Reputation: 1868

Debug Chrome Extensions with Visual Studio Code

Does anyone know if it's possible to debug a Chrome Extension with Visual Studio Code? All the examples I've read involve a real web page with a url.

Upvotes: 32

Views: 16779

Answers (4)

Hans5958
Hans5958

Reputation: 426

For those who still finding the answer (like me, earlier), I have found the real solution and here's it is. This assumes that you have Debugger for Chrome already installed.

Instead of having native configuration support like Firefox does, you need to supply arguments to load the extension before running Chrome, specifically the load-extension argument.

Add this line inside your Chrome configuration object with the launch request, located on your .vscode/launch.json file. This assumes that your manifest.json file is directly on the workspace folder. If your manifest.json file is located in another folder, change the ${workspaceFolder} accordingly.

{
    "runtimeArgs": ["--load-extension=${workspaceFolder}"]
}

For example, this is how I do it on the launch.json file in my workspace.

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome",
            "url": "https://example.com/#this-could-be-anything",
            // Here it is!
            "runtimeArgs": ["--load-extension=${workspaceFolder}"]
        },
        { 
            // Firefox equivalent
            "type": "firefox",
            "request": "launch",
            "name": "Launch Firefox",
            "url": "https://example.com/#this-could-be-anything",
            "addonPath": "${workspaceFolder}"
        }
    ]
}

Upvotes: 31

Dan Ortega
Dan Ortega

Reputation: 1899

Yes it works, it is possible to debug the extension ...

Using Debugger for Chrome extension ..

First make sure you have all chrome windows closed ... and configure an "Attach" debugging option like the following ...

  {
     "type": "chrome",
     "request": "attach",
     "name": "Attach to Chrome",
     "port": 9222,
     "webRoot": "${workspaceFolder}/src", <-- path to the root of the extension
     "url": "https://calendar.google.com/calendar/r" <-- Replace with the url (public or private) on which you want to debug your extension ...
      // IMPORTANT this url must exactly match the one in the address bar of the browser ..
  }

Then open chrome with the following command:

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

... then navigate to the url on which you want to debug your extension ...

... and finally, and only then ... Start your debugging session on vscode ...

Upvotes: 6

Roman Vedmediuk
Roman Vedmediuk

Reputation: 19

Unfortunately, at this moment Google Chrome Extension can be debugged only using Chrome DevTool. ... -> More Tools -> Extensions -> Your extension -> Inspect views background page

Regarding vscode-chrome-debug:

Supported features

  • Setting breakpoints, including in source files when source maps are enabled
  • Stepping, including with the buttons on the Chrome page
  • The Locals pane
  • Debugging eval scripts, script tags, and scripts that are added dynamically
  • Watches
  • Console

Unsupported scenarios

  • Debugging web workers
  • Debugging Chrome extensions
  • Any features that aren't script debugging

Upvotes: 1

Magnus
Magnus

Reputation: 788

You can debug extension code running on a web page using the attach option .

{
    "type": "chrome",
    "request": "attach",
    "name": "Chrome Extension debugging",
    "port": 9222,
    "url": "<URL>",
    "webRoot": "${workspaceFolder}/extension"
}

Remember to close any open instances of Chrome before starting Chrome in debug mode:

.\chrome.exe --remote-debugging-port=9222

More information can be found here: vscode-chrome-debug on GitHub

Upvotes: 6

Related Questions