Safari’s new “Web Inspector”

The WebKit team has added a tool that's sure to become a web developers new …

The WebKit team has added a tool that's sure to become a web developers new best friend. This morning, Xenon a contributor to the WebKit open source project and author on the WebKit blog, announced the addition of a web inspector panel (ala iPhoto) to the nightly WebKit builds. The panel allows web developers to browser the current web page's DOM tree and inspect CSS styles and classes applied to any node of the layout:

The Web Inspector highlights the node on the page as it is selected in the hierarchy. You can also search for nodes by node name, id and CSS class name... One of the unique features of the inspector is the ability to root the DOM hierarchy by double clicking a node to dig deeper. This lets you easily manage large nested pages and only focus on a particular sub-tree with minimal indentation... Under the Style pane we show all the CSS rules that apply to the focused node. These rules are listed in cascade order with overridden properties striked-out—letting you truly see how cascading stylesheets affect the page layout. All shorthand properties have a disclosure-triangle to show and hide the expanded properties created by the shorthand.

If you've ever used the DOM Inspector in FireFox then you'll probably be right at home with this beefed up, and surprisingly attractive, alternative for the most popular Mac browser.