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