The Elements panel is your magnifying glass into the HTML and CSS styling for the elements of your application. Access the panel by clicking the Elements tab in the Console.

Inspecting an element

When the Elements panel is open, you can select an element in the viewer to see the HTML, CSS, and even event listeners for that element.

1. Click the arrow-in-box icon in the Console to turn on selector mode.
2. Hover over the viewer to see available elements and click on one to select.

The HTML for the selected element will automatically highlight in the Elements panel. You can also click on any HTML element directly in the panel, or search the HTML.

Climatescape __ SAF+ - 25 January 2022.mp4

Viewing an element’s rules

When you select an element in the markup pane, you can see its applied CSS rules in the Rules tab.

• Filter Styles to find matching styles. For example, search gray to see rules with gray in the definition or a property.
• CSS Rules shows the rules that matched the element, sorted by precedence, and the location of the rule definition.
• Properties shows the properties that style the element. Properties that are defined in the rule but not applied have a strikeout.