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're running a local web server from the source code directory, so that the
site is accessible at
- You've got
localhost:8080open in Google Chrome, and you're using DevTools to change the site's CSS.
With Workspaces enabled, the CSS changes that you make within DevTools are saved to the source code on your desktop.
If you're using a modern framework, it probably transforms your source code from a format that's easy for you to maintain into a format that's 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's a lot of variation between frameworks over how they use source maps. Devtools simply can't support all the variations.
Workspaces is known to not work with these frameworks:
- Create React App
If you run into issues while using Workspaces with your framework of choice, or you get it working after some custom configuration, please start a thread in the mailing list or ask a question on Stack Overflow to share your knowledge with the rest of the DevTools community.
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 page, and you need to see those changes across page loads, but you don't care about mapping your changes to the page's source code.
Step 1: Setup
Complete this tutorial to get hands-on experience with Workspaces.
Set up the demo
Open the demo. In the top-left of the editor, there's a randomly-generated project name.
Click the randomly-generated project name. For example, in Figure 1 you would click desert-cycle.
Select Advanced Options > Download Project.
Close the tab.
- Unzip the source code and move the unzipped
appdirectory to your desktop. For the rest of this tutorial this directory will be referred to as
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.
python -m SimpleHTTPServer
Open a tab in Google Chrome and go to locally-hosted version of the site. You should be able to access it via a URL like
localhost:8080. The exact port number may be different.
Set up DevTools
Press Command+Option+J (Mac) or Control+Shift+J (Windows, Linux, Chrome OS) to open the Console panel of DevTools.
Click the Sources tab.
Click the Filesystem tab.
Click Add Folder To Workspace.
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
styles.css. These green dots mean that DevTools has established a mapping between the network resources of the page, and the files in
Step 2: Save a CSS change to disk
~/Desktop/app/styles.cssin a text editor. Notice how the
h1elements is set to
Close the text editor.
- Back in DevTools, click the Elements tab.
Change the value of the
colorproperty 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:1means that any change you make will get mapped to
~/Desktop/app/styles.cssin a text editor again. The
colorproperty is now set to your favorite color.
- 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
Try changing HTML from the Elements panel
- Click the Elements tab.
Double click the text content of the
h1element, which says
Workspaces Demo, and replace it with
I ❤️ Cake.
~/Desktop/app/index.htmlin a text editor. The change that you just made isn't there.
- Reload the page. The page reverts to its original title.
Optional: Why it doesn't work
- The tree of nodes that you see on the Elements panel represents the page's DOM.
- To display a page, a browser fetches HTML over the network, parses the HTML, and then converts it into a tree of DOM nodes.
can change the DOM, too, via the
- The browser eventually uses the DOM to determine what content it should present to browser users.
- Therefore, the final state of the page that users see may be very different from the HTML that the browser fetched.
In short, the DOM Tree
Change HTML from the Sources panel
If you want to save a change to the page's HTML, do it via the Sources panel.
- Click the Sources tab.
- Click the Page tab.
- Click (index). The HTML for the page opens.
<h1>I ❤️ Cake</h1>. See Figure 11.
- Press Command+S (Mac) or Control+S (Windows, Linux, Chrome OS) to save the change.
Reload the page. The
<h1>element is still displaying the new text.
<h1>element contains the new text.
- Click the Elements tab.
- Press Command+Shift+P (Mac) or Control+Shift+P (Windows, Linux, Chrome OS). The Command Menu opens.
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 can edit files while having other panels open.
Press Command+P (Mac) or Control+P (Windows, Linux, Chrome OS) to open the Open File dialog. See Figure 13.
script, then select app/script.js.
Save Changes To Disk With Workspaceslink in the demo. It's styled regularly.
Add the following code to the bottom of script.js via the Quick Source tab.
console.log('greetings from script.js'); document.querySelector('a').style = 'font-style:italic';
Press Command+S (Mac) or Control+S (Windows, Linux, Chrome OS) to save the change.
Reload the page. The link on the page is now italic.
Congratulations, you have completed the tutorial. Click the button below to receive your prize.
Use what you have learned in this tutorial to set up Workspaces in your own project. If you run into any issues or are able to get it working after some custom configuration, please start a thread in the mailing list or ask a question on Stack Overflow to share your knowledge with the rest of the DevTools community.
Hello, this is Kayce. I wrote this tutorial. I hope you enjoyed your cake. Please take a moment to provide feedback. I really do pay attention to the data, and it helps me create better tutorials for you. If you'd like to give me more feedback on these topics, or anything else related to DevTools, please send me a message using any of the community channels listed at the bottom of this section.
If you'd like to give more feedback on these topics or anything else, please use any of the channels below: