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