Sync Edge DevTools Edits Directly to VS Code for Faster Front‑End Work

When you tweak page styles in a browser’s developer tools, you often have to locate the corresponding source files locally and apply the same changes manually, which is tedious especially after a hot‑reload clears the in‑browser edits.

Microsoft Edge’s team has introduced an experimental feature called Open source files in Visual Studio Code that synchronizes modifications made in DevTools directly to the source files opened in VS Code.

Enable the Feature

Open Edge DevTools (F12), go to Developer Tools → Settings → Experiments, and locate the toggle named Open source files in Visual Studio Code. After enabling it, restart DevTools as prompted.

Configure Project Root

When the feature is active, you must specify the local folder that contains your project’s source files. In the DevTools UI, set the project root directory to the folder where your HTML/CSS/JS files reside.

Edge will then request permission to access that folder; click Allow to grant access.

Use the Sync

With the experiment enabled and the project root configured, any change you make to CSS or HTML in the Elements or Styles panel will be written back to the corresponding file on disk, and VS Code will reflect the update instantly.

This eliminates the repetitive copy‑paste step and keeps your local code in sync with the live debugging session.

Note: The feature is still experimental and available only in Edge version 95.0.1020.30 (or later). It may become a standard feature in a future release.