Web Inspector Interface
Web Inspector is divided into six main areas.
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.
The Sources Tab is the one-stop shop for all things related to the inspected target’s resources, including dynamic resources from things like XMLHttpRequest or fetch.
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.