有没有办法让 Chrome DevTools 颜色选择器变大？答案

【问题标题】：Is there a way to make the Chrome DevTools color picker larger?有没有办法让 Chrome DevTools 颜色选择器变大？
【发布时间】：2016-11-11 11:53:55
【问题描述】：

在 Chrome DevTools (f12) 中，可以单击 CSS 规则的十六进制值旁边的色样。这带来了一个具有甜美像素缩放选择器能力的颜色选择器。这一切都很好，但是当不使用像素选择器时，很难确定特定的颜色。这是因为颜色选择器很小，因此滑块/选择器过于敏感。例如，很难获得特定的色调，而且如果您喝过任何咖啡使鼠标手摇晃，那么[几乎] 不可能在滑块上精确的“像素”处放开。

我看到DevTools has extensions 可以在其中添加面板/窗格，但我没有看到是否可以操作实际的 DevTools DOM，也没有 [如果可以] 如何在颜色选择器初始化时检查检查器。

我该怎么做呢？有没有办法通过说增加颜色选择器的大小，大约加倍？俗气的模糊 CSS 比例很好，不需要什么花哨的东西。这将允许可用的滑块定位。抱歉，如果这与 stackoverflow 无关，其重点是编写扩展/解决方案，而不是如何使用 DevTools（即 webapps.stackexchange）。

【问题讨论】：

颜色选择器并不是为了给你提供你想要的非常具体的颜色，而是一个足够接近的颜色来看看它会是什么样子。如果您知道想要的颜色，请输入。
@Garbee 颜色选择器确实是为了让你得到你想要的特定颜色，否则所有的颜色都不可用，对吧。
“但足够接近，可以看到它的样子。如果你知道你想要的颜色，请输入它。”它需要让它们都可用，只是为了让你接近。如果你能做得很好，但绝大多数 DevTools 都在使用，那么 close 就足够了。
@Garbee 是的，从另一个小拾色器中获取颜色....，哈哈；）真的，除了 DevTools 和编辑器，我什么都不用。我可以用这些做一切。现在不需要使用 Illustrator 或其他工作流程来制作视图/应用程序......只是妨碍了。无论如何，颜色选择器（和扩展）并没有更好，额外的工作流程步骤 + 时间 + 膨胀并没有真正归因于开发。因此，如果这个 DevTools 更大，它会工作得很好，对吧......除非你真的有一个案例来说明它是如何除了“它应该是小而不准确的”

标签： google-chrome-devtools web-inspector

【解决方案1】：

Chrome DevTools 中使用的颜色选择器是 Spectrum 的实现，它被添加到 Web Inspector for WebKit 中，随后在 2013 年添加到基于 Blink 的浏览器中。目前没有任何 API 将颜色选择器暴露给 @987654322 @。

你有几个我可以考虑的选择：

Log an issue here 提供一些细节和屏幕截图，并提出更改选取器大小的有力案例。我认为这是个好主意。
使用远程调试协议在本地下载 DevTools Web 应用程序的副本并将其连接到 Chrome 实例。具体说明见Hacking Chrome DevTools。

第二个选项是在本地自定义 DevTools 的好方法，但这不是一个长期的解决方案，因为您必须定期获取最新代码以保持与后端的兼容性。

更新：我愚蠢地错过了第三个选项，根据 Kayce 的回答，我只是在发布此回复时看到了放大。在 Mac 上，您还可以使用 Cmd+Alt++ 来缩放整个窗口。省略 Alt 仅缩放当前窗口。

【讨论】：

好主意，谢谢。我不确定要接受哪个答案，希望我可以选择 2。缩放虽然不是最佳的，但现在可以使用。我会在有时间的时候记录一个问题并在这里发布一个链接。

【解决方案2】：

放大你的 DevTools 窗口怎么样？ Ctrl 和 + 在 Windows / Linux 上，Cmd 和 + 在 Mac 上。

小：

大：

【讨论】：

在此处使用Ctrl+0 重置为默认大小，以便任何想知道缩放后如何操作的人。