109

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?

Improve this question
5
  • Shouldn't be hard to write a Safari/Chrome extension for this. Use the context menu to allow user to right click an element, then grab the currentStyle property of the object, maybe send to clipboard?
    – tbeseda
    Commented Jul 28, 2010 at 16:36
  • Maybe I should have gone to search before commenting on here. Possible duplicate of stackoverflow.com/questions/162644/…
    – MiffTheFox
    Commented Aug 1, 2010 at 2:09
  • Ah nice. I'd love to see some answers for chrome / web-kit, but those are some great answers over there. Thanks @MiffTheFox
    – hookedonwinter
    Commented Aug 1, 2010 at 2:11
  • Check out Backfire: blog.quplo.com/2010/08/… Haven't tried it, but sounds promising.
    – Bryan Downing
    Commented Sep 13, 2010 at 22:05
  • @hookedonwinter, I think it's time to change the accepted answer :)
    – Bryan Downing
    Commented Feb 24, 2014 at 18:47

14 Answers 14

Reset to default
80

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:

https://cdn.tutsplus.com/net/uploads/2013/06/dev-tools-regular-view.jpg

Improve this answer
2
  • 4
    note that this also works for new CSS selectors that are added in the Inspector via the + icon
    – Jonathan Day
    Commented Oct 30, 2012 at 4:29
  • 1
    This will only work for changes which have been added to the inspector stylesheet. It will not work for changes made to the rulesets for existing class selectors.
    – ian.pvd
    Commented Nov 27, 2019 at 17:41
50

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.

Improve this answer
4
  • 1
    Seems like you can only rollback as far as to your last refersh. So you will lose changes if you accidentally refresh / close tab etc.
    – tomblah
    Commented Jul 23, 2014 at 9:37
  • How does this work with modern bundlers like webpack where all of your css is bundled into one file?
    – mattgabor
    Commented Jul 5, 2018 at 23:46
  • I don't see this "Local Modifications", is this answer out of date?
    – Luke Pighetti
    Commented Oct 23, 2019 at 13:51
  • @LukePighetti I see it in v79 (12/2019) if I open the source file I'm interested in > right click > local modifications. That opens a tab on the "console drawer" titled "changes" which has a left menu with all of my changed files. You can also get to it by clicking the menu ellipsis > more tools > changes.
    – xr280xr
    Commented Dec 19, 2019 at 17:15
14

In Chrome there is also the Changes tab in the console drawer that displays all the modifications of CSS. It's not an export, but at least it is very convenient to quickly grasp what has changed.

Screenshot of Changes tab in Chrome dev tools

Improve this answer
2
  • 2
    This answer provides a built-in browser solution for viewing changes with no additional extensions needing to be installed. It tracks changes made to any stylesheet (or JS) as an itemized diff with separate files, and shows line-by-line additions, deletions & individual character changes. While there's no export, it's a better solution today than the current best answer from 2011.
    – ian.pvd
    Commented Nov 27, 2019 at 18:00
  • 1
    There's a lot of noise in these answers after 9 years, but this is easily the best answer. The only thing missing is a quick way to export the diff so that you can process the changes automatically in a script or IDE instead of having to do a side-by-side and manually tweak a style sheet.
    – Sami Fouad
    Commented May 19, 2020 at 6:05
11

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.

Improve this answer
1
  • Cool plugin. Definitely gets me closer to where I want. Going to wait and see if anything better comes along (full on copy formatted css to clipboard, for example).
    – hookedonwinter
    Commented Jul 28, 2010 at 17:19
8

Both Firefox and Chrome support this feature now, but worth to note that in some platforms if not all Chrome does not show it by default, you need to enable the "Changes" view to see it (in my Kubuntu Linux 20.04 it wasn't by default), here is how you can enable it: go to the "Customize and Control DevTools" button in the Developer Tools bar > "More tools" > "Changes", then the tab will appear at the button:

enter image description here

In Firefox there is no need to enable it, but if you come from the Chrom* world may be hard to find it. Just check the last section in the right at the "Inspector" tab:

enter image description here

Improve this answer
1
  • Thank you - my current chrome in 2020 didn't have this!
    – Adam Hughes
    Commented Sep 9, 2020 at 20:50
7

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: StyleURL example diff

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

Improve this answer
2
  • Very handy tool!
    – DanTheMann
    Commented Mar 17, 2019 at 17:07
  • 2
    All links not working accept github. Please update, sounds promissing
    – Mirosław
    Commented Jun 4, 2020 at 13:14
5
+50

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!

Improve this answer
2
4

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

Improve this answer
4

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.

enter image description here

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

Improve this answer
2

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.

Improve this answer
0

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.

Improve this answer
2
0

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!

Improve this answer
0

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.

Improve this answer
0

In Chrome, in the css inspector you can click and hold the + button, then choose to add your changes to the inspector-stylesheet. It's not as convenient as directly editing in your css-selectors, but what you write will all be in inspector-stylesheet.css

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.