How can you add a new rule in the inspector?
I've grown very accustomed to the Chrome developer tools, and I've recently decided to try out Firefox.
Best I can tell, you cannot add custom rules in the Firefox inspector tab. For instance, if I inspect the element on an image in Firefox, I am given all the defined styles (rules) for that element. I can, of course, edit those defined styles. However, it does not give me an option to add my own custom styles unless I jump over to the 'Style Editor' tab and write them in manually. This becomes a problem when I want to write in a quick :hover or a :first-child or reference any other selecter that's not already defined.
In Chrome, not only do I add/remove/change styles directly in the Inspector, but it also saves a custom inspector stylesheet for me with all the changes I made.
Chrome example: http://cl.ly/Wm56
Firefox example: http://cl.ly/WmUP
Is there any way to add custom styles directly from the inspector tab in Firefox?
Thanks!
Chosen solution
Yes, that is not possible AFAIK. You can only modify a rule that way and add an extra selector by editing the file in the style editor.
Maybe file an enhancement bug to add this feature.
Read this answer in context 👍 0All Replies (4)
You will notice an element {} item at the top of the Rules list in the right plane. You can click between the curly brackets {} to enter a new inline rule for this element. You can do this within other rules {} as well. Type the colon to separate the property name and value. That is easier than adding a style attribute in the left pane or editing a style sheet file. That should work as well as rules added this way show as a style rule.
Modified by cor-el
Thanks for the reply! Unfortunately this is not what I'm asking. I have read the documentation on the link you provided, and I don't see where it specifically answers what I'm asking.
Perhaps this will help clarify: http://cl.ly/Wn4E
Is there a way to do all this within the inspector panel in Firefox? Thanks!
Chosen Solution
Yes, that is not possible AFAIK. You can only modify a rule that way and add an extra selector by editing the file in the style editor.
Maybe file an enhancement bug to add this feature.
Thanks, I just submitted feedback to Firefox.