The Elements Tab is the primary source of information for anything related to the DOM of the inspected page.
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.
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.
Web Inspector Settings
Developers often have varying preferences or workflows that can significantly affect their productivity.
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.
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.
If you’ve ever used Web Inspector before, chances are you’ve used (or are at least familiar with) the Develop menu.