Elements Tab

Elements Tab

The Elements Tab is the primary source of information for anything related to the DOM of the inspected page.

Read more

Timelines Tab

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.

Read more

Layers Tab

Layers Tab

After the position and size of each DOM node has been calculated, they are drawn onto a series of surfaces called layers, which are then composited in a particular order to produce the resulting appearance of the web page.

Read more

Audit Tab

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.

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

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

DOM Breakpoints

DOM Breakpoints

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

Read more

Console Object API

Console Object API

The console object is arguably one of the most useful debugging tools available for JavaScript.

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