Elements Tab
The Elements Tab is the primary source of information for anything related to the DOM of the inspected page.
Layers Tab
After the position and size of each DOM node has been calculated, they are drawn onto a series of surfaces called layers, which are then composited in a particular order to produce the resulting appearance of the web page.
Keyboard Shortcuts
Web Inspector Open / Close Web Inspector ⌥ ⌘ I Connect / Disconnect Web Inspector ⌥ ⇧ ⌘ I Go to file or resource… ⇧ ⌘ O or ⌘ P Reload Reload inspected page ⌘ R Reload inspected page from origin ⌥ ⌘ R Appearance Docking Configuration Switch to previous docking configuration ⇧ ⌘ D Zoom Increase zoom ⌘ + or ⇧ ⌘ + Decrease zoom ⌘ – or ⇧ ⌘ – Reset […]
Web Inspector Settings
Developers often have varying preferences or workflows that can significantly affect their productivity.
Page Overlay
When trying to inspect the DOM/CSS of any page, often the first step is finding the specific DOM node in the DOM Tree of the Elements Tab.
Event Breakpoints
Event Breakpoints can be useful when debugging DOM interactions in JavaScript.
DOM Breakpoints
DOM Breakpoints can be useful when debugging DOM modifications in JavaScript.