I want a layout debugger in DevTools

Browser DevTools already do a great job letting me inspect the live DOM, view computed CSS properties, and highlight element boxes. But there are still categories of layout bugs that are extremely hard to debug, even with all those tools available:

• Why is a margin collapsing — or not collapsing — between two elements?
• Where exactly is a scrollbar being generated, and why does it appear?
• Why is an absolutely positioned element not ending up where I expect?
• Why is a floated element overflowing its container?

The root cause of these problems is that browser layout engines transform DOM and CSS into an internal layout tree through a lot of hidden, complicated logic. Web developers have no visibility into this process and no direct way to interrogate it.

I want a new DevTools feature — a panel, view, or overlay — that exposes a user-friendly representation of the layout tree. Seeing how the engine has represented floats, absolute-positioned elements, scrollbar-generating boxes, block formatting contexts, and offset parent chains would turn opaque layout mysteries into understandable, diagnosable states. It would also be a great teaching tool for developers learning how CSS layout works under the hood.