5

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?

Vadim Kotov
  • 7,766
  • 8
  • 46
  • 61
user2068363
  • 81
  • 1
  • 7
  • 1
    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 Nov 10 '14 at 16:26
  • I'm trying to modify my own web locally – user2068363 Nov 10 '14 at 16:32
  • 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 Nov 10 '14 at 16:46
  • 1
    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 Nov 11 '14 at 12:05
  • Any web browser lets you do that. But once you download it, you can't re-upload it to the server from whence it came. Otherwise there would be visual chaos and one person could change the look of a site for everyone else just because of a personal preference. – TylerH Nov 11 '14 at 14:15
  • @user2068363 are you trying to save your CSS changes to a local file? – Bill Nov 11 '14 at 14:43
  • 1
    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 Nov 12 '14 at 08:34
  • You aren't crazy for wanting this. In Firefox Developer Edition you can definitely save edits, but I would absolutely love if it saved Inspector changes. The difference between the 2 is with the inspector I can find an element I want to edit and make changes to all the lines of CSS that pertain to that element. The Style Editor is basically has the same limitations as you code window. Still need to visually search for line numbers to edit. Would be an absolute game changer for me if you could save from the inspect panel. – jbwharris May 20 '15 at 15:49
  • So sad we can't downvote on comments, because TylerH you would have gotten one. The OP is asking how to update his change back from the browser to its own local webserver. – Dolanor Jun 01 '16 at 09:21

2 Answers2

2

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

Thomas Smyth
  • 3,978
  • 5
  • 23
  • 33
Jonathan Magoga
  • 21
  • 3
0

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

Community
  • 1
  • 1
SunWuKung
  • 507
  • 4
  • 14