= 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 [wiki:"Nightly Builds" 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\\Application Data\Apple Computer\Safari\WebKitPreferences.plist }}} (where should be your Windows user name): {{{ WebKitDeveloperExtras }}} * '''NOTE:''' If the above does not enable the Inspector, add the above lines into the following: {{{ C:\Documents and Settings\\Application Data\Apple Computer\Safari\Preferences\com.apple.Safari.plist }}} == 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 [http://tinyurl.com/2vqypl 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 [wiki:ProposedWebInspectorUIRefresh plans for a refresh of the Inspector's UI] and [wiki:ProposedWebInspectorRearchitecting plans for a rearchitecting the Inspector]. == Elsewhere == See the item about [http://webkit.org/blog/41 Web Inspector] that [wiki:"WebKit Team#TimothyHatcherxenonreview" xenon] posted to the Surfin' Safari blog. And the [http://webkit.org/blog/108 blog post] announcing the redesigned Web Inspector.