105

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?

hookedonwinter
  • 11,741
  • 17
  • 55
  • 73
  • 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 Jul 28 '10 at 16:36
  • Maybe I should have gone to search before commenting on here. Possible duplicate of http://stackoverflow.com/questions/162644/why-cant-i-save-css-changes-in-firebug – MiffTheFox Aug 01 '10 at 02: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 Aug 01 '10 at 02:11
  • Check out Backfire: http://blog.quplo.com/2010/08/backfire-save-css-changes-made-in-firebug/ Haven't tried it, but sounds promising. – Bryan Downing Sep 13 '10 at 22:05
  • @hookedonwinter, I think it's time to change the accepted answer :) – Bryan Downing Feb 24 '14 at 18:47
  • 1
    @BryanDowning Done! That is super awesome. Thanks for the ping. – hookedonwinter Mar 04 '14 at 08:46

14 Answers14

79

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

Rob Baillie
  • 3,248
  • 2
  • 18
  • 32
Nicholas Zographos
  • 906
  • 7
  • 4
  • 4
    note that this also works for new CSS selectors that are added in the Inspector via the `+` icon – Jonathan Day Oct 30 '12 at 04: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 Nov 27 '19 at 17:41
49

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.

Chris MacDonald
  • 5,737
  • 4
  • 32
  • 35
  • 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 Jul 23 '14 at 09:37
  • How does this work with modern bundlers like webpack where all of your css is bundled into one file? – mattgabor Jul 05 '18 at 23:46
  • I don't see this "Local Modifications", is this answer out of date? – Luke Pighetti Oct 23 '19 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 Dec 19 '19 at 17:15
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.

alxndr
  • 3,291
  • 3
  • 34
  • 32
FelipeAls
  • 20,411
  • 7
  • 49
  • 71
  • 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 Jul 28 '10 at 17:19
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

Jarred Sumner
  • 1,663
  • 6
  • 30
  • 44
7

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

Adrian B
  • 301
  • 3
  • 9
  • 1
    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 Nov 27 '19 at 18:00
  • 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 May 19 '20 at 06:05
5

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!

Bryan Downing
  • 14,018
  • 2
  • 39
  • 54
  • Looks pretty awesome. Too bad it's $80. Thanks @Bryan, good find – hookedonwinter Aug 05 '10 at 15:30
  • 2
    The answer here has changed in the last few years. Chrome DevTools now [allows you to write your changes back to the file](https://developers.google.com/chrome-developer-tools/docs/settings#workspace). Exciting times! – cloudworks Feb 22 '14 at 14:38
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.

Andrew Craswell
  • 584
  • 1
  • 4
  • 15
4

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

Mariano Ruiz
  • 3,392
  • 1
  • 30
  • 33
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.)

Alexander Pavlov
  • 29,538
  • 4
  • 63
  • 88
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.

Community
  • 1
  • 1
Giorgio Tempesta
  • 928
  • 12
  • 21
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!

Abraham Brookes
  • 1,279
  • 1
  • 13
  • 26
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.

Taylor Edmiston
  • 9,072
  • 4
  • 45
  • 65
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

Frazer Kirkman
  • 716
  • 1
  • 10
  • 17
-1

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.

Edwin Yip
  • 3,789
  • 3
  • 36
  • 78
  • 8
    Sounds great. Too bad it's for Windows. – KPM Aug 21 '12 at 23:34
  • Generally, links to a tool or library [should be accompanied by usage notes, a specific explanation of how the linked resource is applicable to the problem, or some sample code](http://meta.stackoverflow.com/a/251605/584192), or if possible all of the above. – Samuel Liew Feb 01 '19 at 02:07