Is there a way make changes in Chrome devtools permanent?

Hi

While editing html and css inside Chrome dev tools is there a way to make these changes permanent ? the file I edit is local html.

Thanks

2 Likes

Hi,

You can make changes permanent by setting up a Workspace in Chrome DevTools.

  1. Open DevTools → Sources.
  2. Right-click in the file navigator and select Add folder to workspace.
  3. Grant access when prompted.
  4. Open your local file via that workspace.
  5. Now changes in the Sources panel can be saved to disk with Ctrl+S.

Note that changes made in the Elements tab (live DOM) won’t persist. You need to edit files directly in the Sources panel.

You can check these if you’d like to find out more:

2 Likes

Tanks James. But my idea is to use the “select arrow”
image

This arrow will highlight and also select the html line quickly that I need to edit. Nothing can do that in element tab ?

I found a solution is to use a debuger

Now I can access the site like

http://localhost:63342/mysite/index.html

but sometimes refresh becomes very slow

The element tab is the live DOM.
The live DOM does not necessarily reflect the saved file; IE: If Javascript has inserted inline CSS or other elements, those changes will not be in the source file, nor should they be.

1 Like