Safari/WebKit has a new Web Inspector

One of the new things in the Safari 3 beta 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:

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