= 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. 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 [http://developer.apple.com/safari/library/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/UsingtheWebInspector/UsingtheWebInspector.html 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 [http://tinyurl.com/2vqypl list of Web Inspector bugs and feature requests]. == Related Blog Posts == [http://webkit.org/blog/829/web-inspector-updates/ Web Inspector Updates] [http://webkit.org/blog/197/web-inspector-redesign Web Inspector Redesign] [http://webkit.org/blog/108/yet-another-one-more-thing-a-new-web-inspector Yet another one more thing… a new Web Inspector!][[BR]] [http://www.travelallrussia.com/tours/ Russia tours] [http://webkit.org/blog/41/introducing-the-web-inspector Introducing the Web Inspector] == Shortcut Keys == === Safari === || || Mac || Windows / Linux || || Show Web Inspector || ⌥⌘I || Ctrl-Alt-I || || Show Error Console || ⌥⌘C || Ctrl-Alt-C || || Start Profiling Javascript || ⌥⇧⌘P || Ctrl-Alt-P || === Chrome & Chromium === || || Mac || Windows / Linux || || Show Web Inspector || ⌥⌘I || Ctrl-Shift-I || || Show Error Console || ⌥⌘J || Ctrl-Shift-J || === Web Inspector === || || Mac || Windows / Linux || || Next Panel || ⌘] || Ctrl-] || || Previous Panel || ⌘[ || Ctrl-[ || || Toggle Console || Esc || Esc || || Focus Search Box || ⌘F || Ctrl-F || || Find Next || ⌘G || Ctrl-G || || Find Previous || ⇧⌘G || Ctrl-Shift-G || === Console === || || Mac || Windows / Linux || || Next Suggestion || Tab || Tab || || Previous Suggestion || ⇧Tab || Shift-Tab || || Accept Suggestion || Right || Right || || Previous Command / Line || Up || Up || || Next Command / Line || Down || Down || || Previous Command || ⌃P || || || Next Command || ⌃N || || || Clear History || ⌘K or ⌃L || Ctrl-L || || Execute || Return || Enter || === Elements Panel === || || Mac || Windows / Linux || || Navigate || Up/Down || Up/Down || || Expand/Collapse Node || Right/Left || Right/Left || || Expand Node || Double-Click on tag || Double-Click on tag || || Edit Attribute || Return or Double-Click on attribute || Enter or Double-Click on attribute || === Styles Pane === || || Mac || Windows / Linux || || Edit Rule || Double-Click || Double-Click || || Edit Next/Previous Property || Tab/⇧Tab || Tab/Shift-Tab || || Insert New Property || Double-Click on whitespace || Double-Click on whitespace || || Increment/Decrement Value || Up/Down || Up/Down || || Increment/Decrement Value by 10 || ⇧Up/⇧Down || Shift-Up/Shift-Down || || Increment/Decrement Value by 10 || PageUp/PageDown || PageUp/PageDown || || Increment/Decrement Value by 100 || ⇧PageUp/⇧PageDown || Shift-PageUp/Shift-PageDown || || Increment/Decrement Value by 0.1 || ⌥Up/⌥Down || Alt-Up/Alt-Down || === Debugger === || || Mac || Windows / Linux || || Select Next Call Frame || ⌃. || Ctrl-. || || Select Previous Call Frame || ⌃, || Ctrl-, || || Continue || F8 or ⌘/ || F8 or Ctrl-/ || || Step Over || F10 or ⌘' || F10 or Ctrl-' || || Step Into || F11 or ⌘; || F11 or Ctrl-; || || Step Out || ⇧F11 or ⇧⌘; || Shift-F11 or Ctrl-Shift-; || || Evaluate Selection || ⇧⌘E || Ctrl-Shift-E || || Toggle Breakpoint Condition || Click on line number || Click on line number || || Edit Breakpoint Condition || Right-Click on line number || Right-Click on line number || == WEb INspector REmote experiment == [http://developer.apple.com/safari/library/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/UsingtheWebInspector/UsingtheWebInspector.html Safari User Guide for Web Developers] In early 2010, an experiment was made to get Web Inspector to run in a plain old web page, debugging a remote web browsing session in another browser window. A write-up is available here: [http://muellerware.org/papers/weinre/manual.html weinre - WEb INspector REmote], and the relevant source and demo archives are attached to this page.