Web Inspector, a DOM inspector for WebKit
Very cool feature from the WebKit team, coming soon to a Safari near you – the Web Inspector:
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.
Just like the “Hoist” feature of many outliners.
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.
A good DOM inspector is useful for picking through other people’s code, and for debugging, but it’s also a great learning tool. Imagine a CSS lesson that builds from the basics up through complicated cascading examples, backed up by the visual evidence of something like Web Inspector.
Top make it work, just:
- Download a recent nightly build
- Turn it on:
defaults write com.apple.Safari WebKitDeveloperExtras -bool true - Launch WebKit.app
- Ctrl-click on any element and choose “Inspect Element” to bring up the Inspector.
Very cool!
(I could be wrong, but I don’t imagine that this kind of excellent but geeky functionality would have ever made its way into Safari if WebKit wasn’t an open source project.)