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-leftto apadding-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.
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:
- 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
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!
i agree, the main reason i prefer firebug is the double-clicking to edit. what i dislike in firebug: it sometimes acts random. sometimes the console doesn’t open or it lags, sometimes it’s jumping between its tabs.
btw, i have read that you’d be looking forward to switch entirely to safari. have you thought about chrome? there is firebug for chrome!
Don’t agree completely, however you did point out a deal breaker I wasn’t aware of:
Not being able to add a CSS-style with a doubleclick seems strange (I always thought they added it, but the only way you can do it is to use the Gear menu and add a style, but that’s not that clean a solution) .
Thanks !
Inherited Styles – people seem to complain if we do have them and if we don’t have them. Who knows what the best answer is!
Autocompletion – is an open bug actively being worked on by a new contributor:
https://bugs.webkit.org/show_bug.cgi?id=17374
Adding CSS Properties – Try pushing the Tab key. Try single click and pause. Try double clicking the white-space. Try editing the style attribute on the element. It works. We will need to improve discoverability in this area but for the most part the capability is there.
Even if you can’t help out with the implementation of your wish-list items, you can help out by opening bugs for each of your wish-list items. To open a new bug against Web Inspector specifically, it’s useful to use this link:
http://webkit.org/new-inspector-bug
Going through that link redirects you into Bugzilla with a bunch of stuff pre-filled for Web Inspector.
Looking forward to seeing your bugs!
Agree with all your points, especially how Firebug shows just the relevant styles by default, and also the handy color differences for margin/padding. This is probably 80% of what I use Firebug for, and it’s unbelievably useful for quickly developing/debugging CSS.
If all I ever had was WebKit inspector I’d probably be happy, but I’ve been spoiled by Firebug.
I also find myself looking for a color picker often. It’s one of the many things I love about TextMate, cmd-shift-c brings up the color in the picker, tweak it a bit and hit OK and it updates the CSS. Deluxe.
I don’t think WebKit will ever feel right to me until they fix the margin/padding coloring. Having it be all blue with borders around margin and padding just feels too confusing (is the border part of the border or the margin or the padding??).
Thanks for putting this together. I think we can address most items if not all.
- I have a patch that reduces clutter: https://bug-36747-attachments.webkit.org/attachment.cgi?id=51948. Tell me if you like it.
- Showing subset of inherited styles is a tough one. We’d like to move to editing CSS as text at some point. And it is great when the snippet being edited matches the source code. We need to think on how to solve this.
- Autocompletion – let’s just do it
- Adding CSS Properties – see Joe’s comments above
- Highlight color – same as autocompletion. Let’s just fix
- Disable/enable to the left is tough due to expandable shorthands
- We should just take color picker from closure of something.
“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.”
You might want to try Firepicker, a simple color picker plugin for Firebug. It does that job so nicely I can’t believe it took me so long to discover (just about a month ago)
Best part is, after discovering Firepicker and realizing that there are now plugins for Firebug, I went on the search. There are a couple more than those I listed below, but they weren’t something I needed.
– FireDiff (track changes in Firebug)
– FireQuery (jQuery enhancements for Firebug)
@pfeldman Awesome, that looks much more friendly to my eyes. Interface elements being in the way of the actual content have stopped me from using the webkit inspector up till today – and I want to bail out of firefox so badly right now.
About displaying the browser style sheet or not: when we develop our css files (outside the browser) this is something we have to override by creating new styles. If you want to enable plain text editing of styles in the future, wouldn’t it make sense to display the browser stylesheet seperately as well? We have to develop independant of the browser anyway.
Something I’d like to add to the wish list: Firebug’s console output is much better than the Web Inspector’s. There’s a bug for that here: Web Inspector: color-code property values in object notation.
[...] I always thought it would be awesome to have a colorpicker in browser developer tools. Who wants to guess at hex colors or open up a separate program just to get a color code? Apparently I’m not the only one who thinks a colorpicker inside the developer toolbar would be nice. [...]