Console Snippets
Console Snippets are JavaScript resources created in and persisted by Web Inspector for evaluating pre-written JavaScript code in the Console, instead of having to write the (same) JavaScript code over and over (or copying and pasting).
Symbolic Breakpoints
Symbolic Breakpoints can be useful when debugging calls to native functions or when trying to set breakpoints inside multiple functions with the same name.
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 […]
URL Breakpoints
URL Breakpoints can be useful when debugging network requests initiated from a JavaScript API, such as XMLHttpRequest or fetch.
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.
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.
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.
JavaScript Breakpoints
If you’ve ever used Xcode to debug an application, Web Inspector supports many of the same features, including setting breakpoints.
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.
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.