3

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!

Community
  • 1
  • 1
mikeym
  • 5,705
  • 8
  • 42
  • 62
  • which IDE you are using, for example there is a package called Live-style for sublime which enable you to save the changes in your developer tool – zEn feeLo Aug 16 '16 at 18:54
  • Is the CSS you are changing in an external file or inline? Only external CSS files will be persisted when changes are made in the Elements panel. Inline style changes have to be done in the Sources panel. – Gideon Pyzer Aug 16 '16 at 23:49
  • @Gideon all CSS is in an external file. I did everything the same as the tutorial as far as I can tell. – mikeym Aug 17 '16 at 00:28
  • @CameronA thanks for tip. I'll definitely give it a look if there is no other fix for the current problem. – mikeym Aug 17 '16 at 00:30

1 Answers1

3

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'

Add Folder to Workspace

  1. 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.

Pending Changes

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

Map to Network Resource

  1. 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.

Saved Changes

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.

Workspaces

Gideon Pyzer
  • 22,610
  • 7
  • 62
  • 68
  • 1
    Thanks for the lengthy reply.Yep, these are mostly the say steps I followed in the tutorial. So sadly hasn't fixed it for me. I see you are just using path on disk to 'serve' the site. I was using `python simple server` so tried without it.No luck.In fact now the `Map to Network Resource` option it totally gone with or without `python server`. Whatever it is it seems my Chrome/DevTools are somehow messed up. It's a pretty straightforward process so can't figure out why it refuses to work! – mikeym Aug 18 '16 at 16:46
  • I tried with a file server too and it works for me. Make sure you have the latest version of Chrome and then try using a new Chrome Profile. See if that helps – Gideon Pyzer Aug 18 '16 at 19:27
  • Also make sure you are right-clicking/cmd-clicking the mapped file when looking for the 'Map to Network Resource' option. Caught me out. – Pocketsand Mar 29 '17 at 17:50