What if… you could use Visual Studio Code as the editor of in-browser Developer Tools?

Bridging the Edit Loop: VS Code Inside Browser DevTools

Front-end work often means bouncing between two places — tweaking styles in DevTools, then copying those fixes into your editor to make them permanent. It works, but it isn’t exactly a smooth ride. A recent experiment from Chris Heilmann points at a possible shortcut: plugging Visual Studio Code directly into browser DevTools, so the editing you do in one place shows up in the other.

Don’t expect this in a stable release just yet. The setup relies on an experimental feature that currently works with Microsoft Edge. Heilmann’s video demonstrates the practical steps: switch on the experimental flag, connect VS Code to DevTools, grant the tools write access to your project files, and then inspect a page served from a local URL.

Once connected, the back-and-forth becomes two-way.

• Edits made in DevTools are written straight to your source files in VS Code.
• Changes saved in VS Code refresh instantly in the browser.
• From DevTools, you can open a specific file to see your code in context.

That effectively removes the “fix it here, then re-apply it there” step that most of us have internalized as normal. Whether the feature goes anywhere beyond Edge remains to be seen, but the idea of tighter integration between debugging tools and an editor is a compelling one — especially if it means less copying and pasting between the two.