If you build websites, you inevitably run into problems. Maybe there’s no way to achieve an aspect of your design using CSS. Or maybe there’s a device feature you really wish you could tap into using JavaScript. Or perhaps the in-browser DevTools don’t give you a key insight you need to do your job. We want to hear about it!
DevTools is super helpful already when it comes to debugging layout problems, it lets us inspect the live DOM and the CSS rules and properties that apply to it.
But there are still some hard-to-debug cases. A few examples:
Why is a margin collapsing/not-collapsing?
Where is a scrollbar located, and why does it appear?
Why is this absolute positioned element not where it should be?
Why is this floated element sticking out of its container?
...
Browser layout engines turn DOM and CSS into page layouts, and the way they do this involves a lot of hidden and complicated logic that, we, web devs have no way to know about and sometimes control.
I want a new DevTools feature (panel/view/whatever) that lets me see a bit more under the hood how the engine turned my DOM and CSS into a layout tree that was then rendered.
Seeing a (user-friendly) view of the layout tree would give me a lot of insights into what happened.
My understanding is that floats or absolute, for instance, get represented in the special way in the layout tree already, and seeing this representation would help debug problems.
Scrollbars are also represented, which would help debug overflows.
Block formatting contexts and offset parents are concepts that are usually complicated to grasp and would become pretty easy to explain by looking at a version of the layout tree.
title: I want a layout debugger in DevTools date: 2022-05-02T07:49:23.867Z submitter: Patrick Brosset number: 626f8d036ea6271d180b444f tags: [ ] discussion: https://github.com/WebWeWant/webwewant.fyi/discussions/ status: [ discussing || in-progress || complete ] related:
title: url: type: [ article || explainer || draft || spec || note || discussion ]
DevTools is super helpful already when it comes to debugging layout problems, it lets us inspect the live DOM and the CSS rules and properties that apply to it. But there are still some hard-to-debug cases. A few examples:
Browser layout engines turn DOM and CSS into page layouts, and the way they do this involves a lot of hidden and complicated logic that, we, web devs have no way to know about and sometimes control.
I want a new DevTools feature (panel/view/whatever) that lets me see a bit more under the hood how the engine turned my DOM and CSS into a layout tree that was then rendered.
Seeing a (user-friendly) view of the layout tree would give me a lot of insights into what happened. My understanding is that floats or absolute, for instance, get represented in the special way in the layout tree already, and seeing this representation would help debug problems. Scrollbars are also represented, which would help debug overflows. Block formatting contexts and offset parents are concepts that are usually complicated to grasp and would become pretty easy to explain by looking at a version of the layout tree.
Relevant research: https://bugzilla.mozilla.org/show_bug.cgi?id=1435362 Other request: https://github.com/MicrosoftEdge/DevTools/issues/44
If posted, this will appear at https://webwewant.fyi/wants/626f8d036ea6271d180b444f/