的Chrome DevTools层边框颜色含义

Question

我对自己的复合层的存在，因为这个CSS规则的两个DOM元素：

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

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

好棒！这是我看到

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

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

Answer 1

铬源的debug_colors.cc详细的定义找到了答案源代码

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

。

基本上有两种类型的东西启用显示图层边框处于打开状态。

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

Answer 2

通过

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