tool · one of 34 free, 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 it Press ⌘ + K on any tab and type layers. Ctrl + K on Windows and Linux
in 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
fixeddescendant, 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
overflowis 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
opacitybelow one, or anyfilter, 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.
how to use layers
- Open Layers. Each level of nesting lifts onto its own plate over the live page.
- Read depth by colour - the shape of the whole document is one glance rather than a scrolling tree.
- Find the stack of wrappers that has no reason to be there.
- Turn it off. Both effects are undone on the way out, and the side effects were named on screen.
written about at length
70 of these · no host permissions · three free audits