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

URL Breakpoints

URL Breakpoints

URL Breakpoints can be useful when debugging network requests initiated from a JavaScript API, such as XMLHttpRequest or fetch.

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

Local Overrides

Local Overrides

As web development workflows have gotten more complicated, it’s become increasingly difficult to make quick changes to a resource and upload it to a server to test.

Read more

JavaScript Breakpoints

JavaScript Breakpoints

If you’ve ever used Xcode to debug an application, Web Inspector supports many of the same features, including setting breakpoints.

Read more

Inspector Bootstrap Script

Inspector Bootstrap Script

The Inspector Bootstrap Script is a JavaScript snippet created in and persisted by Web Inspector that is guaranteed to be the first script evaluated after any new JavaScript global object is created in any page, including <iframe>, regardless of URL, so long as Web Inspector is open.

Read more

Event Breakpoints

Event Breakpoints

Event Breakpoints can be useful when debugging DOM interactions in JavaScript.

Read more

DOM Breakpoints

DOM Breakpoints

DOM Breakpoints can be useful when debugging DOM modifications in JavaScript.

Read more