Debug Chrome Extensions with Visual Studio Code

Question

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.

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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...