LoupeKit在浏览器中使用的扩展工具，这款工具支持检查网页技术堆栈，提取设计令牌，并对具有 AI 风格编码的网站进行审核，提供可执行的重构指南等，欢迎下载使用。
介绍
LoupeKit 是一个开发者用来检查你已经打开页面的工具。它回答四个问题，并且仅在你请求时查看你所在的标签页。
这是用什么构建的
检测 1700 种技术——框架、UI 套件、图标系统、打包工具和模块加载器、JavaScript 库、CDN、缓存、Web 服务器、负载均衡器、服务器渲染框架、CMS 和电商平台、支付处理器、分析工具、营销和广告标签、错误跟踪和会话回放、实时聊天、用户同意横幅、机器管理、联系表单提交的后端以及页面声明的元数据——并显示每种技术是如何被识别的：DOM 标识、资源 URL、生成器 meta 标签、页面全局变量、命名空间 CSS 变量，或页面自身响应的头信息。版本信息会在页面声明的地方读取。打开任意一行可以查看它是什么、具体匹配项、置信度以及文档链接。包括客户端页面脉冲——DOM 大小和深度、脚本、样式表、图片、第三方来源及渲染时间——脚本、样式表、图片和第三方列表可以在各自可排序的窗口中打开，并可一键生成 Markdown 报告。
这其中有多少是 VIBE 编码
审计会根据五个加权类别对页面评分 0 到 100：DOM 和 HTML 文本、CSS 和实用类冗余、JavaScript 运行时痕迹、文案模式和可访问性。共有六十六条启发式规则，每条规则都解释触发测量的原因，并提供可复制的具体重构方案。评分模型经过校准，因此手写页面得分较低——一个标记精心工作的工具比没有工具更糟。
四个页面诊断位于工具旁边：哪些选择器最激烈地争夺胜利，每个堆叠上下文及其创建的属性，页面绘制后移动的所有内容，以及每个表单字段的约束及其生成的消息。所有四个诊断都会读取页面并返回一个排名列表；点击一行会滚动到该元素并选中它。表单检查是唯一会写入内容的——每个字段在同一次操作中被填充、检查并恢复，没有任何提交，密码和支付卡字段完全跳过。
颜色选择器会放大标签页的图像，因为没有 API 可以从文档中读取已渲染的像素。该图像在所有其他内容使用的同一个单标签授权上捕获，直接交给放大镜，并在关闭时丢弃。箭头键一次移动一个像素的取样点，这是指针在缩放显示上无法做到的。浏览器提供了的情况下，第二个按钮会调用其自己的全屏眼睛滴管，用于页面外的颜色。
检查和提取
悬停在任何元素上可查看其包模型、计算后的排版、颜色及根据文本背后真实背景测量的 WCAG 对比度判定。四个页面覆盖层：元素选择器、距离指南、标尺和线框视图。实时编辑文本、间距、颜色和边框以尝试想法——编辑只影响你眼前的页面，可撤销，且从不保存或上传。第二个视图提取调色板、字体矩阵以及页面上的每个 SVG 和图像，SVG 可用作 JSX。
修复小问题
一个 Tailwind 类优化器，可去重、解决冲突、合并间距并排序。一个文本清理器，可发现 AI 表达并提出纯文本替换。一个视口测试器，在真实设备宽度的真实 iframe 中加载页面，因此断点真正生效。
插件安装说明
1、在打开的谷歌浏览器的扩展管理器
就是点击最左侧的三个点，在弹出的菜单中选择【更多工具】——【扩展程序】
或者你可以在地址栏中直接输入chrome://extensions/
2、进入扩展程序页面后将开发者模式打勾
3、最后将解压出来的crx文件拖入到浏览器中即可安装添加
4、如果出现无法添加到个人目录中的情况，可以将crx文件右键，然后选择【管理员取得所有权】，再尝试重新安装
5、安装好后即可使用
扫码关注公众号，发【识别码】获取
