Changes between Initial Version and Version 1 of Web Inspector


Ignore:
Timestamp:
Nov 7, 2006 5:33:20 PM (16 years ago)
Author:
pewtermoose@gmail.com
Comment:

--

Legend:

Unmodified
Added
Removed
Modified
  • Web Inspector

    v1 v1  
     1= Web Inspector =
     2The Web Inspector allows you to view the live DOM hierarchy in a compact HUD style window.
     3
     4== Getting the Web Inspector ==
     5The Web Inspector is enabled by default on all of the prebuilt [wiki:"Nightly Builds" 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:
     6{{{
     7defaults write com.apple.Safari WebKitDeveloperExtras -bool true
     8}}}
     9
     10This command only needs to be run once.
     11
     12
     13== Using the Web Inspector ==
     14The 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.
     15
     16
     17One 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.
     18
     19
     20The Node pane shows the current node type and name, as well as any element attributes.
     21
     22
     23Under 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.
     24
     25
     26The Metrics pane provides a quick visual look at how margins, borders and padding affect the current node.
     27
     28
     29Various HTML and JavaScript properties, including length of text nodes, offsetWidth/Height, class names, and parent/sibling information are vieweable in the Properties pane.