google-chrome-devtools - 如何使用取色器(滴管)？

Question

我刚刚发现，chrome 开发工具内置了一个非常有用的工具。我什至不知道它的名字，在谷歌上也找不到它。我想说它是一个像素检查器工具。

我发现以下方法如何使用它:

1a。检查具有背景颜色的 html 元素。

1b。定义元素的背景颜色。

点击颜色选择器。

将鼠标移到页面上的任何元素上(而不是开发工具上)

参见:http://skalar.darkware.hu/skalkaz/Chrome-Colorpicker.gif

我的问题:这个工具的名字是什么？如何轻松使用呢？大多数时候我不关心颜色，但我想检查图标的像素。这个工具有热键吗？

Answer 1

打开滴管只需:

1. 打开开发工具F12
2. 转到“元素”选项卡
3. 在“样式”侧栏下，单击任意颜色预览框

它的主要功能是通过单击像素颜色值来检查像素颜色值，尽管使用其新功能，您还可以通过单击底部的两个箭头图标来查看页面的现有调色板或 Material 设计调色板。设计页面时它会非常方便。