Open Inspector：免费开源的网页检查扩展，不索取站点权限，能导出 design tokens

Open Inspector ↗ 是一个浏览器扩展，在任意网页上看布局、样式、颜色、字体和素材，再把页面用到的设计规范导出来。它在 2026 年 10 月发布，免费，MIT 协议开源。本文信息来自 GitHub 仓库 README、官网和 Chrome 应用商店页（2026 年 11 月 8 日核对），我没有亲手安装使用，所以下面写的都是官方说明。

核心功能

上图取自 GitHub README 的面板截图，是官方演示用的页面。

• 悬停与点选：鼠标悬停或点击任何元素，方向键可以沿 DOM 树走父级、子级和兄弟节点。官方提供的快捷键是 Alt+Shift+I。
• 样式：显示盒模型、间距和实际命中的 CSS 规则，被层叠覆盖的声明会加删除线。数值可以直接改。
• 布局：说明元素怎样排布子元素、父级怎样安置它，并统计页面实际遵循的间距刻度，把不符合的值标成异常。
• 颜色：按 WCAG AA、AAA 给对比度评级并给出最接近的合格颜色，带屏幕取色器，也能扫描整页找出对比度不合格的文字。
• 字体：官方称它通过画布测量页面实际渲染的字体，而不是读 CSS 里写的字体栈。
• 素材与标记：素材页列出浏览器真正选用的图片版本、内联 SVG、视频和网页字体；标记页把元素导出成 HTML 或 JSX。
• 导出：支持 CSS 变量、SCSS、Tailwind 配置、JSON、W3C design tokens，以及一份写给编码助手的 Markdown 说明。

收费与安装

• 价格：免费，官方称没有账号要求。
• 获取方式：Chrome 应用商店有上架页，商店页当日显示版本 0.0.5。仓库里有 Firefox 的构建命令，但我没有查到 Firefox 附加组件商店的上架页，需要 Firefox 的读者要看仓库说明。
• 权限：官方说明清单里只声明 activeTab 和 scripting，没有站点访问权限，点击哪个标签页才对哪个标签页生效；构建时会扫描网络调用，发现就失败。这些是官方自述，源码公开，可以自行核对。

要注意的地方

• 版本很早：商店版本号还在 0.0.x，发布时间也只有一个多月，稳定性和长期维护都要观察。
• 跨域样式表读不到：官方列出的限制之一，样式来自其他域名且没有 CORS 头时，匹配规则会是空的，面板会注明这一点。
• 不支持 iframe：框架内的内容目前检查不了，需要单独打开那个框架页面。
• 不做截图、控制台和网络调试：这些是别的工具的活，它不替代浏览器自带的开发者工具。
• 改动不保存：在面板里改的数值关闭后会还原，官方这样设计是为了不破坏页面，想保留要自己导出。

我的判断

我会推荐给经常需要看别人网站排版、提取配色字体和间距的设计师与前端，尤其是对「检查工具要读取所有网站数据」这件事有顾虑的人。它的权限设计和开源方式对这类人有吸引力。已经习惯浏览器开发者工具、只偶尔看一眼样式的人，没必要专门装。项目还很新，我会建议先在日常浏览器的次要配置里试用。