Skip to content

index.md

Latest commit

 

History

History
250 lines (146 loc) · 12.9 KB

index.md

File metadata and controls

250 lines (146 loc) · 12.9 KB
title Edit files with Workspaces (Filesystem tab)
description How to save changes made within DevTools to disk.
author MSEdgeTeam
ms.author msedgedevrel
ms.topic conceptual
ms.prod microsoft-edge
ms.date 05/04/2021

Edit files with Workspaces (Filesystem tab)

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.

Before beginning this tutorial, you should know how to do the following:

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.

The Workspaces feature doesn't work with the Create React App framework.

Related feature: Local overrides

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 don't care about mapping your changes to the source code of the webpage.

Step 1: Set up

We'll set up the demo and then set up DevTools.

Set up the demo

  1. Open the demo source code.

  2. Create an app directory on your desktop. Save copies of the index.html, styles.css, and script.js files from the demo source code 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 can 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 the 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 might be different.

    The demo.

Set up DevTools

  1. Press Ctrl+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), click the Filesystem tab.

    The Filesystem tab.

  4. Click Add Folder To Workspace.

  5. Type ~/Desktop/app.

  6. Click 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. The color property of h1 elements is set to fuchsia.

    View styles.css in a text editor.

  2. Select the Elements tool.

  3. Change the value of the color property of the <h1> element to your favorite color. To do this, select the <h1> element in the DOM Tree.

    The CSS rules that are applied to the <h1> element are shown 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

You can change HTML tagging using the Elements tool, but to be able to save the edits, we'll use the Sources tool.

Change HTML from the Elements Panel

You can make changes to the HTML content in the Element tool, but your changes to the DOM tree aren't saved to disk, and only affect the current browser session.

The DOM tree is not the HTML source tagging.

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), click the Page tab.

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

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

  5. Press Ctrl+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:

  1. Navigate to the Elements tool.

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

  3. Type quick, and then select 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. Press Ctrl+P (Windows, Linux) or Command+P (macOS) to open the Open File dialog, as shown below.

  5. Type script, then select 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. Press Ctrl+S (Windows, Linux) or Command+S (macOS) to save the change.

  8. Refresh the page. 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.