The concept of Chrome Developer Tools workspace

Edit files with Workspaces

This tutorial provides hands-on exercises for setting up and using the workspace so that you can use the workspace in your own projects. The workspace enables you to save changes made in DevTools to the source code stored on your computer.

Overview

The workspace enables you to save changes made in Devtools to a local copy of the same file on your computer. For example, suppose:

(1) The source code of the site is on your desktop.
(2) You are running a local web server from the source code directory so that you can access the site at localhost:8080.
(3) You have opened localhost:8080 in Google Chrome, and you are using DevTools to change the CSS of the site.

Once the workspace is enabled, the CSS changes you make in DevTools will be saved to the source code on the desktop.

Limitations

If you are using a modern framework, it may convert your source code from an easy-to-maintain format to a format optimized to run as quickly as possible. Workspaces can usually map the optimized code back to the original source code with the help of source mapping. But there are many differences between the frameworks in how to use source mapping. Devtools simply cannot support all changes.

For example, Workspaces does not support Create React App.

Related feature: Local Overrides

Local Overrides is another DevTools feature similar to Workspaces. When you want to experiment with changes to a page, and you need to view these changes across page loads, use local overrides, but you don’t care about mapping the changes to the source code of the page.

Only the color of the folder corresponding to the web application currently loaded into the Chrome Developer Tools has changed:

Modify index.html directly in Chrome Developer Tools:

Add the string from Jerry:

After refreshing, this change is also persisted:

Note that if you modify the DOM directly in the elements tab of the developer tool, the modification will not be persisted to the HTML file.

The reasons are as follows:

The node tree you see on the Elements panel represents the DOM of the page.
In order to display the page, the browser obtains HTML through the network, parses the HTML, and then converts it into a DOM node tree.
If the page has any JavaScript, that JavaScript may add, delete, or change DOM nodes. CSS can also change the DOM through the content property.
The browser ultimately uses the DOM to determine what content it should present to the browser user.
Therefore, the final state of the page that the user sees may be very different from the HTML obtained by the browser.

This makes it difficult for DevTools to determine where the changes should be saved in the Elements panel, because the DOM is affected by HTML, JavaScript, and CSS.

In short, the DOM Tree !== HTML.

We can modify and persist HTML and JavaScript files in the Sources tab.

More original articles by Jerry, all in: "Wang Zixi":