@lneoi 太可惜了，我也没搜到。

@hoyixi 是的，css 其他属性的观察都比较简单，DevTool 提供的功能很棒。但是像布局 [后] 的 位置、大小，往往是新手最难调试的(尤其是很多 css 特性不熟时)，但这些计算过程，恰好都隐藏在浏览器中，浏览器的布局算法用到了 css 的各种属性，牵一发而动全身。

假设在 DevTool 中选中某个 div 元素，我能看到它的 box 各种边框值，但不知道具体这些值怎么来的。

设想现在有个工具，点 div 元素的时候，能给出在布局算法中，div 位置和大小的具体计算过程，就完美了，因为布局的每个计算步骤都是可见的，相当于是程序调试中的单步调试，可以知道是哪个步骤出了偏差，发现了偏差就可以进一步查出是哪个 css 属性设置有问题，即使这个 css 属性并不熟悉也不影响，都能很快定位问题所在。

刚才又调查了一下，发现了这个布局过程很复杂，应该是一个动态的过程，
“在执行布局操作的时候，会把布局运算的结果重新写回布局树中，所以布局树既是输入内容也是输出内容，这是布局阶段一个不合理的地方，因为在布局阶段并没有清晰地将输入内容和输出内容区分开来。”
(参考 https://blog.poetries.top/browser-working-principle/guide/part1/lesson05.html#_2-%E5%B8%83%E5%B1%80%E8%AE%A1%E7%AE%97 )

所以，如果说能把布局的过程给可视化(结果应该类似一个时序动画之类)的话，那一定是浏览器本身提供这样的接口，可以拿到布局过程的数据，或者开发者另辟蹊径。可惜我到现在还没有找到。