Skip to content

Instantly share code, notes, and snippets.

@rshaker
Created March 25, 2023 23:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rshaker/628773b7c1082fda67b33b7e1dde736e to your computer and use it in GitHub Desktop.
Save rshaker/628773b7c1082fda67b33b7e1dde736e to your computer and use it in GitHub Desktop.
Remote debugging Chrome extension from Visual Studio Code

On Mac, launch browser using a dedicated profile. This will create directory remote-profile in cwd.

% /Applications/GoogleChrome.app/Contents/MacOS/GoogleChrome --remote-debugging-port=9222 --user-data-dir=remote-profile

DevTools listening on ws://127.0.0.1:9222/devtools/browser/1f9619a3-abe2-449b-a81e-dde827123e20

Make sure that webroot points to the webpack-built distribution of your extension that's loaded by the browser.

    {
        "name": "Attach to Chrome",
        "port": 9222,
        "request": "attach",
        "type": "chrome",
        "webRoot": "${workspaceFolder}/dist/chrome"
    }

Multi-client debugging support is available for things like puppeteer. A chromium bug previously prevented this functionality.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment