221

How to save CSS changes of Styles panel of Google Chrome Developer Tools?

At tool's website it's mentioned that we can see all change in resource panel

enter image description here

But I'm working locally on a CSS file but changes are not showing in Resource panel for me

enter image description here

enter image description here

By the way Do you know any add-ons , tools to save css changes of Chrome Developer tools? I know for Firebug there are many https://stackoverflow.com/search?q=firebug+CSS+changes+save

Community
  • 1
  • 1
Jitendra Vyas
  • 148,487
  • 229
  • 573
  • 852
  • 9
    I believe this question and its answers are obsolete, as **Chrome has since moved its modified-CSS-saving functionality to the "Sources" panel**. The functionality is fairly confusing, and somewhat misleading: **I explored this modified-CSS-saving functionality of Chrome in some detail in this related Stack Overflow post: http://stackoverflow.com/questions/16005435/browser-as-a-design-tool-change-colors-save-them** – ChaseMoskal Apr 15 '13 at 00:35
  • Possible duplicate of [Export CSS changes from inspector (webkit, firebug, etc)](http://stackoverflow.com/questions/3355111/export-css-changes-from-inspector-webkit-firebug-etc) – mems May 11 '16 at 13:04
  • [Local Overrides](https://stackoverflow.com/a/48711722/1669860) is a new way to do this, starting in Chrome 65. Overrides is a different feature than Workspaces. – Kayce Basques Feb 09 '18 at 18:07
  • There's now an API for DevTools extensions to receive notifications on the resources being changed -- so you can create an extension that will integrate with your IDE of choice or just post the resource content to a WebDAV server: http://developer.chrome.com/extensions/devtools.inspectedWindow.html#event-onResourceContentCommitted – caseq Nov 09 '11 at 13:29

11 Answers11

153

You can save your CSS changes from Chrome Dev Tools itself. Chrome now allows you to add local folders to your Workspace. After allowing Chrome access to the folder and adding the folder to the local workspace, you can map a web resource to a local resource.

  • Navigate to the Sources panel of the Developer Tools, Right-click in the left panel (where the files are listed) and select Add Folder to Workspace. You can get to a stylesheet in the Sources panel quickly by clicking the stylesheet at the top-right of each CSS rule for a selected element in the Elements panel.

enter image description here

  • After adding the folder, you'll have to give Chrome access to the folder. Allow chrome access

  • Next, you need to map the network resource to the local resource.

enter image description here

  • After reloading the page, Chrome now loads the local resources for the mapped files. To make things simpler, Chrome only shows you the local resources (so you don't get confused on as to whether you are editing the local or the network resource). To save your changes, press CTRL + S when editing the file.

p.s.

You may have to open the mapped file(s) and start editing to get Chrome apply the local version (date 201604.12).

Nam G VU
  • 33,193
  • 69
  • 233
  • 372
Philip Ramirez
  • 2,972
  • 1
  • 16
  • 16
  • 5
    I want to only add at the bottom of my theme's stylesheet whatever CSS diff I have come up with while live editing my CSS. That's it. Is there a way to come up with a 'diff' that's CSS I can copy and paste? See this other question: http://stackoverflow.com/questions/21871535/any-way-to-save-a-css-diff-rather-than-save-the-entire-stylesheet-in-chrome-dev The background story is that I am editing CSS that belongs to a theme, I can only add CSS at the bottom of the stylesheet, not edit anything above. The same applies if someone can only add a custom.css to a website with his CSS overrides. – Caroline Schnapp Feb 19 '14 at 05:13
  • paul-irish, Interested in how to make the diff/patch only local changes CSS (without remote changes). SaveAs not really solve the problem of flexibility and acceleration... – Denis Denisov Mar 06 '15 at 04:44
  • Now chrome is saving local files automatically (without pressing CTRL + S) how to prevent that? – Uzair Ali Sep 16 '15 at 19:57
  • Does not work for me. After saving the CSS file in the local folder, mapping remote to local and reloading, all changes are gone. :( editing the local file in the Elements panel and saving the file in sources does also not persist my changes. – crispy Oct 14 '15 at 16:03
  • 2
    There seems to be a bug in the Chrome 46 inspector that when reloading the page the mapped local file is only reapplied when you change it in the Sources panel. You can even change it in an external editor but you have to open and focus it in the Sources panel. – crispy Oct 14 '15 at 16:24
  • 2
    I think OP wants to see the changes he made in the Styles tab of the Elements panel. These changes are not necessarily tied to a specific source file. – Ron Inbar May 30 '20 at 23:15
59

DevTools tech writer and developer advocate here.

Starting in Chrome 65, Local Overrides is a new, lightweight way to do this. This is a different feature than Workspaces.

Set up Overrides

  1. Go to Sources panel.
  2. Go to Overrides tab.
  3. Click Select Folder For Overrides.
  4. Select which directory you want to save your changes to.
  5. At the top of your viewport, click Allow to give DevTools read and write access to the directory.
  6. Make your changes. In the GIF below, you can see that the background:rosybrown change persists across page loads.

overrides demo

How overrides work

When you make a change in DevTools, DevTools saves the change to a modified copy of the file on your computer. When you reload the page, DevTools serves the modified file, rather than the network resource.

The difference between overrides and workspaces

Workspaces is designed to let you use DevTools as your IDE. It maps your repository code to the network code, using source maps. The real benefit is if you're minifying your code, or using code that needs to get transpiled, like SCSS, then the changes you make in DevTools (usually) get mapped back into your original source code. Overrides, on the other hand, let you modify and save any file on the web. It's a good solution if you just want to quickly experiment with changes, and save those changes across page loads.

Kayce Basques
  • 23,849
  • 11
  • 86
  • 120
  • 9
    this works, but it's still way too complicated. I'd prefer if you could only enable this for the current session. IMHO, a checkbox like "Keep resource changes for the current session" would fit better into a web developers workflow. Persistent changes are not something a web developer needs in his daily business and may even cause additional headache if you forget to delete these overrides and come back a few weeks later. Overrides are fine for end users - not for debugging. Still upvoted. –  Dec 06 '18 at 09:46
  • I agree with the other comment. It's not intuitive at all and it doesn't save all changes, so not really that helpful. It'd be better for us to just write a small chrome extension listening for any changes and saving them. That's if there's an API or process we can hook on... haven't looked it up yet. – Neithan Max Mar 27 '19 at 10:58
  • Sorry sir Isn't liveSCSS deprecated and not developed anymore? refer to https://stackoverflow.com/a/57622797/10189759 – Luk Aron Oct 12 '19 at 13:00
  • @Kayce Basques what about developing chrome extensions? When you are injecting stylesheets (and js), all these features are not working, right? Any solution for that kind of development (to speed up css/js updates from chrome dev tools to local source files of extension). Thanks – Andrew Apr 18 '20 at 10:56
19

New versions of Chrome have a feature called workspaces which addresses this issue. You can define which paths on your webserver correspond to which paths on your system, then edit and save with just ctrl-s.

See: http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/

rjmunro
  • 27,203
  • 20
  • 110
  • 132
  • I think OP wants to see the changes he made in the Styles tab of the Elements panel. These changes are not necessarily tied to a specific source file. – Ron Inbar May 30 '20 at 23:17
14

I know it is an old post, but I save it this way :

  1. Go to Sources pane.
  2. Click Show Navigator (to show the navigator pane on left).enter image description here
  3. Click the CSS file you want. (It will open in the editor, with all changes you made)
  4. Right click on editor and Save your changes.

You can also see Local Modifications to see your revisions, very interesting feature. Also work with scripts.

Guilherme de Jesus Santos
  • 4,955
  • 5
  • 43
  • 68
12

You're looking in the wrong section of "Resources".

It's not under "Local Storage", it's under "Frames":

The above screenshot shows a diff of the original styles against the new modifications made in the devtools. You can right-click the item in the left pane and save it back to disk.

Paul Irish
  • 47,354
  • 22
  • 98
  • 132
thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • Nothing inside Frames too, for me. I added one more screenshot in question – Jitendra Vyas Jul 27 '11 at 11:33
  • I'm not sure how your "Frames" can be empty. That sounds broken. Try this out in the Canary build (you can install it alongside your current version): http://tools.google.com/dlpage/chromesxs – thirtydot Jul 27 '11 at 11:42
  • Canary is unable to open. I also found this solution http://www.justin.my/2011/04/why-my-google-chrome-canary-cannot-run/ but it's still not working. I got this message when installation got finished http://k.min.us/iefbE2.jpg – Jitendra Vyas Jul 27 '11 at 13:24
  • 2
    As of this weekend (5/21/2012), this solution no longer works I believe. I used to do the same thing you show to write large chunks of *new* css (not old, or edits). But now, for me at least, clicking on that HTML file only shows the raw HTML without showing the new CSS rules. Is it still working for you, and if not do you have a new solution to accomplish this? – Owen Allen May 21 '12 at 19:26
  • this is not working for me either in Chrome 48. Anyway to still do this? – DMTintner Feb 10 '16 at 13:38
  • Just for the record, the new CSS rules seem to be adding in the special "useragent" stylesheet, not any of the page's own css sheets. It too can be found in the sources tab, though – Valentin Golev Nov 25 '16 at 21:07
10

Tincr Chrome extension is easier to install (no need to run node server) AND also comes with LiveReload like functionality out the box! Talk about bi-directional editing! :)

Tin.cr Website

Chrome Web Store Link

Andy's Blog Article

Jose Browne
  • 4,482
  • 3
  • 28
  • 29
8

Now that Chrome 18 was released last week with the required APIs, I published my chrome extension in the Chrome web store. The extension automatically saves changes in CSS or JS in Developer tools into the local disk. Go check it out.

Sudarshan
  • 18,140
  • 7
  • 53
  • 61
Tomi Mickelsson
  • 199
  • 2
  • 2
6

UPDATE 2019: As other answers are bit outdated, I'll add updated one here. In latest version there's no need to map the chrome folder to filesystem.

enter image description here

So, suppose I have a web folder containing HTML,CSS,JS files in desktop which i want to be updated when I make changes in chrome:=

1) You'd need a running local server like node etc, alternatively this vscode extension creates the server for you: live server VSCode extension, install it, run the server.

2) load the html page in chrome from running local server.

3) Open devTools->Sources->Filesystem->Add folder to workspace

enter image description here

4) Add the folder which is used in running local server. No additional mapping is required in latest chrome! Ta-da!

More on it Edit Files With Workspaces

Note that the changes made on the styles tab will NOT reflect on the filesystem files.
enter image description here
Instead you need to go to devtools->source->your_folder and then make your changes there and reload the page to see the effect.

GorvGoyl
  • 42,508
  • 29
  • 229
  • 225
5

As long as you haven't been sticking the CSS in element.style:

  1. Go to a style you have added. There should be a link saying inspector-stylesheet:

enter image description here

  1. Click on that, and it will open up all the CSS that you have added in the sources panel

  2. Copy and paste it - yay!

If you have been using element.style:

You can just right-click on your HTML element, click Edit as HTML and then copy and paste the HTML with the inline styles.

Community
  • 1
  • 1
Ethan
  • 3,410
  • 1
  • 28
  • 49
  • 1
    And if you can't find that inspector-stylesheet because you got lost searching through the dom, just Ctrl+P (or CMD+P) while DevTools is focused and start writing "inspec"... it'll pop right up, and then just enter. https://i.imgur.com/WSWcbh8.png – Neithan Max Mar 27 '19 at 10:50
4

FYI, If you're using inline styles or modifying the DOM directly (for instance adding an element), workspaces don't solve this problem. That's because the DOM is living in memory and there's not an actual file associated with the active state of the DOM.

For that, I like to take a "before" and "after" snapshot of the dom from the console: copy(document.getElementsByTagName('html')[0].outerHTML)

Then I place it in a diff tool to see my changes.

Diff tool image

Full article: https://medium.com/@theroccob/get-code-out-of-chrome-devtools-and-into-your-editor-defaf5651b4a

RoccoB
  • 2,439
  • 2
  • 27
  • 30
1

To answer the last part of your question about any extensions that can save changes, there is hotfix

It allows you to save changes from Chrome Dev Tools directly to GitHub. From there you can set up a post-receive hook on GitHub to automatically update your website.

FajitaNachos
  • 1,000
  • 8
  • 21