Web Inspector Interface

Web Inspector Interface

Web Inspector is divided into six main areas.

Read more

Keyboard Shortcuts

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 […]

Read more

Web Inspector Settings

Web Inspector Settings

Developers often have varying preferences or workflows that can significantly affect their productivity.

Read more

Sources Tab

Sources Tab

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.

Read more

Script Blackboxing

Script Blackboxing

Often when debugging a website that uses JavaScript libraries/frameworks, the JavaScript debugger will still pause JavaScript execution in the JavaScript library/framework.

Read more

Page Overlay

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.

Read more

Console Command Line API

Console Command Line API

One of the most useful parts of Web Inspector is being able to generate interactive visualizations of any value in the Console.

Read more