If you are building an extension for Google Chrome, there is a way to use Chrome debugger for VS Code to debug your extension without leaving the editor.

If you are just debugging a normal webapp instead of a Chrome extension, see this Medium post by Kenneth Auchenberg on how to live edit and debug your React apps directly in VS Code

The launch.json

  • You need to enter your extension ID in the url field
  • It launches Chrome, loads your extension, and opens a tab to your extension’s popup.html
    • If you have a different filename for your popup, you might want to change that as well
  • To debug background script, change the HTML to _generated_background_page.html (unless you have a background HTML)
  • To debug the context script, just change the URL to any url like https://stackoverflow.com
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "chrome-extension://YOUR_EXTENSION_ID/popup.html",
      "webRoot": "${workspaceRoot}/src",
      "userDataDir": "${workspaceRoot}/.vscode/.chrome",
      "sourceMaps": true,
      "pathMapping": {
        "/": "${workspaceRoot}/dist"
      },
      "sourceMapPathOverrides": {
        "webpack:///./node_modules/*": "${workspaceRoot}/node_modules/*",
        "webpack:///./src/*": "${workspaceRoot}/src/*"
      }
    }
  ]
}

Here is my build setup

  • Source in src folder
  • Dist in dist folder
  • The popup HTML is in dist/popup.html

build-setup

The extension ID

Still, with this method, you have to look up your extension ID first. The extension ID is generated based on the hash of the path of dist, so as long as you don’t move the dist folder around, it will be the same.

You still need to load the extension once you start Chrome

  • Go to chrome://extensions
  • Load unpacked extensions

Once it’s set up, you can press F5 and start debugging right away.

Happy debugging! 🎉