Safari, So Good
Apple released an update for Safari yesterday, bringing it to 3.1. While they have added a lot of advanced, HTML 5 features, I was most intrigued by the new developer tools.
The Web Inspector can be displayed in a separate window, or as a frame at the bottom of the browser window. Given enough screen real-estate, it works better in a separate window, as for some reason, they didn’t make the bottom frame sizable.
The inspector lists all documents, stylesheets, images, scripts, and “other” in a tree on the left side of the window. Clicking on one allows you to view it. When viewing a document, you have the choice to see it as straight source, or in a DOM view. The DOM view provides expand/collapse arrows, and this is where it starts getting really useful.
Clicking on a row in the DOM view will show that particular object by darkening all other areas within the browser window and outlining it in white. A right-hand column in the inspector lists the “computed style” for the selected object, with the option to view inherited properties. It also shows the specific styles assigned to the object. You can also view metrics—a diagram listing the values for margins, borders, padding, and the object itself. Also in the right-hand column is a detailed property list. The bottom of the inspector provides a breadcrumb trail to the selected object.
The inspector also provides a “Network” view. This is a color-coded graph that shows the number of milliseconds each piece of the page took to load, and in what order. It provides suggestions for saving bandwidth, as well as detailed meta-data about each item. Finally, a color-coded bar at the bottom shows transfer size of the parts that make up the page.
The one thing it’s missing that I use constantly in Firebug is the ability to click on objects within the rendered page to select them in the inspector. It is possible to do this in Safari, but you do it through a contextual menu, and there is no visual indication of the page structure until you have selected something. Firebug outlines object boundaries as you move the cursor over them. Also, there doesn’t seem to be a way to edit the source and see the changes rendered in real time, which is another huge benefit of Firebug.
While I’ve only played with it briefly, it seems pretty slick. It promises to be a useful addition to a quality web browser.
3/19/08 Correction: You can edit the styles in the right-hand column and see the effects in real time.