Web Inspector

The Web Inspector allows you to view the live DOM hierarchy in a compact HUD style window.

​http://webkit.org/blog/wp-content/webInspector.png

Getting the Web Inspector

The Web Inspector is enabled by default on all of the prebuilt nightly builds. If you are using a locally built version of WebKit, you'll need to enter the following command in Terminal and restart Safari in order to use the Web Inspector (this command only needs to be run once):

defaults write com.apple.Safari WebKitDeveloperExtras -bool true

OmniWeb also features the Web Inspector from version 5.5 on. It can be enabled using the command above (replacing com.apple.Safari with com.omnigroup.OmniWeb5).

Using the Web Inspector

The Web Inspector can be opened by right clicking anywhere on a web page and choosing Inspect Element. Once open, it 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.

The Node pane shows the current node type and name, as well as any element attributes.

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.

The Metrics pane provides a quick visual look at how margins, borders and padding affect the current node.

Various HTML and JavaScript properties, including length of text nodes, offsetWidth/Height, class names, and parent/sibling information are vieweable in the Properties pane.