Screen Ruler - 测量和检查网页

面向设计师和开发者的网页检查工具。测量元素、提取 CSS 和颜色、截取屏幕截图等。

Screen Ruler 是网页开发者和设计师验证网站实现效果的理想助手。启用后，只需将鼠标悬停在任意网页内容上，即可查看尺寸、外边距、内边距、标签名、ID 和类名。您还可以选中某个元素，测量它与其他元素之间的距离。 使用方法 - 点击图标、从右键菜单中选择，或使用快捷键 `Alt/Option + Shift + S` 来开启或关闭扩展程序。 - 将鼠标悬停在网页元素上，即可显示其尺寸、外边距、内边距、标签名、ID 和类名。 - 直接点击即可选中某个元素，高亮框会变为红色。若要取消选择，可再次点击、按 Escape 键或选择其他元素。 - 使用 `Alt/Option + Shift + Up` 选中父级元素，使用 `Alt/Option + Shift + Down` 返回上一级选择。 - 在侧边栏中查看当前选中元素的计算后 CSS。点击“Copy CSS”按钮，即可将计算后 CSS 复制到剪贴板。 功能特性 - 测量任意元素的像素尺寸。 - 测量任意两个元素之间的像素距离。 - HTML 标签名、类名和 ID。 - 父级/子级选择快捷键。 - 选区自动响应，随浏览器窗口大小实时调整。 - 可从右键菜单快速调用。 - 计算后 CSS 检查。 - 一键复制 CSS 到剪贴板。 - 页面标尺，用于精确测量（带十字准线的水平和垂直参考线）。 - 取色器，可拾取并复制页面上任意位置的颜色。 - 元素截图：捕获选中元素的裁剪截图。 - 无障碍问题：自动检测并高亮选中范围内的 WCAG 对比度问题，并给出可执行的改进建议。 - SEO 问题：发现常见的 SEO 疏漏，例如标题缺失、多个 H1、图片缺少 alt 文本以及 meta 标签缺失。 - Meta 标签：按类别分组查看 SEO、Open Graph 和 Twitter 卡片 meta 标签。 - 社交预览：基于页面的真实元数据，预览它在 Facebook、X 和 LinkedIn 上分享时的呈现效果。 - 适用于任何网页。 - 访问 `chrome://extensions/shortcuts` 自定义键盘快捷键。 Screen Ruler PRO 还提供 PRO 版本，解锁更多进阶功能。 - 实时 CSS 编辑器：在侧边栏中直接编辑任意元素的 CSS，完整支持 @media 查询和伪状态强制。改动即时生效，Changes 标签页会按元素记录每一处覆盖，方便您复制或还原。HTML 编辑工具支持对元素进行剪切、复制、粘贴、创建副本和删除。文本编辑模式还能就地改写页面文案。 - 浮动检查器：悬停时即可看到详细属性，包括位置、尺寸、实际渲染字体、颜色等。按空格键可固定检查器，并排比较多个元素。 - 响应式模式：借助交互式设备模拟器和自定义尺寸，在不同设备视口下测试您的设计。 - 样式来源：浏览应用于任意元素的源样式表规则，按源文件分组显示，并清晰标注 @media 包装层和层叠冲突。 - Tailwind CSS 生成器：一键将任意元素的计算样式转换为 Tailwind v4 实用类。 - Box Shadow 可视化：以分解视图交互式拆解多层 box-shadow。 - 动画分析：可视化 CSS 动画的缓动曲线，并复制动画属性。 - Transition 检查器：与动画并列展示，可视化 CSS 过渡及其缓动函数曲线。 - 渐变可视化：检查并可视化 CSS 渐变，详细拆解色标与方向。 - 资源提取：提取并下载图片、SVG 和矢量资源。 - 颜色提取：从选中内容中提取并复制配色方案，支持 hex、RGB 和 HSL 值。 - 排版分析：分析并提取选中范围内使用的全部文字排版样式。 - 技术检测：识别驱动任何网站的框架、库和工具，支持 180 多种技术。 - 布局 Grid 叠加：在页面上叠加可自定义的布局网格，让设计对齐分毫不差。 - 布局检查：可视化 Flexbox 和 Grid 布局，清晰拆解对齐方式、方向和结构。 - 断点：检测 CSS 媒体查询断点，并在页面上以彩色边界线直观呈现。 - CSS 选择器搜索：使用 CSS 选择器查找并高亮元素。 - X-Ray 模式：为所有内容描边，揭示页面的底层结构。 - Canvas 检查：检查 HTML5 Canvas 元素，查看尺寸、上下文类型并提取配色。 - 页面体积：清楚了解页面加载了哪些内容，按脚本、样式表、图片、字体等分类统计。 PRO 只需一次性付款，即可终身使用。 适用人群 - 开发者：快速发现布局问题或对齐偏差。无论是微调外边距和内边距，还是确认每个部分都严丝合缝，这款工具都会成为您开发工具箱中不可或缺的一员。 - 设计师：确保设计以像素级精度落地。它是设计与开发之间的桥梁，让您随时检查每个组件是否与设计稿完全一致。 安装说明 - 专为 Google Chrome 116+ 的稳定运行而设计。 - 可安装在任意 Chromium 内核浏览器上；但为获得最佳体验，请确认浏览器支持所有必需的 API（例如 Side Panel 和 Offscreen）。如果安装时遇到问题，请将浏览器更新到最新版本后重试。