Set up workspaces to save changes to source files

Kayce Basques
Kayce Basques
X GitHub
Sofia Emelianova
Sofia Emelianova
GitHub

Save changes you make in DevTools back to source files on your computer by setting up a workspace. You can automatically connect a workspace folder to DevTools by serving a configuration file, or you can manually add a workspace location in the Sources panel.

Overview

An automatic (or manual) connection to a workspace folder lets you save a change that you make in DevTools to a local copy of the same file on your computer. For example, suppose:

  • You have the source code for your site on your desktop.
  • You're running a local web server from the source code directory, so that the site is accessible at localhost:PORT and that also serves a simple JSON file with metadata (described later).
  • You've got localhost:PORT open in Google Chrome, and you're using DevTools to change the site's CSS.

With a workspace folder connected, the changes that you make in the Sources panel to CSS, HTML, and JavaScript files are saved to the source code on your computer. However, DevTools doesn't save changes to DOM that you make in the Elements panel.

Moreover, DevTools is usually able to map the optimized code back to your original source code with the help of source maps.

Generate metadata for a connection

To let DevTools discover your workspace folder automatically, generate a random version 4 UUID and put it in the following JSON file:

{
  "workspace": {
    "uuid": "UUID",
    "root": "path/to/project/root/folder"
  }
}

Then place the JSON file in path/to/project/root/folder/.well-known/appspecific/com.chrome.devtools.json.

Lastly, run your local HTTP server and make sure to serve the JSON file too.

Alternatively, you can skip this step and manually set up a folder connection.

Connect a workspace folder

To connect a folder:

  1. In Chrome, navigate to your locally-hosted page (in this example, at localhost:8000) and open DevTools.

  2. In Sources > Workspace, click Connect next to your folder.