Edit Files With Workspaces

Note

The goal of this tutorial is to provide hands-on practice in setting up and using Workspaces, so that you are able to use Workspaces in your own projects. You are able to save the changes to the source code, on your local computer, that you made within DevTools after you enable Workspaces.

Caution

Prerequisites: Before beginning this tutorial, you should know how to:

Overview

Workspaces enable you to 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 are running a local web server from the source code directory, so that the site is accessible at localhost:8080.
  • You opened localhost:8080 in Microsoft Edge, and you are using DevTools to change the CSS of the site.

With Workspaces enabled, the CSS changes that you make within DevTools are saved to the source code on your desktop.

Limitations

If you are using a modern framework, it probably transforms your source code from a format that is easy to maintain into a format that is optimized to run as quickly as possible.
Workspaces is usually able to map the optimized code back to your original source code with the help of source maps. But there is a lot of variation between frameworks over how they use source maps. Devtools simply does support all the variations.

Workspaces is known to not work with these frameworks:

  • Create React App

Local Overrides is another DevTools feature that is similar to Workspaces. Use Local Overrides when you want to experiment with changes to a page, and you need to see those changes across page loads, but you do not care about mapping your changes to the source code of the page.

Step 1: Setup

Complete this tutorial to get hands-on experience with Workspaces.

Set up the demo

  1. Open the demo.

    Figure 1

    A Glitch project A Glitch project

  2. Create an app directory on your desktop. Save copies of the files in the workspaces-demo directory. For the rest of this tutorial this directory is referred to as ~/Desktop/app.

  3. Start a local web server in ~/Desktop/app. Below is some sample code for starting up SimpleHTTPServer, but you may use whatever server you prefer.

    cd ~/Desktop/app
    python -m SimpleHTTPServer # Python 2
    
    cd ~/Desktop/app
    python -m http.server # Python 3
    
  4. Open a tab in Microsoft Edge and go to locally-hosted version of the site. You should be able to access it using a URL like localhost:8080 or http://0.0.0.0:8080. The exact port number may be different.

    Figure 2

    The demo
    The demo

Set up DevTools

  1. Press Control+Shift+J (Windows) or Command+Option+J (macOS) to open the Console panel of DevTools.

    Figure 3

    The Console panel
    The Console panel

  2. Click the Sources tab.

  3. Click the Filesystem tab.

    Figure 4

    The Filesystem tab
    The Filesystem tab

  4. Click Add Folder To Workspace.

  5. Select ~/Desktop/app.

  6. Click Allow to give DevTools permission to read and write to the directory.
    In the Filesystem tab, there is now a green dot next to index.html, script.js, and styles.css. These green dots mean that DevTools has established a mapping between the network resources of the page, and the files in ~/Desktop/app.

    Figure 5

    The Filesystem tab now shows a mapping between the local files and the network ones
    The Filesystem tab now shows a mapping between the local files and the network ones

Step 2: Save a CSS change to disk

  1. Open styles.css.

    Note

    The color property of h1 elements is set to fuchsia.

    Figure 6

    Viewing styles.css in a text editor
    Viewing styles.css in a text editor

  2. Click the Elements tab.

  3. Change the value of the color property of the <h1> element to your favorite color.
    Remember that you need to click the <h1> element in the DOM Tree in order to see the CSS rules applied to it in the Styles pane. The green dot next to styles.css:1 means that any change that you make are mapped to ~/Desktop/app/styles.css.

    Figure 7

    The green indicator that the file is linked
    The green indicator that the file is linked

  4. Open styles.css in a text editor again. The color property is now set to your favorite color.

  5. Reload the page. The color of the <h1> element is still set to your favorite color. This works because when you made the change, DevTools saved the change to disk. And then, when you reloaded the page, your local server served the modified copy of the file from disk.

Step 3: Save an HTML change to disk

Change HTML from the Elements Panel

You may make changes to the HTML from the Element Panel, but your changes to the DOM tree are not saved to disk and only effect the current browser session.
The DOM tree is not HTML.

Change HTML from the Sources panel

If you want to save a change to the HTML of the page, do it using the Sources panel.

  1. Click the Sources tab.

  2. Click the Page tab.

  3. Click (index). The HTML for the page opens.

  4. Replace <h1>Workspaces Demo</h1> with <h1>I ❤️ Cake</h1>. See Figure 8.

  5. Press Control+S (Windows) or Command+S (macOS) to save the change.

  6. Reload the page. The <h1> element is still displaying the new text.

    Figure 8

    Line 12 has been set to I ❤️ Cake
    Changing HTML from the Sources panel

  7. Open ~/Desktop/app/index.html. The <h1> element contains the new text.

Step 4: Save a JavaScript change to disk

The Sources panel is also the place to make changes to JavaScript. But sometimes you need to access other panels, such as the Elements panel or the Console panel, while making changes to your site. There is a way to have the Sources panel open alongside other panels.

  1. Click the Elements tab.

  2. Press Control+Shift+P (Windows) or Command+Shift+P (macOS). The Command Menu opens.

  3. Type QS, then select Show Quick Source. At the bottom of your DevTools window there is now a Quick Source tab. The tab is displaying the contents of index.html, which is the last file you edited in the Sources panel. The Quick Source tab gives you the editor from the Sources panel, so that you are able to edit files while having other panels open.

    Figure 9

    Opening the Quick Source tab using the Command Menu
    Opening the Quick Source tab using Command Menu

  4. Press Control+P (Windows) or Command+P (macOS) to open the Open File dialog. See Figure 10.

  5. Type script, then select app/script.js.

    Figure 10

    Opening script.js using the Open File dialog
    Opening script.js using the Open File dialog

    Note

    The Save Changes To Disk With Workspaces link in the demo is styled regularly.

  6. Add the following code to the bottom of script.js using the Quick Source tab.

    console.log('greetings from script.js');
    document.querySelector('a').style = 'font-style:italic';
    
  7. Press Control+S (Windows) or Command+S (macOS) to save the change.

  8. Reload the page.

    Note

    The link on the page is now italic.

    Figure 11

    The link on the page is now italic
    The link on the page is now italic

Next steps

Use what you have learned in this tutorial to set up Workspaces in your own project.

Note

Portions of this page are modifications based on work created and shared by Google and used according to terms described in the Creative Commons Attribution 4.0 International License.
The original page is found here and is authored by Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse).

Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License.