Provide a way to inspect the layout tree

[linsword13]

Is there currently a good way to inspect and get stats from the layout tree, say its size and/or other properties? I tried to use Edge tracing and enabled the blink.debug.layout.trees category, but that seemed to only print out a bunch of layout objects seemingly without a way to inspect them.

Context on the request: investigating an issue where hit-testing is taking a long time (~10ms), the suspicion is that the layout tree grows too big. So I want a way to inspect the layout tree size in order to assess mitigation strategies like CSS containment and DOM virtualization.

Thanks!

AB#39172861

[captainbrosset]

Thanks for reaching out and filing this. I wonder if Chromium has some other internal ways to output layout tree snapshots that are better than what you already tried. I'll ask around and report back if I find anything.

Having something built-in the browser (or even in DevTools) seems like a useful feature to have. I don't know how web developers would be able to use this efficiently to resolve performance or styling issues, but it seems like there's potential for it. And it would certainly be useful to people working on the Blink layout code itself.

I remember working on something similar for Firefox DevTools. I'll try to find this too, as it may be a good source of inspiration.

[captainbrosset]

I remember working on something similar for Firefox DevTools. I'll try to find this too, as it may be a good source of inspiration.

Here is the bugzilla entry about this: https://bugzilla.mozilla.org/show_bug.cgi?id=1435362
@jryans was working on this at the time and even made a prototype as a separate panel in DevTools.

It seemed like this could be a very useful tool for layout debugging. Especially for understanding things that are not visible in the DOM right now.

Floats or absolute, for instance, get represented in the special way in the layout tree, and seeing this representation may help debug problems.
Scrollbars are also represented, which helps with debugging 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.

[jryans]

I believe my Gecko branch at https://github.com/jryans/gecko-dev/tree/layout-debugging has the prototype panel (from 2018), in case that's of interest to anyone. It's full of hacks, so it's definitely not anywhere close to something that could be shipped.

IIRC, the main features in that prototype are:

• Adds a basic tree view showing the layout frames in a panel
• Allows picking layout frames visually with the cursor, similar to the normal Inspector's element picker

[captainbrosset]

I wonder if Chromium has some other internal ways to output layout tree snapshots that are better than what you already tried. I'll ask around and report back if I find anything.

I found this: https://github.com/MicrosoftEdge/JsDbg/ which seems like a promising way to explore various internal web platform data. Judging by the list of features, it can be used to inspect the layout tree too: https://github.com/MicrosoftEdge/JsDbg/blob/main/docs/FEATURES.md#actions

[linsword13]

Thanks @captainbrosset for the several good pointers. The JsDbg tool looks interesting. I am also exploring if I can gather information from an OS-level tracer like WPA. Will report back if I find something useful.

[captainbrosset]

Thanks! Let us know how your investigation goes.