Elements tab
The Elements tab shows the current state of the webpage’s Document Object Model (DOM), including pseudoelements, as an editable tree outline. When a DOM element is selected in the outline, additional information about that element is available in the details sidebar.
Note: The Elements tab is not available if you are inspecting JSContext objects.
Jump bar Lists the nesting structure of the selected DOM element.
DOM tree outline Shows the HTML for web content in a nested structure.
Details sidebar Displays the style, layer, and node properties for the currently selected web content. If the sidebar isn’t visible, click the 
button to the right of the jump bar.
Console prompt Evaluate JavaScript quickly within any tab.
Enable print styles Toggles the document’s @media type to ‘print’ when viewing web content. The print stylesheet includes the CSS styles for web content when it is printed onto paper. By default, web content is rendered with the @media type of ‘screen’.
Show shadow DOM nodes Displays all shadow DOM nodes in the tree outline. It is enabled by default.
Show compositing borders Displays guide overlays on the inspected web content to show the position and state of compositing layers when turned on. This feature is turned off by default. See also Enable Compositing Borders feature in Elements tab.
Enable paint flashing Makes it easy to visualize which parts of web content are being repainted frequently. See also Enable Paint Flashing feature in the Elements tab.
Show/Hide details sidebar Toggles the details sidebar.
Node properties section Displays information about the selected element, including DOM Identity, Attributes, Properties, Event Listeners, and Accessibility information.
Styles section Displays the computed CSS properties and editable CSS rules.
Layers information section Displays information about the compositing layer for the selected DOM element, including a list of child layers.