Chrome DevTools图层边框颜色含义
Chrome DevTools layer borders color meaning
由于这个 CSS 规则,我有两个 DOM 元素存在于它们自己的复合层上:
.element-one,
.element-two {
will-change: transform;
transform: translateZ(0); // Fallback
}
现在,我可以使用 Chrome 开发工具的 Show layer borders 选项检查这些图层。
一切都很好!这就是我看到的
我熟悉橙色边框颜色,这意味着该元素存在于它自己的复合层上。但是绿色表示什么?
所有开发工具文档似乎都已过时。
在源码中找到答案
通过
Chromium 来源的 debug_colors.cc
详细说明了定义。
基本上启用了 2 种类型的东西显示图层边框。
- 合成图层获得视觉边框。它们通常是橙色和橄榄色。但也可以是绿色、淡蓝色、黄色、蓝绿色、蓝色或紫色。
- GPU 图块的边缘标有边框。您通常可以忽略图块,因为它们是实现细节。它们通常是青色,但您也可能会看到紫色、黄色、绿色、深灰色、灰色、红色或黄绿色瓷砖。
由于这个 CSS 规则,我有两个 DOM 元素存在于它们自己的复合层上:
.element-one,
.element-two {
will-change: transform;
transform: translateZ(0); // Fallback
}
现在,我可以使用 Chrome 开发工具的 Show layer borders 选项检查这些图层。
一切都很好!这就是我看到的
我熟悉橙色边框颜色,这意味着该元素存在于它自己的复合层上。但是绿色表示什么?
所有开发工具文档似乎都已过时。
在源码中找到答案
通过
Chromium 来源的 debug_colors.cc
详细说明了定义。
基本上启用了 2 种类型的东西显示图层边框。
- 合成图层获得视觉边框。它们通常是橙色和橄榄色。但也可以是绿色、淡蓝色、黄色、蓝绿色、蓝色或紫色。
- GPU 图块的边缘标有边框。您通常可以忽略图块,因为它们是实现细节。它们通常是青色,但您也可能会看到紫色、黄色、绿色、深灰色、灰色、红色或黄绿色瓷砖。