Edit CSS from Firefox Developer Edition Inspector tool

5
votes

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?

2
cssfirefoxfirefox-developer-toolssavechangesinspector
Changes made by you in the Code Inspector are saved only for that instance of the page life cycle. As soon as you refresh the page, it will revert back to the CSS used by the page. You can't change someone else's CSS unless you use a custom style sheet in your browser that includes the exact same selector. – TylerH
I'm trying to modify my own web locally – user2068363
The web doesn't work that way. You don't have your own "web". The "web" is a collection of pages and applications published by people all over the world that can be accessed from all over the world. It's just like placing a phone call; you can call any number, but you can't make the person on the other end of the line say what you want them to say, because you don't control them. So with websites, you can't change their content, because you don't control them. You can only interact with them as designed. – TylerH
Have you tested Firefox Developer Edition? It allows to save website's css in your own computer. If I'm the one that is doing that web, I can modify. I'm not trying to hack anything. – user2068363
Yes. Firefox Developer Edition allows to save CSS changes to a local file. I want is to configure it so changes made in Inspector tool are reflected in Style Editor tools, where you can save CSS changes, so I can get CSS with the changes I made in Inspector. – user2068363

2 Answers

2
votes

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.
    image link

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

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

  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.
    image link

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).

0
votes

There is a good solution for this in Chrome. See: How to save CSS changes of Styles panel of Chrome Developer Tools?

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