Export CSS changes from inspector (webkit, firebug

问题:

When I'm working with CSS, I'll often test in a browser - say, Chrome - right click an element, click Inspect Element, and edit the CSS right there. The use of arrow keys to change things like margin and padding makes lining things up super easy.

It's not too hard to then take those changes and apply them to the CSS file, but it would be cool if I could just right click the selector in the inspector and select "export" or "copy", and have the contents available in my clipboard.

Does something like this exist?

回答1:

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:

回答2:

In Chrome, you can right-click a CSS file in the Sources tab and click "Local Modifications"

This shows you all of your local changes. Each revision is timestamped and you can rollback to any previous revision.

See the Live Editing and Revision History section of this tutorial.

回答3:

Firediff is a Firebug add-on that tracks changes done in Firebug. It logs everything you'll do in the HTML pane (great) but also your brief use of the Web Developer Toolbar extension (not so great), say Shift-Ctrl-F to obtain a font-size information in px.

I have seen a Firebug extension in Chrome but didn't test it, I use Firediff with Firefox.

回答4:

I've suggested this product on SO before (I'm not affiliated with them in any way).

http://www.skybound.ca/

Excellent product. Sounds like exactly what you're looking for and much more.

EDIT: Several other answers here have mentioned Google Chrome's ability to link to your local files (which is very very cool). Check out the other answers!

回答5:

If you edit external CSS, then you can drag its latest revision out of the Resources panel into any text editor that supports DnD (see http://www.webkit.org/blog/1463/web-inspector-styles-enhanced/, the "Persisting Changes" section for more detail.) You can also revert your CSS changes to any earlier version of the stylesheet resource (in the right-click popup menu of any stylesheet revision.)

回答6:

As mentioned by cloudworks, the answer to this has changed. This can now be accomplished rather well by the Chrome DevTools Autosave extension. This tool tracks CSS and JavaScript changes made within the Chrome Developer Tools console, and saves them back to local files. For instructions to install and setup the extension, please refer to the guide written by @addyosmani on his blog, here.

There is also a handy screencast which details the extension rather well.

回答7:

With Workspaces you can have your CSS saved as you type them in your inspector (in Chrome). The problem is that every change is automatically saved and there's no way to disable this feature, as pointed in http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/ and Disable automatic saving of CSS changes in Chrome Developer Tools.

回答8:

I built a Chrome extension that does exactly this.

It's called StyleURL - it takes whatever CSS changes you made in Chrome Inspector and outputs valid CSS as the diff: https://chrome.google.com/webstore/detail/styleurl/emplcligcppnlalfjknjbanolhlnkmgp

Here's an example where I added "padding-bottom: 50px" to this page:

It's open-source and on GitHub too: https://github.com/Jarred-Sumner/styleurl-extension

回答9:

My in-beta-soon product LIVEditor does this exactly.

To let you understand it easily, you can think of Firebug's inspector is embedded into your text editor.

That way you don't have to make the changes manually again in your code editor after you tweaking it using Firebug or Webkit's developer tools.

回答10:

If you're using the Firefox stock dev tools you can edit the css directly in the tools dialog - click the CSS viewport button (that's the button at the top with the {} symbol) and edit your css directly. It will update in realtime in the browser and when you're done just copy-paste it directly into your css file. Nice!

回答11:

To add an answer for Safari specifically — it's kind of possible.

When you edit CSS in the Styles section in the Inspector for an existing CSS file, you can hit Cmd-S to re-save the entire file with the changes. However, if you're using a meta language like Sass / preprocessor / generating your CSS with bundling etc, I don't think this really solves that problem, though it may be possible with CSS source maps.

When you edit CSS at the top of the Styles section, under Style Attribute to add inline styles (not tied to an existing CSS file), it doesn't seem possible to easily export all of those changes. For now, I'm just copying and pasting the overrides manually for each element.

The official Apple docs are a little dated but found here: Web Inspector Tutorial - Editing Code to Change Your Webpage.