how do I save changes made in Firefox Developement Edition

Question

As I am trying to figure out the 'CSS Grid', I stumbled over Firefox Developement Edition. By the way, a great tool for learning CSS Grid. It would be even nicer if I could use the editor to actually change stuff. Unfortunately, I do not know how to save the changes I made (img). help is much appreciated.

Answer 1

In modern Firefox, there is a new feature for this!

In the inspector, in the right pane, the fourth tab should be Changes. It contains a button to Copy All Changes you made to the clipboard as a stylesheet.

You can then use the extension Stylish, create a new style in there, paste those styles into the text box, add a URL patten for which it should apply via the buttons below, give it a name, save the thing, and you’re set.

One caveat: If you disabled CSS rules on that page, they will appear as comments and do nothing. So you need to uncomment them, and set their value to something like none or initial or unset.
E.g. to force those brain-dead sites that are designed for tablets only to use the full width of your screen, you’d disable max-width, which would appear as /* max-width: 80rem; */ or something in your styles. So you’d turn that into max-width: none;.

Answer 2

Your screenshot shows the Inspector-View of the dev tools. You can save files to you local disc with in the Style-Editor-View. There is a little save-button for each style-file.

However you also can mark style properties with the mouse and copy and paste them anywhere.