Trying to persist CSS changes to file on disk in Chrome Dev tools

Question

I have just started exploring the possibility of saving changes made to a page and it's styling in Chrome Dev Tools on the fly.

I've followed this short video tutorial on mapping the project files on disk to the Dev Tools via the Sources tab. Everything works fine until around the 5:17 point where he selects an element in the Elements tab and makes several CSS style changes which automatically persist to the file on disk.

This doesn't work for me. The changes won't save to the file and when I refresh the page reverts to the original styles. I have checked to see if there is an asterisk beside the corresponding CSS file in the Sources panel, to denote changes have been made, but there is nothing there.

I have also tried the solution posted in this SO question but I don't see the link to the stylesheet after editing the style in the Elements tab that will redirect back to the file in the Sources tab allowing the changes to be saved.

Can anyone tell me what I am missing? Thanks!

Answer 1

You need to make sure you map your Workspace to a Network Resource to persist changes automatically. I have produced the steps below to get this working correctly.

1. Select the folder in Sources and click 'Add Folder to Workspace'

2. If you open up our stylesheet in Sources and go to the Elements panel to make changes, upon coming back you will see a separate instance of the stylesheet opened with pending changes. The reason is that Chrome doesn't know how to map the URL to the file on your system yet.

3. Select 'Map to Network Resource...'. You will notice that 'top' disappears.

4. Make a change in the Elements panel now. When you go back to the Sources panel, the changes will automatically be shown without requiring any explicit save.

You can see exactly what was done by going to the Workspaces section of the DevTools settings panel. We've added a local Workspace, and then mapping the URL, which in my case is on my computer and accessed with the file:// protocol, to the relative path on the system.