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

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

我发现如何使用它的方法如下：

1a。使用背景色检查html元素

1b。定义元素的背景色

单击颜色选择器

将鼠标移到页面上的任何元素上（不在开发工具上）

见：

我的问题是: 这个工具名是什么？ 如何轻松使用？大多数时候我不在乎颜色，但我想检查图标的像素。

---

这个工具有热键吗？

它被称为滴管工具。我知道它没有快捷键。您现在可以使用它的唯一方法是，单击样式侧栏中的颜色选择器框，然后像您已经做的那样单击页面。

要打开滴管，只需：

打开开发工具F12

转到“图元”选项卡

在“样式”侧栏下，单击任意颜色预览框

---

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

目前，滴管工具在我的Chrome版本中不起作用（如上所述），尽管它在过去对我起作用。我听说它正在更新最新版本的Chrome

然而，我能够在Firefox中轻松获取颜色

在Firefox中打开页面

汉堡菜单->网络开发者->滴管

将滴管工具拖到图像上单击
颜色被复制到剪贴板，滴管工具消失

粘贴色码

如果您无法在Chrome中使用滴管工具，这是一个很好的解决方法。

---

我还发现它更容易访问：-）

这对于复制和更高级别的视图很有用：下面的评论也回答了这个问题；您可以在开发工具中找到它（在“元素”选项卡上，在“样式”选项卡上单击任何“颜色”规则下，弹出窗口中有一个颜色选择器），我要寻找的是一种不需要颜色规则的方法，就像想象您只想从图像中选择颜色一样。需要更简单的方法way@SuperUberDuper嗯，现在有了。我的答案是几年前的。现在，您只需单击样式侧边栏中颜色值旁边的小色样框，然后将鼠标移到页面上即可查看颜色选择器工具。现在容易多了，但你需要有一个颜色规则first@SuperUberDuper或者使用变量<代码>--c:red，将颜色属性输入devtools面板的最简单方法。您能解释更多吗？我目前使用的是68.0.3440.106版。在这里，你不能再使用调色板来选择colorChrome v72，它的工作原理与答案中描述的一样；我甚至来这里想知道我是否忘记了一些细节。至少在Chrome v88中，我刚刚注意到颜色选择器在

iframe

中不起作用：它将从主页上拾取颜色，但如果你在iframe中移动光标，则不会。我想它对我也不起作用，但显然有一个限制，只有当devtools停靠在浏览器窗口中时，它才能工作。