wiki:WebInspector

Version 2 (modified by timothy@apple.com, 14 years ago) (diff)

--

Web Inspector

The Web Inspector allows you to view the page source, live DOM hierarchy, script debugging, profiling and more!

Enabling Web Inspector

  • Safari — Enable the Develop menu option in the Advanced preferences. Use the optional toolbar button, Develop menu or Inspect Element context menu to access the Web Inspector.
  • Google Chrome — Enabled by default, use the Inspect Element context menu to access the Web Inspector.
  • Any WebKit client — Find the application's bundle identifier. Enter the following command once in Terminal, inserting the bundle identifier, and relaunch the application in order to use the Web Inspector.
    defaults write «bundle-identifier-here» WebKitDeveloperExtras -bool 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.

See Safari User Guide for Web Developers for more details on other panels of the Web Inspector.

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.

Related Blog Posts

Web Inspector Updates
Building a Better JavaScript Profiler with WebKit
Web Inspector Redesign
Yet another one more thing… a new Web Inspector!
Introducing the Web Inspector

Shortcut Keys

Safari

Show Web Inspector ⌥⌘I
Show Error Console ⌥⌘C
Start Profiling Javascript ⌥⇧⌘P

Web Inspector

Next Panel ⌘]
Previous Panel ⌘[
Toggle Console Esc
Focus Search Box ⌘F
Find Next ⌘G
Find Previous ⇧⌘G

Console

Next Suggestion Tab
Previous Suggestion ⇧Tab
Accept Suggestion Right
Execute Return

Elements Panel

Navigate Up/Down
Expand/Collapse Node Right/Left
Expand Node Double-Click on tag
Edit Attribute Return or Double-Click on attribute

Styles Pane

Edit Rule Double-Click
Edit Next/Previous Property Tab/⇧Tab
Insert New Property Double-Click on whitespace
Increment/Decrement Value Up/Down
Increment/Decrement Value by 10 ⇧Up/⇧Down
Increment/Decrement Value by 10 PageUp/PageDown
Increment/Decrement Value by 100 ⇧PageUp/⇧PageDown
Increment/Decrement Value by 0.1 ⌥Up/⌥Down

Debugger

Select Next Call Frame ⌃.
Select Previous Call Frame ⌃,
Continue F8 or ⌘/
Step Over F10 or ⌘'
Step Into F11 or ⌘;
Step Out ⇧F11 or ⇧⌘;
Evaluate Selection ⇧⌘E
Toggle Breakpoint Condition Click on line number
Edit Breakpoint Condition Right-Click on line number

Attachments (2)