Elements

The Elements panel helps you to:

HTML tree view

The Microsoft Edge F12 DevTools Elements panel

  1. Use the Select element (Ctrl+B) tool to locate an element in the HTML tree view by clicking on it in the page.

  2. Use the Element higlighting (Ctrl+Shift+L) tool to locate an element on the page by hovering over it in the HTML tree view.

  3. Open the Color picker (Ctrl+K) tool to see a list of the colors in use on the current page. Clicking on a color on the list will provide further details (Hue, Saturation, Lightness, Alpha). The Color picker also opens when you click on the colored square next to a color value in the Styles pane, allowing you to edit the color of a page element and immediately see the results.

  4. The Accessibility tree (Ctrl+Shift+A) button will open the Accessibility tree pane showing the structure of your page as it would appear to an assistive technology, such as the Windows Narrator screenreader.

  5. You can also Find (Ctrl+F) an element in the HTML tree view by searching for its tag name, attributes, or text content.

Editing elements

You can edit an element by right-clicking on it within the HTML tree view and selecting Edit as HTML from the context menu. The context menu also provides options to delete, cut, copy, paste, set CSS pseudo-classes (:active, :focus, :hover, :visited) and add attributes. Another way to edit an attribute and/or its value is to double-click it from the HTML tree view.

HTML tree view context menu

Note

Editing the HTML tree does not affect the underlying source markup. Refreshing the page will revert your changes and render only the layout determined by the page source. You can Copy your modified HTML to the clipboard by right-clicking the desired element (or the global html element, if you want the entire page) to open up the context menu. (Cut and Paste options are also available).

From the Styles pane you can also add/delete/edit CSS pseudo-states and pseudo-elements.

Tool Panes

Once you have selected a page element of interest, you can use the tool panes to further inspect its different styles and accessibility properties, view its event listeners, and set DOM mutation breakpoints.

Tools panes on the Elements panel

  1. Styles: Currently applied styles organized by stylesheet

  2. Computed: Currently applied styles organized by CSS attributes

  3. Events: Event listeners registered on the current element and ancestor elements

  4. DOM breakpoints: DOM Mutation Breakpoints

  5. Fonts: Currently applied fonts for a selected element

  6. Accessibility: Accessibility properties

  7. Changes: CSS changes made during diagnostic session

Shortcuts

Action Shortcut
Elements panel Ctrl + 1
Element highlighting Ctrl + Shift + L
Select element Ctrl + B
Color picker Ctrl + K
Accessibility tree Ctrl + Shift + A