tool · one of 34free, no counter
Layers
How many wrappers is this page actually carrying?
An element panel answers *what* is nested, one row at a time, and reading depth out of it means counting indentation down a scrolling tree. Tipped over, the same page answers *how deep* everywhere at once: each level of nesting lifts onto its own plate, coloured by depth, and the shape of the whole document is one glance. Six wrapper `<div>`s around a button do not look like anything in a tree. As six stacked plates over a page that is otherwise two, they are the only thing on screen.
Reach itPress ⌘+K on any tab and type layers.Ctrl+Kon Windows and Linux
TWO BUILDS9 browsers
Chromelisting in reviewFirefoxlisting in reviewBravelisting in reviewOperalisting in reviewEdgelisting in review4 moreChromium browsers: Arc, Vivaldi, Chromium, Opera GXthe Chrome buildin the panel · free, no counter
What this actually is
tip the page over so every level of nesting is its own plateA page that is slow to style and you cannot see why. Component output you have inherited and want the shape of before touching it. Working out whether a layout problem is one element or eight nested ones. And the plainest use of all - showing somebody the difference between the markup they wrote and the markup their framework shipped.
What tipping a page over does to it
all three are printed inside the tool, because each one looks like a bug- pinned headers stop being pinned
- A transform on the page body makes it the containing block for every `fixed` descendant, so those elements scroll with the page instead of staying put. There is no version of this view without it - the transform is the view.
- scrollers stop clipping
- `overflow` is forced visible on every plate. A container that clips in the flat page would clip its own children out of the tipped one, which is the picture the tool exists to draw.
- a faded wrapper flattens what is under it
- An `opacity` below one, or any `filter`, collapses a 3D subtree back into its parent’s plane. That is what the specification says to do and nothing here can opt out of it, so a deep subtree under one draws as a single plate.
- the depth cap
- Levels past the cap are left flat on their parent’s plate, and counted separately. That count is why the number of plates and the deepest level disagree - without it the tool would look as though it had lost elements.
Asked about this tool
4 of themDoes it modify the page?
It writes one stylesheet into the page’s head and one attribute onto each element, and removes both when you switch it off or leave the tool. Nothing is stored, nothing is transmitted, and a reload would clear it anyway.
Why does part of my page stay flat?
Almost always an ancestor with an `opacity` below one or a `filter` on it. Both flatten a 3D subtree by specification - the browser composites it as a single plane - so everything under that element draws on one plate however deep it goes. The tool says this on the screen rather than leaving it to be discovered.
Why did the sticky header start scrolling?
Because a transformed element becomes the containing block for its `fixed` descendants. That is the cost of tipping the page and it is not avoidable: the transform is what produces the view. It goes back to normal the moment you lay the page flat.
Is there a limit?
The walk stops at five thousand elements and says so, and the depth cap is adjustable up to thirty-two levels. Both are printed rather than applied quietly - a picture that silently left half the page out would be the worst outcome this tool has.
TWO BUILDS9 browsers
Chromelisting in reviewFirefoxlisting in reviewBravelisting in reviewOperalisting in reviewEdgelisting in review4 moreChromium browsers: Arc, Vivaldi, Chromium, Opera GXthe Chrome build63 of these · no host permissions · three free audits