logo

Elements

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.
Image without caption

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.
  1. 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.

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.
💡
In the example below, the list item element has a rule of .border-b defined inline:3 with a property of border-bottom-width: 1px; .
Image without caption

Viewing an element’s layout

The Elements Layout pane show’s the element’s box model and box model properties.
Box model
  • margin
  • border
  • padding
  • dimensions: width, height
Box model properties
  • box-sizing
  • display
  • float
  • line-height
  • position
Image without caption

Viewing an element’s computed 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.
Image without caption

Viewing an element’s event listeners

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.
Image without caption

Was this page helpful?