看了下 chrome 自带的 DevTool 可以查看元素计算后的属性值，比如 width, height, 但是没有 x, y，
虽然很方便，但是这个只是计算的最终结果。
那么有没有一个工具，可以帮助初学者知道，某个属性值，它的计算过程是怎样的吗？
举例来说，一个<div>元素的位置，是根据
- 文档流，
- 自身 position
- 父级 position
等一系列复杂操作得到的
类似的还有元素的 box 大小，甚至像 color 属性，也是 css 一层层覆盖得到的，
但因为 html 层级太多，css 属性相互影响，导致很难调试，
如果有一个工具，能把浏览器计算的过程给拿出来，可视化显示给开发人员，那就太好了！
所以请教各位，现在有这样的工具吗？
 |
1
lneoi Aug 2, 2020
有个展示工具，会一句一句的展示整个 html 加载过程，可以明显看到 css 效果变化，忘记名字了搜了下没搜到
|
 |
2
hoyixi Aug 2, 2020
其实你说的这些，大部分 devtool 里都能看到
比如 box 大小，computed 选项卡下面就有个 box 示意图 继承的 CSS，Styles 选项卡，滚到下面，就标好了继承的一些 CSS 。 一些被覆盖的 CSS 会被用横向删除线划掉。 |
 |
3
fox0001 Aug 2, 2020 via Android
chrome，按 f12，看元素的样式属性，在对应的数值点一下，会有提示
|
|
4
fox0001 Aug 2, 2020 via Android
另外，CSS 样式会按优先级从高到低排列，也是比较清晰。并且可以修改，立马看到效果
|
 |
5
sillydaddy OP @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 ) 所以，如果说能把布局的过程给可视化(结果应该类似一个时序动画之类)的话，那一定是浏览器本身提供这样的接口，可以拿到布局过程的数据，或者开发者另辟蹊径。可惜我到现在还没有找到。 |
Select Language