New Chrome DevTools Elements Panel Badges: scroll, overflow, and More
Chrome 130’s DevTools Elements panel introduces a new scroll badge to highlight scrollable elements, along with upcoming overflow badges, and details how various built‑in badges like grid, flex, ad, scroll‑snap, container, slot, top‑layer, media, and subgrid help developers diagnose layout and rendering issues.
In Chrome version 130, the DevTools Elements panel adds a scroll badge specifically for marking scrollable elements on a page, making it easier to locate and resolve unexpected scrollbars.
The Chrome team is also developing a new "overflow" badge to clearly indicate elements whose content overflows, helping developers quickly diagnose layout problems.
Besides the new scroll badge, the Elements panel offers many useful badges accessible via Badge setting.. in the context menu.
grid: Grid Layout
If an element’s display property is set to grid or inline-grid , it becomes a grid container and a grid badge appears next to it, allowing you to view detailed layout information.
flex: Flex Layout
When an element’s display is flex or inline-flex , it is a flex container and a flex badge is shown, which you can click to inspect the flex layout.
ad: Advertising Framework
This badge marks sections of a page that use advertising frameworks, indicating they are for ad display.
scroll-snap: Scroll Snap
If an element’s overflow is set to scroll or auto , it becomes a scroll container and a scroll-snap badge appears to help you view its scroll content.
container: Container Queries
When an element has a container-type property, it is recognized as a container and a container badge is displayed next to it.
slot: Slot
The <slot> element in HTML acts as a placeholder that can be filled with custom content. A slot badge appears next to filled content, and a reveal badge lets you step back to view the slot’s content.
A slot badge appears beside the filled content; clicking it shows the corresponding slot.
A reveal badge appears next to the slot; clicking it returns to the previous view.
top-layer: Top‑Layer Element
The top-layer badge highlights elements that sit at the top of the DOM tree, linking to the corresponding entry in the #top-layer container for easy navigation.
media: Media
The media badge is off by default; when enabled, it appears next to <audio> and <video> elements, and clicking it opens the Media panel for debugging.
subgrid: Nested Grid Layout
If an element’s grid-template-columns or grid-template-rows is set to subgrid , it becomes a subgrid container and a subgrid badge appears.
IT Services Circle
Delivering cutting-edge internet insights and practical learning resources. We're a passionate and principled IT media platform.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.