Chrome DevTools 图层边框颜色含义答案

【问题标题】：Chrome DevTools layer borders color meaningChrome DevTools 图层边框颜色含义
【发布时间】：2016-03-09 10:57:30
【问题描述】：

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

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

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

一切都很好！这就是我所看到的

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

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

【问题讨论】：

感谢您的 Q，关于“所有 devtools 文档似乎都已过时”，我现在在 View an overlay of layers with Layer Borders 中引用 debug_colors.cc ????

【解决方案1】：

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

基本上有 2 种类型的东西启用了显示图层边框。

【讨论】：

【解决方案2】：

在源码中找到答案

通过

【讨论】：