Edit CSS from Firefox Developer Edition Inspector tool

Question

I'm trying to save CSS changes done on Inspector tab in Firefox Developer Edition.

As far as I know, you can only save your css in Style Editor tab, but it doesn't reflect changes made with Inspector Tool.

Is there anyway to edit css in Style Editor from Inspector tab?

Answer 1

In searching for a better workflow, I found that you can make your changes to Inspector, then reflect those changes into Style editor, where you can save it.

It is not automatic, but it is easy enough with one extra click.

Just do your changes in the inspector, then click the file-name:line-number link and save your changes. See the visual guide below:

1. Inspect and find your object.
   

2. Click the file-name:line-number link just to see that your property is the original you see on inspector.
   

3. Back to inspector. Change your value, and click the file-name:line-number link again.
   

4. You will see that the value in the Style Editor has been updated with the value changed in Inspector. Now just save and move on to the next element.
   

Now you can switch quickly back to the Inspector with the keyboard shortcut CTRL+SHIFT+C (note: This shortcut doesn't work for me, so you may need to find an advanced keyboard shortcut manager).