Developer Tools, saving changes made to live site

Question

When using developer tools in firefox or chrome, after a change has been made to the developer tools stylesheet is there a way to save those changes for later reference when fixing the actual stylesheet?

Answer 1

Simply copy/pasting them would be the easiest thing.

There is no way to actually save changes to a stylesheet directly from the developer console/inspector if that's what you're asking.

Answer 2

In Firefox (they call their version of the tools Web Developer),

• to save HTML:
  right-click on the outermost element that you changed (or that you want to save), and select
  Copy -> Outer HTML. Then paste into a file.

• to save CSS changes made on the Inspector tab that you added to the element inline entry, at the top of the cascading styles list:
  the best I can suggest is to copy the HTML (see above), paste into a new file, then do a search for style'".
  This will highlight/find all inline styles. Some may have already been in the document. The others will be the ones you added. You'll just have to recognize which are which. You will then need to either add them as inline styles to your HTML, php, and js code, or look at the surrounding classes and tags to piece together how to add them to your stylesheet, without breaking anything else.
  If you know you'll want to save your styles to put in a stylesheet, this is probably not the recommended place to experiment or edit your css.
  Instead, you should edit any of the cascading rules that appear below element inline, or edit local copies of stylesheets directly from the Style Editor tab.

• If you edited, or disabled a style from the css cascade list (for a selected element), or edited css from the Styles Editor tab, saving styles is fairly easy.
  Switch to the Style Editor tab. The top section is a list of all the stylesheets used to "build" the current webpage.
  Any filenames shown in italics contain styles that you modified, added, disabled. To the right of the filename, click Save and you can save the entire modified stylesheet.
  Any styles that you disabled (whether they existed in the orig file or not) will be commented out, and it may be preceded by an !.
  Unfortunately, if you just want a list of your edits, you have a bit more work to do, since you cannot simply save a list of only the styles you modified. There is no indication in the file you saved that shows which styles were added or modified by you. As a work around, you can download a "file diff" program, to compare two files highlighting the differences between them.
  Know that can also edit these local copies of the stylesheets directly, instead of using the Inspector tab, and those changes will appear on the HTML page, just the same as if you had edited a style via the "Inspector" tab. This is handy to know if you want to add a CSS selector combination for an element that did not appear in the cascaded styles shown for that element.
  Note, on the Inspector tab, to the right of every cascaded style shown for a selected element, the text to the right of the selector is the name of the file it appears in. If you click on that name, it will switch you over to the Styles Editor tab, and show you the contents of that file. Again you can edit the (local copy) of that file directly. Also, this makes it easy to save a copy of this file, without needing to scroll through the file list to find it.

Note: as a bit of a hack, if you don't want to use a file diffing program, don't have many styles, and you need a list of only the styles you changed, you can use the following process.
For every style you modified in the cascaded list, uncheckmark it (disable it). Now in the css file, it will be commented out, and proceeded by an !, for example:
/*! color:#FFDCFD; */.
Now you can search your saved file for /*! to quickly find your edited styles (and delete everything else). The tedious part is remembering every element to click on, in order to access every style you changed, find it, and disable it. However, it is an option, and a good work around, in a pinch.

Answer 3

Yes, you can, in Chrome at least. Just make the changes by clicking the plus symbol at the top right of the Styles panel of Dev Tools. Then from the drop-down choose 'inspector-stylesheet' and enter your changes.

Now, if you click the link to the right of the styles you make it will take you to the inspector stylesheet in the sources panel. There you will see all your styles. Now just right-click somewhere in that pane and choose 'Save as'. Job done.