Stackray Vedas Dixit מאת

Stackray lifts the page you are looking at into a 3D stack of its layers, inside a small retro-Mac window on top of the tab. It shows what the browser sees: stacking contexts, z-index, clipping and the invisible overlays sitting on top of everything.

What you can do

• Orbit, pan and zoom the stack. Hover a layer for its tooltip, click to select it, double-click to return to the page with that element outlined.
• Switch color modes with 1 to 5: depth, stacking contexts, z-index heat, problems and plain. Each mode has a legend.
• Problems mode marks the usual suspects in red: elements trapped in a stacking context, so a bigger z-index does nothing, and invisible elements that may be catching your clicks. Elements cut off by an overflow: hidden ancestor get a red dashed edge.
• T gives leaf layers their own pixels from a screenshot of the page.
• Layers start as a staircase, one step per layer in paint order. S switches to overlap levels instead.
• L opens the z-index ladder, the elements competing directly under the root stacking context.
• / searches the layer tree. ? lists every shortcut.

Privacy:
Stackray makes no network requests and has no account, analytics or telemetry. It only runs on a tab when you open it there. The snapshot and screenshots stay in memory in that tab and are dropped when you close it. Policy: https://github.com/vedas-dixit/Stackray/blob/main/PRIVACY.md

Stackray is open source under the MIT license: https://github.com/vedas-dixit/Stackray

This is an early release. Textured mode covers the first six screens of a long page; layers further down stay plain. Bug reports with the page URL are welcome on GitHub.