Web Inspector

The Web Inspector allows you to view the page source, live DOM hierarchy and resources.

​http://webkit.org/blog/wp-content/uploads/2007/06/newinspector.png

Getting the Web Inspector

The Web Inspector is enabled by default on all of the prebuilt nightly builds.

Enabling Web Inspector

• On the Mac, 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).

• On Windows, you'll have make sure that the following lines are in your preferences file at the location

  C:\Documents and Settings\<USERNAME>\Application Data\Apple Computer\Safari\WebKitPreferences.plist 
  

(where <USERNAME> should be your Windows user name):

    <key>WebKitDeveloperExtras</key>
    <true/>

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.

Hacking on the Web Inspector

Most of the Web Inspector's code is HTML, JavaScript, and CSS, so it's very easy to implement new features and fix bugs! Click here to see a ​list of Web Inspector bugs and feature requests. Any of the bugs listed as "OS/Plt/Platform: All" are cross platform and should only require changes in the HTML, JavaScript, or CSS.

See plans for a refresh of the Inspector's UI and plans for a rearchitecting the Inspector.

Elsewhere

See the item about ​Web Inspector that xenon posted to the Surfin' Safari blog. And the ​blog post announcing the redesigned Web Inspector.