VSCode DevTools for Chrome

A VSCode extension to host the chrome devtools inside of a webview.

If you are looking for a more streamlined and officially supported devtools extension, you should try VS Code - Elements for Microsoft Edge (Chromium)

Attaching to a running chrome instance:

Launching a 'debugger for chrome' project and using screencast:

Using the extension

Launching as a Debugger

You can launch the Chrome DevTools hosted in VS Code like you would a debugger, by using a launch.json config file. However, the Chrome DevTools aren't a debugger and any breakpoints set in VS Code won't be hit, you can of course use the script debugger in Chrome DevTools.

To do this in your launch.json add a new debug config with two parameters.

type - The name of the debugger which must be devtools-for-chrome. Required.
url - The url to launch Chrome at. Optional.
file - The local file path to launch Chrome at. Optional.
request - Whether a new tab in Chrome should be opened launch or to use an exsisting tab attach matched on URL. Optional.
name - A friendly name to show in the VS Code UI. Required.

{
    "version": "0.1.0",
    "configurations": [
        {
            "type": "devtools-for-chrome",
            "request": "launch",
            "name": "Launch Chrome DevTools",
            "file": "${workspaceFolder}/index.html"
        },
        {
            "type": "devtools-for-chrome",
            "request": "attach",
            "name": "Attach Chrome DevTools",
            "url": "http://localhost:8000/"
        }
    ]
}

Launching Chrome manually

Start chrome with no extensions and remote-debugging enabled on port 9222:
- chrome.exe --disable-extensions --remote-debugging-port=9222
Open the devtools inside VS Code:
- Run the command - DevTools for Chrome: Attach to a target
- Select a target from the drop down

Launching Chrome via the extension

Start chrome:
- Run the command - DevTools for Chrome: Launch Chrome and then attach to a target
- Navigate to whatever page you want
Open the devtools inside VS Code:
- Select a target from the drop down

Known Issues

Prototyping stage
Having the DevTools in a non-foreground tab can cause issues while debugging
- This is due to VS Code suspending script execution of non-foreground webviews
- The workaround is to put the DevTools in a split view tab so that they are always visible while open
Chrome browser extensions can sometimes cause the webview to terminate

Developing the extension itself

Start chrome with remote-debugging enabled on port 9222
- chrome.exe --disable-extensions --remote-debugging-port=9222
Run the extension
- npm install
- npm run watch or npm run build
- Open the folder in VSCode
- F5 to start debugging
Open the devtools
- Run the command - DevTools for Chrome: Attach to a target
- Select a target from the drop down

cereschen/vscode-devtools