Export CSS Changes from Inspector (Webkit, Firebug, etc)

Export CSS changes from inspector (webkit, firebug, etc)

I have found the answer to this, at least as of Chrome v14.

While in the Elements section, just click on the "filename:linenumber" link next to the CSS rules. The CSS file that shows up will contain all of the modifications.

This place exactly:

How to get a summary of your CSS changes in Chrome dev tools?

You can see all changes via the Changes Drawer

In Dev Tools, you can locate the Changes Drawer via either:

• A) Open Command Palette (Ctrl + Shift + P) and type "changes"

  
  
  
  

• B) Open Drawer (Esc), click on the more options menu (triple dot), and select Changes

  

Further Reading

• How to get a summary of your CSS changes in Chrome dev tools?
• Export CSS changes from inspector (webkit, firebug, etc)

Updates

• Dev Tools 98 added More precise changes to automatically pretty prints changes
• Issue #1296143 opened User-Select: none in Changes drawer makes it very hard to utilize

Why can't I save CSS changes in Firebug?

I got here looking exactly for this feature, that is, being able to save edited CSS properties back to the original file (on my local development machine). Unfortunately after searching a lot and not finding anything that suits my needs (OK, there's CSS Updater but you have to register and it's a paid extension...) I gave up on Firefox + Firebug and looked for something similar for Google Chrome. Guess what... I just found this great post that shows a nice way of getting this to work ( built into Chrome - there's no need for additional extensions ):

Change CSS and SAVE on local file system using Chrome Developer Tools

I tried it now and it works great highlighting the changed lines. Just click Save and you're done! :)

Here's a video explaining this and much more: Google I/O 2011: Chrome Dev Tools Reloaded

I hope it helps if it doesn't matter to you changing browser while editing your CSS files. I made the change already for now, but I would really love to have this functionality built into Firebug. :)

---

[Update 1]

Today I just saw this video: Firefox CSS live edit in Sublimetext (work in progress) Looks promising indeed.

[Update 2]

If you happen to be using Visual Studio 2013 with Web Essentials you'll be able to sync CSS automagically as shown in this video:

Web Essentials: Browser tools integration

Is the Webkit inspector (developer tools) a suitable replacement for Firebug yet?

A big YES ;-) and even for javascript debugging.

Since Chrome 6 I never needed to switch back to firebug when debugging.

And profiling tools are simply awesome.

---

Related Topics