Edit files with Workspaces

This tutorial provides hands-on practice in setting up and using a Workspace. After you add files to a Workspace, the changes that you make in your source code within DevTools are saved on your local computer, and are preserved after you refresh the webpage.

Important

Prerequisites: Before beginning this tutorial, you should know how to perform the following actions.

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 this tutorial, you should have the following settings on your machine.

  • 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 each framework uses source maps. Devtools doesn't support all of the variations.

Workspaces is known to not work with the following framework.

  • 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 webpage, and you need to display the changes across webpage loads, but you do not care about mapping your changes to the source code of the webpage.

Step 1: Set up

Complete the following actions, to get hands-on experience with Workspaces.

Set up the demo

  1. Open the demo.

    A Glitch project

  2. Create an app directory on your desktop. Save copies of the files from the workspaces-demo directory to the app directory. For the rest of the tutorial, the 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 navigate 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.

    The demo

Set up DevTools

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

    The Console panel

  2. Navigate to the Sources tool.

  3. In the Navigator pane (on the left), choose the Filesystem tab.

    The Filesystem tab

  4. Choose Add Folder To Workspace.

  5. Type ~/Desktop/app.

  6. Choose Allow to give DevTools permission to read and write to the directory. In the Filesystem tab, a green dot now appears next to index.html, script.js, and styles.css. A green dot indicates that DevTools has established a mapping between a network resource of the page, and the file in ~/Desktop/app.

    The Filesystem tab now indicates 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.

    View styles.css in a text editor

  2. Choose the Elements tool.

  3. Change the value of the color property of the <h1> element to your favorite color. Remember that you need to choose the <h1> element in the DOM Tree in order to display 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.

    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. Refresh the page. The color of the <h1> element is still set to your favorite color. The change remains across a refresh, because when you made the change DevTools saved the change to disk. And then, when you refreshed 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 tool

If you want to save a change to the HTML of the webpage, use the Sources tool.

  1. Navigate to the Sources tool.

  2. In the Navigator pane (on the left), choose the Page tab.

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

  4. Replace <h1>Workspaces Demo</h1> with <h1>I ❤️ Cake</h1>. Review the following figure.

  5. Select Control+S (Windows, Linux) or Command+S (macOS) to save the change.

  6. Refresh the page. The <h1> element continues to display the new text after the page is refreshed.

    Change HTML from the Sources tool

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

Step 4: Save a JavaScript change to disk

The main place to use the code editor of DevTools is the Sources tool. But sometimes you need to access other tools, such as the Elements tool or the Console panel, while editing files. The Quick Source tool gives you just the editor from the Sources tool, while any tool is open.

To open the DevTools code editor alongside other tools, do the following:

  1. Navigate to the Elements tool.

  2. Select Control+Shift+P (Windows, Linux) or Command+Shift+P (macOS). The Command Menu opens.

  3. Type Quick Source, and then choose Show Quick Source. At the bottom of the DevTools window, the Quick Source tool appears, displaying the contents of index.html, which is the last file you edited in the Sources tool.

    Open the Quick Source tool by using the Command Menu

  4. Select Control+P (Windows, Linux) or Command+P (macOS) to open the Open File dialog. Review the following figure.

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

    Open 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 tool.

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

  8. Refresh the page.

    Note

    The link on the page is now italicized.

    The link on the page is now italicized

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.