Chrome DevTools frontend

PATCHED TO OPEN FILES IN VSCOD{IUM,E}

Disclaimer: This is in a hacked-together Proof-of-concept state. YMMV

Clicking on Filenames in the console will open the location via vscodium://file/project/path:

Screencast

Setup

1. Download latest release.zip:
2. Unzip to a location of your choice: unzip release.zip -d ~/.vscode/ (unzips to ~/.vscode/devtools-frontend/)
3. In your project, add .vscode/devtools-editor-config.json:

   {
     "urlHandler": "vscodium",
     "appCodeURLs": [
       {
         "match": "http://localhost:8080/",
         "replace": ""
       }
     ]
   }

4. Add to your .vscode/launch.json the chrome arg

   --custom-devtools-frontend=file://${env:HOME}/.vscode/devtools-frontend/
   

   example:

     {
         "version": "0.2.0",
         "configurations": [
             {
                 "type": "chrome",
                 "runtimeExecutable": "custom",
                 "request": "launch",
                 "name": "Frontend",
                 "url": "http://localhost:3000",
                 "webRoot": "${workspaceFolder}",
                 "userDataDir": "${env:HOME}/.vscode/chrome-data",
                 "runtimeArgs": [
                     "--custom-devtools-frontend=file://${env:HOME}/dev/stuff/devtools-frontend/"
                 ],
                 "sourceMaps": true,
                 "timeout": 5000,
             }
         ]
     }

5. Launch chromium
6. Open Devtools
7. In devtools settings, add your project directory as Workspace (the directory must contain .vscode/devtools-editor-config.json file)
8. Workaround for #1:
   1. undock devtools
   2. re-dock (optional)

Config details

• urlHandler - which url is handled by your instance, e.g.: vscode, vscodium, vscode-insiders
• appCodeURLs - configure how to transform URLs so that they point to the file relative to your workspace root, rules are applied in order, so put more specific rules first
  • match - which URLs to match (you see it when hovering over the filename in console)
  • replace - replace the matched part so that the path points to the file relative from your workspace root, no trailing slash
• (optional) workspacePath - if, for any reason, you need to overwrite the workspace path ¯\(ツ)/¯

ORIGINAL README:

The client-side of the Chrome DevTools, including all JS & CSS to run the DevTools webapp.

Source code

The frontend is available on chromium.googlesource.com.

Design guidelines

Please be aware that DevTools follows additional development guidelines.

Issue triage

The issue triage guidelines can be found in docs/triage_guidelines.md.

Workflows

Instructions to set up, use, and maintain a DevTools frontend checkout can be found in docs/workflows.md.

Additional references

• DevTools documentation: devtools.chrome.com
• Debugging protocol docs and Chrome Debugging Protocol Viewer
• awesome-chrome-devtools: recommended tools and resources
• Contributing to DevTools: bit.ly/devtools-contribution-guide
• Contributing To Chrome DevTools Protocol: docs.google.com
• DevTools Design Review Guidelines: design_guidelines.md

Source mirrors

DevTools frontend repository is mirrored on GitHub.

DevTools frontend is also available on NPM as the chrome-devtools-frontend package. It's not currently available via CJS or ES modules, so consuming this package in other tools may require some effort.

The version number of the npm package (e.g. 1.0.373466) refers to the Chromium commit position of latest frontend git commit. It's incremented with every Chromium commit, however the package is updated roughly daily.

Getting in touch

• All DevTools commits: View the log or follow @DevToolsCommits on Twitter
• All open DevTools tickets on crbug.com
• File a new DevTools ticket: new.crbug.com
• Code reviews mailing list: devtools-reviews@chromium.org
• @ChromeDevTools on Twitter
• Chrome DevTools mailing list: groups.google.com/forum/google-chrome-developer-tools