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

html css google-chrome google-chrome-extension google-chrome-devtools
Jitendra Vyas picture Jitendra Vyas · Jul 27, 2011 · Viewed 209.2k times · Source

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

Answer

Philip Ramirez picture Philip Ramirez · Jul 27, 2011

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

Related questions

How to use @font-face on a Chrome Extension in a Content Script

Since I can't use chrome.extension.getURL() on a CSS file, how can I use @font-face with a local font file?

Read More
Hide scroll bar, but while still being able to scroll

I want to be able to scroll through the whole page, but without the scrollbar being shown. In Google Chrome it's: ::-webkit-scrollbar { display: none; } But Mozilla Firefox and Internet Explorer don't seem to work like that. I also tried this …

Read More
Resource interpreted as stylesheet but transferred with MIME type text/html (seems not related with web server)

I have this problem. Chrome continues to return this error Resource interpreted as stylesheet but transferred with MIME type text/html The files affected by this error are just the Style, chosen and jquery-gentleselect (other CSS files that are imported …

Read More