2 ms·

I've gotten more used to the inspector, but I absolutely hate the style inspector. Firebug got it right with making it look like your own CSS. Also I often ti

I've gotten more used to the inspector, but I absolutely hate the style inspector. Firebug got it right with making it look like your own CSS. Also I often times can't edit a style rule, and I'm not sure why that is. I hope those things change and improve. It doesn't seem like they want to go the Firebug route with the CSS style inspector.

scorxn 17y ago
It also has some presentation issues on longhand overrides of shorthand rules. Eg: If I override margin:0 with margin-top:1em, the margin:0 rule is not struckthrough. Granted, the most accurate way to present that override would be to display margin: 0 0 0 0, with only the first 0 struckthrough. But that deviates from the written code and becomes more difficult to track.
jeff18 17y ago
Could you be more specific? Is it just a font thing?
- yesimahuman 17y ago
  For my dislike of it? No, it's that I love firebug's way of displaying your CSS entries, and the webkit inspectors way is just less enjoyable to me. I like that in Firebug you inspect your CSS like you would normal CSS, but in inspector it's presented differently. It also has a lot of quirks (try changing a color, it will bork on whitespace in a strange way).
  - jeff18 17y ago
    I see this complaint leveraged at the web inspector a lot, but I don't really understand it. It seems like the differences are very subtle. http://i.imgur.com/amWMy.png http://i.imgur.com/amWMy.png vs. http://i.imgur.com/ysH0a.png http://i.imgur.com/ysH0a.png (As an aside, note that FireBug doesn't know that the font color has been overridden by the font tag.) I'm curious what changes specifically you would make to improve it?
    - aboodman 17y ago
      The difference is that the rules are rendered using actual CSS syntax, rather than the section heading control. This makes it very easy to scan because as a web developer, your brain is already trained to parse CSS syntax easily. The controls in the webkit UI may seem richer, but they aren't actually as efficient as the simple code view that Firebug uses.
  - yesimahuman 17y ago
    It wouldn't seem like a big deal, but in practice I've found I greatly prefer firebug's display.

scorxn 17y ago

It also has some presentation issues on longhand overrides of shorthand rules. Eg: If I override margin:0 with margin-top:1em, the margin:0 rule is not struckthrough. Granted, the most accurate way to present that override would be to display margin: 0 0 0 0, with only the first 0 struckthrough. But that deviates from the written code and becomes more difficult to track.

jeff18 17y ago

Could you be more specific? Is it just a font thing?

yesimahuman 17y ago
For my dislike of it? No, it's that I love firebug's way of displaying your CSS entries, and the webkit inspectors way is just less enjoyable to me. I like that in Firebug you inspect your CSS like you would normal CSS, but in inspector it's presented differently. It also has a lot of quirks (try changing a color, it will bork on whitespace in a strange way).
- jeff18 17y ago
  I see this complaint leveraged at the web inspector a lot, but I don't really understand it. It seems like the differences are very subtle. http://i.imgur.com/amWMy.png http://i.imgur.com/amWMy.png vs. http://i.imgur.com/ysH0a.png http://i.imgur.com/ysH0a.png (As an aside, note that FireBug doesn't know that the font color has been overridden by the font tag.) I'm curious what changes specifically you would make to improve it?
  - aboodman 17y ago
    The difference is that the rules are rendered using actual CSS syntax, rather than the section heading control. This makes it very easy to scan because as a web developer, your brain is already trained to parse CSS syntax easily. The controls in the webkit UI may seem richer, but they aren't actually as efficient as the simple code view that Firebug uses.
- yesimahuman 17y ago
  It wouldn't seem like a big deal, but in practice I've found I greatly prefer firebug's display.