Chrome 开发人员工具的高亮颜色是什么?

Syn*_*ech 63 google-chrome-devtools

在过去的 Chrome 版本中,开发人员工具允许您检查页面元素,并将它们以蓝色突出显示。最新版本的 Chrome 以蓝色突出显示元素,但也有绿色和橙色区域。

颜色是什么意思?

在此处输入图片说明

Syn*_*ech 59

颜色代表与CSS box-model对应的元素区域。

  • 蓝色是内容
  • 绿色是填充物
  • 橙色是边界
  • 红色是边距

(选择类似色调的橙色和红色可能不是最好的。)

您可以在开发者工具的Metrics部分看到这一点(默认情况下是隐藏的):

在此处输入图片说明


小智 10

2021 年更新

现在还显示紫色虚线区域。它代表可扩展的可用空间:

在此处输入图片说明

看这里