Clever Geek Handbook

Edit CSS from Firefox Developer Edition Developer Tool

I am trying to save CSS changes made in the Inspector tab in Firefox Developer Edition .

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

Is there a way to edit css in the style editor from the Inspector tab?

+3


source to share


2 answers


Chrome has a good solution. See How do I save my CSS changes to the Styles panel of the Chrome developer tools?



No what I know in Firefox. See: https://support.mozilla.org/en-US/questions/967467

0


source


While looking for a better workflow, I found that you can make your changes in the Inspector and then reflect those changes in the style editor where you can save it.

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

Just execute your changes in the inspector, then click on the link filename: line number and save your changes. See the visual guide below:



  • Inspect and find your object.
    image link

  • Click the link on the filename: line number to see that your property is the original you see in the inspector.
    image link

  • Return to the inspector. Change your value and click the file name link again: line number.
    image link

  • You will see the value in the style editor is updated with the value changed in the Inspector. Now just save and move on to the next item.
    image link

You can now quickly return 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 shortcut key manager).

0


source






More articles:


All Articles