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.
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.
- Click the arrow-in-box icon in the Console to turn on selector mode.
- 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.
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
grayto 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.
In the example below, the list item element has a rule of
inline:3with a property of
The Elements Layout pane show’s the element’s box model and box model properties.
- dimensions: width, height
Box model properties
The Elements Panel Computed Properties pane shows the element’s current property values. This shows all the properties that have a set value for the element and the rules setting the property.
- Expand a property to see the applied rules. Rules that are defined but not applied are shown with a strikeout.
- Filter by style to see the matching properties.
The Event Listeners tab shows any event listeners attached to the selected HTML element and the event handler. Click the source for an event listener to jump directly to the handler in the Editor.