diff --git a/microsoft-edge/devtools/elements-tool/badges.md b/microsoft-edge/devtools/elements-tool/badges.md new file mode 100644 index 0000000000..f698bd2619 --- /dev/null +++ b/microsoft-edge/devtools/elements-tool/badges.md @@ -0,0 +1,296 @@ +--- +title: Badges reference +description: Badges reference. +author: MSEdgeTeam +ms.author: msedgedevrel +ms.topic: article +ms.service: microsoft-edge +ms.subservice: devtools +ms.date: 07/15/2026 +--- + +# Badges reference + + +Toggle various overlays and speed up DOM tree navigation with this comprehensive reference of badges in the **Elements** tool. + + + +## Show or hide badges + + +To show or hide certain badges: + +1. Open DevTools. + +1. Right-click an element in the DOM tree and check one or several badges in the Badge settings sub-menu. + + ![The 'Badge settings' menu] todo png + +The Elements panel shows the selected badges next to the appropriate elements in the DOM tree. The next sections explain every badge. + + + +## View-source + + +The view-source badge is next to the `` tag at the root of the HTML page. Click it to view the source of your page in the Sources panel. + +The 'view source' badge. + +This badge provides an alternative workflow to the View Page Source option in Chrome's page context (right-click) menu: + +In Chrome, right-click > Inspect a page. +In the Elements panel, click the view-source badge next to the `` tag. +Inspect the page source in the Sources panel. + + + +## Grid + + +An HTML element is a grid container if its display CSS property is set to grid or inline-grid. Such elements have grid badges next to them that toggle the corresponding overlays. + +Toggle the overlay on the following preview: + +todo: convert inline code to Demos repo dir + +Inspect the element in the preview. +In the DOM tree, click the grid badge next to the element and observe the overlay. +Grid overlay. + +The overlay shows columns, rows, their numbers, and gaps. + +To learn how to debug grid layout, see Inspect CSS grid. + + + +## Subgrid + + +A subgrid is a nested grid that uses the same tracks as its parent grid. An element is a subgrid container if one or both of its grid-template-columns, grid-template-rows properties are set to subgrid. Such elements have subgrid badges next to them that toggle the corresponding overlays. + +Toggle the overlay on the following preview: + +todo: convert inline code to Demos repo dir + +Inspect the element in the preview. +In the DOM tree, click the subgrid badge next to the element and observe the overlay. +Subgrid overlay. + +The overlay shows columns, rows, their numbers, and gaps of a subgrid. + + + +## Flex + + +An HTML element is a flex container if its display CSS property is set to flex or inline-flex. Such elements have flex badges next to them that toggle the corresponding overlays. + +Toggle the overlay on the following preview: + +todo: convert inline code to Demos repo dir + +Inspect the element in the preview. +In the DOM tree, click the flex badge next to the element and observe the overlay. +Flex overlay. + +The overlay shows child element positions. + +To learn how to debug flex layouts, see Inspect and debug CSS flexbox. + + + +## Ad + + +DevTools can detect some ad frames and tag them. Such frames have ad badges next to them. + +Discover an ad in the following preview: + +todo: convert inline code to Demos repo dir + +Inspect the element in the preview. +In the DOM tree, find an element with the ad badge next to it. +Ad badge. + +The ad badge is not clickable but if you hover over it, you will see a tooltip that provides context on why the element was identified as an ad, such as: + +Ad badge's tooltip. + +Script ancestry: Which scripts were involved in creating the element. +Filter list rules: The specific rule from a filter list (for example, EasyList) that matched the element or the resource it loaded. +You can also use the Rendering tab to highlight ad frames in red. + + + +## Scroll + + +An HTML element is a scroll container if its overflow CSS property is set to scroll, or auto when there's enough content to cause overflow. Such elements have scroll badges next to them. + +Scroll badge on a DOM tree node. + + + +## Scroll-snap + + +Scroll containers can have CSS properties that configure snap points. Such elements have scroll-snap badges next to them that toggle the corresponding overlays. + +Toggle the overlay on the following preview: + +todo: convert inline code to Demos repo dir + +Inspect the element in the preview. +In the DOM tree, click the scroll-snap badge next to the element. +Try scrolling the element to the right and observe the overlay. +Scroll-snap overlay. + +The overlay shows element positions and snap points. + + + +## Container + + +An HTML element is a container if it has the container-type CSS property. Such elements have container badges next to them that toggle the corresponding overlays. + +CSS container queries is an experimental feature. To enable its support in DevTools, under chrome://flags, set the Enable CSS Container Queries experiment to Enabled. Otherwise, the next preview doesn't work. + +Toggle the overlay on the following preview: + +todo: convert inline code to Demos repo dir + +1. CSS container queries is an experimental feature. To enable its support in DevTools, under chrome://flags, set the Enable CSS Container Queries experiment to Enabled. Otherwise, the next preview doesn't work. + +1. Inspect the element in the preview. + +1. In the DOM tree, click the container badge next to the element. + +1. Try resizing the element by dragging its bottom-right corner and observe the layout change and overlay. + + ![Container overlay] todo png + + The overlay shows child element positions. + +To learn how to debug container queries, see [Inspect and debug CSS container queries] todo link. + + + +## Slot + + +The `` HTML element is a placeholder that you can fill with your own content. Together with the `