Media
5 items
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 文件会保存到用户本地设备中 V1.0.9版本 新增测量功能过程中可记录 测评选中状态按esc可取消选中 V1.1.0版本 新增导出HTML已完成未完成状态切换