PixelAudit 视觉走查助手

Description

网页视觉走查工具：快速查看尺寸、字体、颜色与间距，记录问题并导出走查结果。 在真实网页上完成类似 Figma Dev Mode 的视觉走查：查看尺寸、字体、颜色和间距，记录问题，并导出结构化走查结果。 PixelAudit 视觉走查助手是一款面向 UI 设计师、前端开发、产品经理和测试同学的网页视觉检查工具。它可以让你直接在当前网页上选中元素，查看关键视觉信息，临时调整样式，记录页面问题，并将本次走查结果导出为 HTML，方便后续和开发、产品或 AI 编码工具协作。 无论是页面上线前验收、设计还原度检查、前端样式走查，还是整理页面问题反馈，PixelAudit 都可以帮助你减少截图、标注、复制描述和反复沟通的成本，让视觉问题更清楚、更容易被定位和处理。 ✨ 核心功能 网页元素视觉检查 直接在页面上选中元素，快速查看尺寸、字体、颜色、圆角、透明度、内外边距等视觉信息，减少反复打开开发者工具的成本。 元素样式临时编辑 支持在页面上临时调整部分视觉样式，例如尺寸、字号、颜色、圆角、背景色、间距等，用于快速验证修改方向。所有修改仅作用于当前网页预览，不会直接修改网站源码。 间距与结构测量 支持查看元素之间的距离、元素内部结构数据，以及常见布局中的视觉间距，帮助设计师和前端更准确地判断页面是否符合设计预期。 问题记录 发现视觉问题时，可以直接将元素或区域加入记录，补充分类和备注。适合记录字体问题、间距问题、颜色问题、布局问题、交互问题等。 记录抽屉管理 本次走查中的问题会统一收集到记录抽屉中，方便查看、编辑备注、删除或清空，让页面问题不再散落在截图和聊天记录里。 HTML 走查结果导出 支持将本次记录导出为 HTML 走查报告，包含页面信息、问题分类、备注和局部截图，方便发给开发同学、产品同学或用于验收留档。 AI 修改整理 当你在页面上做了一组视觉调整后，PixelAudit 可以整理本次被修改的元素和属性，方便复制给 AI 编码工具或开发同学参考，帮助把视觉反馈更清楚地转化为实现建议。 👥 适合谁使用？ UI 设计师 用于页面走查、设计还原度检查、视觉问题记录和上线前验收。 前端开发 用于快速定位页面元素、查看视觉属性、理解设计反馈和验证样式调整方向。 产品经理 用于记录页面体验问题、整理验收意见，并以更直观的方式和设计、研发沟通。 测试同学 用于记录页面视觉缺陷、布局异常、间距问题和样式不一致问题。 💡 常见使用场景 页面上线前检查视觉还原度 检查按钮、卡片、标题、表单等元素的尺寸和样式 确认字体、颜色、圆角、间距是否符合设计预期 记录页面中的视觉问题并补充备注 将本次走查问题导出为 HTML 结果 把视觉调整整理成更清晰的反馈，交给开发或 AI 编码工具继续处理 🧭 基本使用方式 1. 打开任意网页 2. 点击浏览器右上角的 PixelAudit 插件图标 3. 在页面上移动鼠标查看元素信息 4. 点击元素进入选中状态，查看或临时调整视觉属性 5. 发现问题时，使用记录功能添加元素或区域记录 6. 在记录抽屉中统一管理本次走查问题 7. 导出 HTML 走查结果，用于沟通、验收或留档 🔒 隐私与本地运行 PixelAudit 默认在本地运行，重视页面内容和用户数据的隐私安全。 我们坚持以下原则： 插件不会主动将网页内容上传到云端服务器 不会出售用户数据 不会进行广告追踪 不会在未启用插件时扫描网页 仅在用户主动点击插件图标后，对当前页面执行视觉检查能力 记录、备注、截图和导出结果主要用于本地走查流程 导出的 HTML 文件会保存到用户本地设备中 上线更新说明（1.1.7） 新增 记录抽屉新增"导出图片合集"：每个问题生成一张图片，包含截图、分类、备注和定位信息，打包成 ZIP 下载。 支持在 italent 业务页面的 iframe 中检查元素和截图。首次使用时会弹窗请你授权，安装时不需要授权。 优化 截图更清晰，小字和细线不再模糊。 iframe 里的截图位置更准确。 修复 修复部分页面带有视频、广告等嵌入内容时，点击插件图标没有反应的问题。 修复新增记录没有选分类时，保存后被错误归到"交互"的问题。 PixelAudit 视觉走查助手 v1.1.5 更新说明 本次更新重点优化了截图清晰度、问题反馈和设计参考图的使用体验。 新增与优化： - 提升走查截图及导出图片的清晰度，同时控制 HTML 报告体积。 - 导出报告中的截图支持点击查看大图，可适应窗口、切换原始比例，并在 50%～200% 范围内缩放。 - 每条问题新增独立的“问题备注”，开发可直接填写处理结果或待确认事项。 - 问题备注及完成状态支持自动保存，并可下载包含反馈内容的新版 HTML。 - 新增记录时，可以直接在问题说明框中粘贴设计稿或补充截图。 - 每条问题最多添加 3 张设计参考图，支持缩略图预览和删除。 - 设计参考图会随草稿保存，并展示在记录面板和导出的 HTML 报告中。 - 导出 HTML 的问题备注同样支持粘贴反馈截图，方便开发结合截图说明问题。 - 元素问题新增研发定位信息及复制按钮，帮助开发快速找到对应页面元素。 问题修复： - 修复低分辨率缩略图被放大后文字模糊的问题。 - 修复 Command/Ctrl + V 被插件快捷键拦截、无法通过键盘粘贴图片的问题。 - 修复输入框输入字母时可能意外切换插件模式的问题。 - 修复粘贴的设计参考图保存后未在记录面板显示的问题。 - 优化大尺寸原图的预览方式，减少必须横向、纵向反复滚动的情况。 V1.1.0版本 新增导出HTML已完成未完成状态切换 PixelAudit v1.1.1 更新说明 本次更新重点优化问题截图与 HTML 报告体验： 提升截图清晰度，采用 1024px WebP 高清导出，在改善文字和细线效果的同时控制文件大小。 修复刷新页面或恢复草稿后，HTML 报告误用低清缩略图导致截图模糊的问题。 历史记录只有缩略图时不再强制放大，并会提示重新截图。 优化 HTML 报告布局，扩大截图展示区域并适配不同屏幕尺寸。 新增截图大图预览，默认适应窗口，支持 50%～200% 缩放、100% 原尺寸、双击切换和滚动查看细节。 元素问题新增研发定位信息及一键复制，方便开发人员快速找到对应页面元素。

Details & SEO