WebKit’s New Element Inspector

June 21st, 2007

The WebKit team is picking up on Steve Jobs’s “one more thing” habit, announcing yesterday a new HTML element inspector, built into the latest WebKit nightly downloads.

Play around with it for just a few minutes and your jaw will drop. It’s especially fun to click around the DOM hierarchy and watch as WebKit obscures everything except what you’re inspecting. It makes it dead-simple to cruise around and get the lay of the land on any web page. You can start inspecting at any element on the page by right-clicking and selecting “Inspect Element.”

The inspector’s functionality doesn’t stop at merely poking around the DOM. Click the disclosure button in the lower-left corner to reveal two other nifty tools: Console and Network. Console gives you a nifty little JavaScript interface to the targeted page, which is a lot handier than typing all of your test commands into the URL box with “javascript:” URLs. And the Network tool is sort of a mini-Shark performance tool for the web. It shows you how long it took to load every element on the page, and in what order they were loaded. It even offers advice for performance tuning!

But what’s extra especially shocking and impressive is that this beautiful (no more HUD display!) UI is itself implemented entirely in HTML/CSS. To prove it, just right-click on any item in the inspector window itself, and inspect it!

You can use the inspector to see how the inspector pulls off some pretty impressive tricks to make the plain HTML/CSS look and feel more or less like a desktop app. While I don’t envy anybody trying to replicate the feel of Cocoa in HTML, I am quite impressed with the overall polish and usability of this interface.

Major congratulations are in order to the WebKit team for this amazing update in functionality. The one thing that screams out at me as missing, however, is the ability to edit the CSS for inspected elements directly from the inspector. I’m sure this is a feature many web developers would love to see. It’s something that keeps me running FireFox from time to time, just to accelerate that part of the web design process.

I propose that if some up-and-coming developer was to implement editable CSS for the WebKit element inspector, they would have heaped upon them the praise of many, many Mac developers and web designers. Not to mention the WebKit team itself.

Maybe this is your chance to break into the spotlight?

12 Responses to “WebKit’s New Element Inspector”

  1. charles Says:

    Wouldn’t they be stepping on MacRabbit’s toes, though? :-(

  2. Nithin Says:

    ^ my thoughts exactly. What are the chances of this build showing up in Safari 3?

  3. Daniel Jalkut Says:

    I would tend to consider the degree of support that is likely to go into the UI Inspector as falling far short of what is available in CSSEdit, or any other such 3rd party products.

    Think of it more like the support for RSS in Safari. It’s really awesome to have it available *everywhere* for free, even though it’s clearly worth spending the extra money for NetNewsWire and have a better complete experience with syndication.

    In general the software industry is about an ever evolving level of “commodity” functionality, on which the salable products are built. Consider WebKit itself which itself makes “HTML rendering” a commodity enterprise, while leaving the door still wide open for competition in the complete browser experience.

  4. Ryan Ballantyne Says:

    Forgive me for a bit of lazyness in not checking this out for myself…how does it compare to Firebug? I’ve held out on using the WebKit nightlies simply because I want to develop against the current release version rather than a future version that may be subject to change.

  5. ssp Says:

    I thought the old Web Kit Inspector was quite impressive (and tremendously useful) already. But this bests it again. The only advantage of the old inspector is its size. While the MacBook’s screen isn’t exactly small, using this inspector while viewing a reasonable part of a page and hopefully seeing some text editor windows as well is ‘tricky’ at least.

  6. Jens Ayton Says:

    Y’know, all those drop shadows/glows on the text is just showing off. :-)

    Ryan, you can run a WebKit nightly side by side with the release version of Safari (2.x or 3 beta). Unlike the beta, the nightlies do not replace WebKit for other apps by default.

  7. Josh Monroe Says:

    So, how about this, CSSEdit uses webkit, if you just tell CSSEdit to use the nightly, you can use the web inspector in CSSEdit’s Preview window. This means that you can have it all in one app. Although not in one screen. I suppose if there is the functionality to get this information out of webkit to display then, MacRabbit, could also whip up the functionality to show what properties have been overridden.

  8. Zac Says:

    CSS Edit (http://macrabbit.com/cssedit/) does allow you to edit the CSS code of a website in the application. Its quite simple to get it to preview a page and then start to edit the CSS code in CSS Edit to see effective live updates as you edit the code.

    It not the same as you are suggesting but I would rather have this sort of functionality in a full CSS editor than see it in a DOM inspector.

    Bulking up utilities like that seems to be a Windows sort of thing to do.

  9. Daniel Jalkut Says:

    Zac: I don’t really see it as bulking up, but I take your point. I think when something reads and displays something beautifully, it’s a natural extension to expect it should be able to write it, too.

  10. Zac Says:

    What I would be wholeheartedl for is them simply opening up hooks in the Inspector to allow people to get/inject new CSS.

    Then you could inspect an element and open just that CSS in CSS Edit or Coda and update it

    That might be interesting.

  11. Ben Says:

    Webkit inspector is very much, albeit with fewer features, a clone of Firebug which is the preeminent web developers friend in Firefox. Two major advantage that firebug has over webkit inspector is the ability to edit styles in-line and see them applied to the whole page and the ability to dynamically display changes to the DOM as they happen. I think that it is a good thing that WKI is copies Firebug so closely. Now I only need to learn one tool to do debugging in two different browsers. I look forward to WKI’s continuing evolution.

  12. Tom Says:

    Firebug also has much more advanced Javascript debugging features, which WebKit has some of in Drosera, which I hope will be integrated with WebKit / Web Inspector more closely.

Comments are closed.

Follow the Conversation

Stay up-to-date by subscribing to the Comments RSS Feed for this entry.