Hi, you're looking at the archives. Go to the homepage to see the current version of lensco.be.

WebKit Inspector wish list11

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-left to a padding-right takes 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.

Of course, since WebKit is an open source project, I hear you saying: “Why don’t you fork it and start hacking?” Unfortunately my Javascript skills are way too insufficient, so I’m afraid I’m limited to writing posts like this one …

Update 24/04/10: As commenter Patrick Mueller mentioned, there’s also the option of filing bugs. And that’s what I did:

As Joseph Pecoraro wrote, there is already an active bug concerning autocompletion.

And then there’s the cluttered UI, for which Pavel Feldman has opened bug #36747. I took his original mockup and tweaked it a bit further, which he then added to the official bug as well. Here it is:

Finally a little hat tip to Jose who pointed me to Firepicker – a very nimble but useful color picker for Firebug. Great!

11 comments comment feed

Latest …