Once again, the WebKit team (and community) pushed a nice slew of updates to their Web Inspector. Web developers more and more seem to be making the switch from Firebug. If you’re a web designer however, Firebug is still the way to go. I’d love to switch to Safari full time though, so here’s what I’d like to see in the WebKit Inspector.
Firebug vs. the WebKit Inspector, both inspecting the same paragraph.
- If you compare the screenshots above, you’ll notice how Firebug is a lot less cluttered. It doesn’t show user agent styles (although you can toggle them on) nor element styles when there are none. And what’s with all the horizontal bars anyway? Firebug’s tabs interface for styles, computed styles and metrics looks a lot cleaner to me.
- Showing inherited styles is great, but I prefer the Firebug way of only showing relevant styles.
- Autocompletion is available throughout Firebug. I do know the properties by heart, but autocompletion makes things a lot quicker and less error-prone. You can also quickly jump through the autocompletion list with the arrow keys. Changing a
padding-righttakes me just one click and two keystrokes in Firebug.
- Adding CSS properties is a lot easier in Firebug: just doubleclick somewhere in the empty space of a styles block and it adds a new line. It also splits properties and values in two seperate fields which you can easily tab trough. Compare that to WebKit where you’ll have to add your new property into another properties’ input field, which is just awkward.
- Firebug adds colored margins and paddings when you hover over DOM elements to make them easy to distinguish – margins are yellow, padding is purple. In WebKit, it’s all blue.
- Maybe this is nitpicking, but it makes a lot more sense to me to put the disable/enable property checkbox in front of the property.
- What Firebug doesn’t have either, but which I’d deem very useful, is an integrated color picker. Both for sampling colors on the web page, and for selecting colors for properties.
Update 24/04/10: As commenter Patrick Mueller mentioned, there’s also the option of filing bugs. And that’s what I did:
- Bug #37766: provide a way to hide user agent styles
This was originally planned for user agent styles back in 2006, but I confirmed it with the original author: it was never implemented.
- Bug #37767: remember split pane positions
A little annoyance I didn’t mention before, but it just makes sense.
- Bug #37768: differentiate element highlight colors for margin and padding
- Bug #37770: put checkbox to disable/enable styles to the left of the property