I wrote a disgruntled tweet about the Web Inspector in Safari today, and when I got a response from Timothy Hatcher, who is a Safari & WebKit Engineer, asking me what would fix that, I thought I’d take some time to go through the whole thing in detail. So here goes.
When Safari 6 launched, I had been a Chrome user for quite a long time, but I really like most of the UI in Safari and I felt like trying something new, so I switched. I was also excited to try the mobile debugging capabilities of Safari 6 (which ARE nice). But I quickly became frustrated with the new Web Inspector. The original inspector that comes with WebKit and Chrome is great. Not perfect, but it has been constantly improving and for most cases it works fine. So I tried switching back to the old one, but that never worked at all for me in Safari (and in later versions they removed the option). I even switched to WebKit Nightlies for a while just so I could use the old inspector.
So, what’s so bad about it then?
Icons are tiny, monochrome and hard to understand. It’s hard to find the icon you want and hard to select when you found it. Some icons (debug!) just make no sense.
The sections are strange. So, there’s a search section. I can also search by pressing ⌘ + F, but that opens a different search box, which just applies to the current file. There’s also a filter box that’s always there and applies to all listings. The separate sections for files, debug and issues means I have to switch back and forth between tabs a lot, when I’m not thrown around from one tab to another by the inspector itself. In general, JS debugging feels clunky
The back and forward buttons, which I never know where they are gonna take me. It just feels like a roulette.
You’d think the breadcrumbs would help. But no. In both the webkit inspector and Firebug, the breadcrumb bar is a nice tool that shows where you are in the hierarchy. In Safari it’s useless. If you are more than a couple of steps down in the heirarcy or if you are watching an element with a lot of classes, all you will see is something like EEEEEE>div.groupwrapper.greybox.striped. And it’s not like hovering will do any good either, like in the Finder.
The css inspector is horrible. There’s option to show :hover, :active or :focus styles (that in itself is a proper dealbreaker for me). Adding styles in unintuitive, the color picker is gone…
There are nice things as well. For example, there’s a tree view for viewin event listeners for an element. It’s hidden under an icon that looks like this: “<>”. Also, it doesn’t look at all like a tree view. You press “Event listeners” and the menu just expands with items that look exactly like the parent one. (screenshot.)
Trying to look what was returned in that ajax call? Prepare to go through that whole json object in one line. No wrapping.
To be honest, I haven’t dug that deep into the web inspector in Safari 6. It just had enough after a while. I’ve gone back to Chrome for my web development needs, but I hope things improve in the future, and the fact that Safari engineers are asking about this makes me confident they are trying to fix these issues.
23 November 2012 by Andreas Eldh