Screen Ruler

Screen Ruler 是一款强大的 Chrome 扩展，最初用于测量和检查网页元素，如今新增了编辑功能，让您可以直接在网页上修改样式并追踪每一次变更。

核心功能

它允许您点击任意网页元素，实时查看匹配的 CSS 规则，并直接在内联编辑器中调整数值。无论是调整颜色、边距还是字体大小，所有修改都会立即生效，并自动记录在统一的变更日志中。

主要特性

• 实时编辑与预览：点击元素即可编辑其 CSS，修改后页面即时响应，所见即所得。
• 全面追踪变更：每一次编辑都会被自动记录，您可以在一个视图中查看所有修改历史，方便回溯或对比。
• 支持复杂选择器：兼容 :hover、:focus 等伪类状态，以及 @media 媒体查询规则，确保编辑覆盖所有场景。
• 轻量高效：作为 Chrome 扩展，它不会拖慢浏览器速度，操作流畅，适合日常开发调试。

适用场景

• 前端开发者：快速调试和验证样式修改，无需频繁切换开发者工具。
• 设计师：在真实网页上微调设计细节，并记录所有改动供团队参考。
• QA 测试人员：模拟样式变更以检查响应式布局或交互状态，提升测试效率。

Screen Ruler 将测量与编辑合二为一，让网页样式调试变得前所未有的直观和高效。