Chrome DevTools图层边框颜色含义

Question

由于这个CSS规则，我有两个DOM元素存在于它们自己的复合层上：

.element-one, 
.element-two {
    will-change: transform;
    transform: translateZ(0); // Fallback
}

现在，我可以使用Chrome开发工具的显示图层边框选项检查这些图层。

太棒了！这就是我所看到的

我熟悉橙色边框颜色，这意味着元素存在于自己的复合图层上。但绿色表示什么？

所有开发工具文档似乎都已过时。

Answer 1

Chromium来源debug_colors.cc详细说明了这些定义。

基本上，启用了显示图层边框的两种类型的事物。

1. 复合图层具有可视边框。它们通常是橙色和橄榄色。但也可以是绿色，淡蓝色，黄色，蓝绿色，蓝色或紫色。
2. GPU图块的边缘标有边框。您通常可以忽略切片，因为它们是实现细节。通常它们是青色的，但您也可能看到紫色，黄色，绿色，深灰色，灰色，红色或黄绿色瓷砖。

Answer 2

在源代码中找到答案

https://code.google.com/p/chromium/codesearch#chromium/src/cc/debug/debug_colors.cc&q=debug%20borders&sq=package:chromium

通过

http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome#TOC-Appendix-E:-Debugging-composited-layers