如何使用 Chrome DevTools 颜色选择器工具而不是普通 Chrome 颜色选择器工具？

Question

当我们不想在我们的网站上安装/编写自己的颜色选择器时，Google Chrome 提供了自己的颜色选择器工具，开发人员可以使用。这很有用。好漂亮啊。这很容易。只需插入一小段可爱的 HTML5 行

<input type="color" />

它有效。几乎棒极了。这几乎是完美的。几乎是蜜蜂的膝盖。几乎。

有rgb的。它有十六进制。它甚至还有 hsl。但该死的事情不允许用户改变不透明度。这有点愚蠢。我希望用户改变不透明度，该死！

现在，我网站的用户可以更改不透明度。我很懒，所以这并不疯狂或什么的。只需在上面的代码中添加一点内容，它就可以工作了。这不是我想要的。

<input id="color" type="color"/><input id="opacity" type="number" min="0" max="1" />

显然，Google 可以编写一个可以使用 rgba 和 hsla 的颜色选择器工具。他们做到了，而且（仍然）在当前版本的 Google Chrome (91.0.4472.77) 中。它可以在 Google Chrome 的 DevTools 中找到。这很棒。这是梦幻般的。

我想要那个颜色选择器。

有没有办法在我的网站上使用很棒的颜色选择器？

PS：我知道我可以编写一个这样的颜色选择器，或者安装我在 Github 上找到的颜色选择器。但我不想做这两件事中的任何一件事，因为 1）我很懒，2）我测试过的大多数代码看起来很丑陋和/或编码方式让我突然对意大利面产生了巨大的渴望。

Answer 1

可以在Chrome 开发工具 API中查看。据我所知，他们只是提供Inspector一个整体单元，其中可能包括颜色选择器。但除了我所看到的之外，它没有任何钩子Inspector。

也许如果您在本地添加了该软件包，您可以四处看看并可能找到如何使用它。您可以将整个包添加为 npm 依赖项：npm install chrome-devtools-frontend或yarn add chrome-devtools-frontend。