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.
Timelines Tab
The Timelines Tab contains all of the performance profiling and introspection tools provided by Web Inspector, organized into different timelines each with their own area of interest and specialized interface.
Audit Tab
The Audit Tab contains collections of audits, each of which can be run against the inspected page to check for incorrect DOM structure, missing accessibility attributes, correct design system rules, and much more.
Web Inspector Settings
Developers often have varying preferences or workflows that can significantly affect their productivity.
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.
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.