如何使用颜色选择器（滴管）？

Question

我刚刚发现了一个内置chrome dev工具的非常有用的工具。我甚至不知道它的名字，我无法在谷歌上找到它。我会说这是一个像素检查工具。

我找到了以下方法如何使用它：

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

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

1. 点击颜色选择器。
2. 将鼠标移到页面上的任何元素上（而不是开发工具上）

请参阅：http://skalar.darkware.hu/skalkaz/Chrome-Colorpicker.gif

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

Answer 1

简单地打开滴管器：

1. 打开DevTools F12
2. 转到“元素”标签
3. 在样式栏旁边，单击任何颜色预览框



它的主要功能是通过点击它们来检查像素颜色值，虽然它具有新功能，您还可以通过单击底部的两个箭头图标来查看页面的现有颜色调色板或材料设计调色板。在设计页面时它会非常方便。

Answer 2

它被称为吸管工具。我没有意识到它的快捷键。现在使用它的唯一方法是单击样式侧栏中的颜色选择器框，然后单击您已经在进行的页面。

Answer 3

目前，吸管工具在我的Chrome版本（如上所述）中无法使用，尽管过去曾对我有用。我听说它正在最新版本的Chrome中更新。

但是，我能够在Firefox中轻松获取颜色。

1. 在Firefox中打开页面
2. 汉堡包菜单-> Web开发人员->吸管
3. 将吸管工具拖到图像上... 单击。
         颜色已复制到剪贴板，并且吸管工具消失了。
4. 粘贴颜色代码

如果您无法使吸管工具在Chrome中正常工作，则可以解决此问题。
我还发现访问它更容易：-）