适用于任何实时网页的像素标尺。测量距离、检查盒子模型、放置参考线 - DevTools 保持关闭状态。
测量任何网站上任何元素之间的距离。像素标尺、CSS 检查器和对齐参考线 — 完美像素设计切换所需的一切，都可以在浏览器中实现。
Measuremate 是一款为前端开发人员、网页设计师和 QA 工程师构建的测量工具，他们需要在不离开浏览器的情况下进行精确的像素测量。轻量、私密且快速。
──────────────────────────────────────────────────────────────────────────────────────────────────
两种强大的模式
──────────────────────────────────────────────────────────────────────────────────────────────────
🔍 检查器模式 — 单击任何元素进行检查。查看尺寸、到相邻元素的距离以及完整的 CSS 详细信息。选择前将鼠标悬停进行预览。
📐 指南模式 — 将垂直和水平标尺参考线放置在页面上的任何位置。捕捉元素边缘，在导轨之间进行测量，并验证对齐情况，就像 Figma 中一样。
只需按一下键即可在模式之间切换。
──────────────────────────────────────────────────────────────────────────────────────────────────
你能做什么
──────────────────────────────────────────────────────────────────────────────────────────────────
📏 测量任意两个元素之间的距离——间距、间隙、填充、边距。页面尺寸线显示精确的像素值。
🎯 通过内容、填充、边框和边距（包括负边距）的视觉细分来检查 CSS 框模型。
🔬 按类别查看详细的 CSS — 布局（显示、位置、伸缩、网格、z 索引）、文本（字体、颜色、行高、字母间距）和属性。
🌳 导航 DOM 树 — 从根浏览到任何元素，悬停进行预览，单击进行检查。
🖼️ MARQUEE 通过拖动选择框一次选择多个元素。
📐 只需按一下键即可将垂直或水平参考线拖放到任何页面上。使用箭头键实现 1 像素精度，使用 Shift+箭头实现 10 像素跳跃。
🧲 吸附到元素 — 参考线和光标自动吸附到元素边缘和中心。
──────────────────────────────────────────────────────────────────────────────────────────────────
键盘快捷键
──────────────────────────────────────────────────────────────────────────────────────────────────
Cmd+Shift+M (Mac) / Ctrl+Shift+M (Win) — 打开/关闭 Measuremate
1 — 切换到检查器模式
2 — 切换到指南模式
M — 显示/隐藏控制面板
V - 在光标处放置垂直参考线
H - 在光标处放置水平参考线
S - 切换捕捉对齐
Q — 清除所有参考线
箭头键 — 将光标/参考线移动 1 像素（Shift 移动 10 像素）
Esc — 清除选择
──────────────────────────────────────────────────────────────────────────────────────────────────
适合谁
──────────────────────────────────────────────────────────────────────────────────────────────────
• 前端开发人员根据设计验证像素完美的实现
• 网页设计人员检查实时网站上的间距、对齐方式和版式
• QA 工程师跨断点验证响应式布局
• 团队通过 Figma、Sketch 或其他设计工具进行设计交接
• 任何需要快速、干净的网络标尺的人
──────────────────────────────────────────────────────────────────────────────────────────────────
为何选择 MEASUREMATE
──────────────────────────────────────────────────────────────────────────────────────────────────
✓ 干净的用户界面 - 在您激活它之前不会执行任何操作。不会干扰您浏览的页面。
✓ 轻量级 — 低于 500 KiB，无膨胀，无遥测。
✓ 隐私第一——零跟踪、零数据收集。
✓ 适用于任何网站，包括 SPA 和 iframe。
✓ 类似于 Figma 的距离测量，您已经知道如何阅读。
✓ 面向高级用户的键盘优先工作流程。
──────────────────────────────────────────────────────────────────────────────────────────────────
如何使用
──────────────────────────────────────────────────────────────────────────────────────────────────
1. 单击工具栏中的 Measuremate 图标（或按 Cmd/Ctrl+Shift+M）激活
2. 将鼠标悬停在任何元素上以预览其尺寸
3. 单击选择 — 查看页面上显示的到附近元素的距离
4. 使用 M 打开主面板，查看完整的 CSS、盒模型和 DOM 树
5. 按 2 切换到参考线模式并放下对齐标尺
──────────────────────────────────────────────────────────────────────────────────────────────────
免费且专业
──────────────────────────────────────────────────────────────────────────────────────────────────
所有核心测量功能都是永久免费的。
Pro 是一次性购买的。一次购买，永久使用，可在任意数量的计算机上使用。
──────────────────────────────────────────────────────────────────────────────────────────────────
支持与反馈
────────────────────────────────────────────────────────────────────────────────────────────────
网站：https://measuremate.xyz
电子邮件：support@measuremate.xyz
我们定期发布更新。始终欢迎功能请求和错误报告。
