网页元素检查与取色扩展

使用前可以确认的事实

• 做什么：点击页面元素查看类似 Figma 的属性面板，并用取色器吸取页面任意像素色。
• 页面内容、选中文字和生成结果默认只留在本机，不上传到 KnowIt 服务器。
• 免费，安装扩展后即可使用。

查看全部常见问题

「元素检查器」的设计理念

平时上网，看到喜欢的网站配色、好看的字体、舒服的间距，总想记下来留着用。可问题是，这些信息藏在网页代码里，得打开浏览器自带的开发者工具才能看到——那玩意儿功能太多，满屏英文和数字，非程序员看了直接劝退。

这个工具就是为解决这个小麻烦做的。它的想法很简单：不搞复杂的东西，只做好一件事。

一、把复杂的开发者工具，变成一个顺手的小工具

浏览器自带的检查功能很强，但它是给开发人员准备的，面板里堆满了网络请求、报错信息、源码调试这些普通人用不上的东西。这个工具把这些全砍掉了，只保留最常用的几个功能：吸取颜色、查看字体大小、量一下间距、看看圆角是多少。界面干干净净，打开就能用，鼠标挪到哪儿就显示哪儿的信息，不用学，也不用记快捷键。

二、装上就能上手，不用动脑子

不用注册账号，不用看说明书，不用配置任何东西。装好之后，在任意网页上点一下图标，鼠标在页面上移动，所有样式信息直接显示在屏幕上——颜色直接给色值，元素自动高亮边框。整个过程跟截图一样直观，没有任何技术门槛，谁拿过来都会用。

三、以后不止能取色，还能把整套风格一键打包带走

现在的版本已经可以一个个地取颜色、看字体了。但后面还会继续升级，最终想让它在一次操作里，自动把整个网页用到的所有颜色、字体、间距、圆角都识别出来，整理成一份清晰的信息卡片。看到一个喜欢的页面，点一下就能把它的整套视觉风格带走来用。从「抠一个颜色」变成「打包一整套风格」，这才是这个东西真正想做到的样子。

刚起步，功能还不算强大，有些地方的识别可能还不够准。但方向是清楚的——做一个设计师拿起就能用、用着顺手、而且会越来越好的小工具。