Safari’s new Web Inspector

WebKit and thus Safari just got a new, totally sweet Web Inspector palette—the best browser for the Mac just got better!

The Web Inspector lets you browse the live DOM hierarchy in a compact HUD style window, catering to the needs of web developers and WebKit hackers alike.

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.

To get all this webdev glory, just follow the instructions on Surfin’ Safari.

Next step: please add a decent JavaScript debugger! 🙂