Safari/WebKit has a new Web Inspector

One of the new things in the Safari 3 beta that I mentioned in Safari 3 beta impressions is that Safari now has a very useful developer tool called the Web Inspector.

The Web Inspector is opened by right-clicking and selecting “Inspect Element” from the contextual menu, and provides some of the features that the Firebug extension does for Firefox, but not nearly as advanced (yet). The Web Inspector is currently Mac-only as it is not available in the Safari 3 beta for Windows. But big changes are coming.

In recent WebKit nightly builds, both Mac and Windows versions have a brand new Web Inspector, which is very different from the old one. The new Web Inspector, as mentioned in Yet another one more thing… a new Web Inspector! at Surfin’ Safari:

  • Has a completely redesigned interface
  • Works inside third-party applications, not just Safari
  • Is dockable to the inspected page
  • Shows all resources included by the page, sorted into categories (documents, stylesheets, images, scripts, and other)
  • Can search all text-based resources
  • Has a console that show errors and warnings with live JavaScript evaluation
  • Features a Network panel that shows loading time for each resource, and optionally HTTP request and response headers
  • Displays syntax highlighted HTML
  • Has inline JavaScript and HTML error reporting

Here’s what the Web Inspector looks like when viewing the DOM:

The WebKit Web Inspector displaying the CSS properties of the selected DOM element.

The Web Inspector’s network panel looks like this:

The WebKit Web Inspector displaying the Network panel, showing load times for all resources.

After playing around with it for a while, my impression is that though the Web Inspector still is not as feature rich as Firebug, the new version is a great improvement. If it had live editing of HTML and CSS and a few more of Firebug’s features, the Web Inspector would make Safari a great tool for Web developers.

Posted on June 27, 2007 in Browsers

Comments

  1. How do you get to this web inspector? Can you access it through the Safari 3 beta (3.0.2) on OSX?

  2. June 27, 2007 by Tom von Schwerdtner

    I have not been able to uncover the web inspector in Safari 3. My right click menu only has Reload, View Source, Save Page As… and Print Page….

    I’ve been using WebKit nightlies to get that functionality, but I feel like my Safari 3 is missing something…

  3. June 27, 2007 by Roger Johansson (Author comment)

    Damon: Right-click anywhere in the Safari viewport and choose “Inspect Element” from the contextual menu.

    Tom: Hmm. Yeah, it seems like there is a problem, unless you are using the Windows version - the Web Inspector is not yet available in Safari for Windows, only in WebKit nightlies.

  4. It’s a great inspector. And since it can be attached to any WebKit based application, as Drosera can, I’d like to see those two get rolled into one (a la Firebug).

    One knock I’ll give it from a UI perspective is that it requires tons of real estate on my screen. The WebKit team touted the fact that it was no long HUD, but I kind of liked that (it allowed me to still see the underlying page). With this new inspector, if you have it pinned to the window, you can’t give it more vertical space than the default. If you have it unpinned, it takes up so much room to read things, it obsures the page you’re inspecting (especially on a laptop). The same complaint extends to the columns. They look like they’re supposed to be resizable but they are not.

    To be fair, it’s the first release of it. It’s already and expansion on the previous version. So I think it’s fair to assume they’ll continue to improve it.

  5. You need to enable the Web Inspector by running this command in Terminal:

    defaults write com.apple.Safari WebKitDeveloperExtras -bool true

    As far as I know, this should also be possible to enable in Windows by editing the .plist-file, adding a new name/value-pair to the dictionary.

  6. Roger, the new Inspector is available in the Windows version as well. You might have to set the key Frode mentioned, but it’s definitely there (though there are a few glitches). I believe the OS X nightlies set that key when they run but I’m not sure about the Windows ones.

    Tom, the resize handle on the left sidebar works if you download the latest nightly.

  7. Oops, I should learn to read. I misunderstood your comment, Roger - ignore me :)

  8. Roger, how’s the Web Inspector compared to the one of CSSEdit?

    I’m sorry for asking, but I also can’t seem to find it in Safari 3…

  9. I totally love it! It helped me to move over from Firefox to Safari. Just hoping that they will soon release a feature, allowing us to edit css, html and javascript! Go Webkit!!!

  10. To get the Web Inspector working for me (Safari 3.0.3 for Windows beta), I had to add:

    <key>WebKitDeveloperExtras</key>
    <true/>
    

    to WebKitPreferences.plist, not Preferences.plist (which is where IncludeDebugMenu goes).

    This was the source of some head scratching for me; hope it helps someone else.

  11. September 13, 2007 by chrismarx

    yes, very helpful!! where ever did you find that?

  12. October 11, 2007 by Ashish M

    Jeffery, thanks for your comment. It helped me get the Web Inspector to work.

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.