设计师和开发人员的网页检查器。测量元素、提取 CSS 和颜色、捕获屏幕截图等。
Screen Ruler 是想要验证其网站实施情况的 Web 开发人员和设计人员的完美伴侣。激活后，您只需将鼠标悬停在任何网页内容上即可查看尺寸、边距、填充、标签名称、ID 和类。您还可以选择一个项目来测量与他人的距离。
用法
- 通过单击图标、从右键单击上下文菜单中选择或使用快捷键“Alt/Option + Shift + R”来切换扩展。
- 将鼠标悬停在网页上的项目上可显示其大小、边距、填充、标签名称、ID 和类别。
- 直接点击选择一个项目；这将使突出显示变为红色。要取消选择，请再次单击、按 Esc 键或选择其他项目。
- 要选择父级，请使用“Alt/Option + Up”。使用“Alt/Option + Down”反转您的选择。
- 在侧面板中查看当前所选项目的计算 CSS。单击“复制 CSS”按钮将计算出的 CSS 复制到剪贴板。
特征
- 测量任何元素的像素大小。
- 测量任意两个元素之间的像素距离。
- HTML 标签名称、类名称和 ID。
- 父/子选择快捷方式。
- 响应式选择会随着浏览器窗口的大小而调整。
- 从上下文菜单访问。
- 计算 CSS 检查。
- 将 CSS 复制到剪贴板。
- 用于精确测量的页面标尺（带有十字准线的水平和垂直参考线）。
- 颜色选择器工具可从页面上的任何位置采样和复制颜色。
- 元素屏幕截图：使用“Ctrl/Cmd + Shift + S”捕获所选项目的裁剪屏幕截图。
- 可访问性问题：自动检测并突出显示您选择中的 WCAG 对比失败，并提供可行的建议。
- SEO 问题：发现常见的 SEO 问题，例如缺少标题、多个 H1、缺少替代文本和缺少元标记。
- 元标签：检查按类别分组的 SEO、Open Graph 和 Twitter 卡元标签。
- 社交预览：使用页面的实际元数据预览在 Facebook、X 和 LinkedIn 上共享页面时的呈现方式。
- 适用于任何网页。
- 通过访问“chrome://extensions/shortcuts”自定义键盘快捷键。
屏幕尺 PRO
还提供 PRO 级别，可解锁更多功能。
- 实时CSS编辑器：直接在侧面板中编辑任何元素的CSS，并具有完整的@media查询支持和伪状态强制。更改会立即应用，“更改”选项卡会跟踪每个元素的每个覆盖，以便您可以复制或恢复。 HTML 编辑工具可让您剪切、复制、粘贴、重复和删除元素。文本编辑模式可让您就地重写页面副本。
- 浮动检查器：悬停时查看详细属性，包括位置、大小、渲染字体、颜色等。按空格键固定检查器并并排比较多个元素。
- 响应模式：使用交互式设备模拟器和自定义尺寸在不同设备视口中测试您的设计。
- 源：浏览适用于任何元素的源样式表规则，按源文件分组，并带有 @media 包装器和明显标记的级联冲突。
- Tailwind CSS 生成器：立即将任何元素的计算样式转换为 Tailwind v4 实用程序类。
- 盒子阴影可视化：通过分解图对多层盒子阴影进行交互式分解。
- 动画分析：可视化 CSS 动画时序曲线并复制动画属性。
- 过渡检查器：可视化 CSS 过渡和计时函数曲线以及动画。
- 渐变可视化：通过颜色停止和方向的详细细分来检查和可视化 CSS 渐变。
- 资产提取：提取并下载图像、SVG 和矢量资产。
- 颜色提取：使用十六进制、RGB 和 HSL 值从选定内容中提取并复制调色板。
- 版式：分析并提取您选择中使用的所有版式样式。
- 技术检测：识别为支持 180 多种技术的任何网站提供支持的框架、库和工具。
- 布局网格覆盖：覆盖可自定义的布局网格以实现完美的设计对齐。
- 布局检查：可视化 Flexbox 和网格布局，并清晰地细分对齐、方向和结构。
- 断点：直接在页面上使用彩色边界线检测和可视化 CSS 媒体查询断点。
- CSS 选择器搜索：使用 CSS 选择器查找并突出显示项目。
- X 射线模式：通过概述所有内容来揭示页面的底层结构。
- Canvas 检查：检查 HTML5 Canvas 元素。查看尺寸、上下文类型并提取调色板。
- 页面重量：准确查看任何页面上加载的内容，按脚本、样式表、图像、字体等进行细分。
PRO 需要一次性付款才能终身访问。
专为
- 开发人员：发现布局问题或识别对齐问题。无论您是调整边距和填充，还是只是确保一切正确排列，此工具都将成为您的开发工具包中不可或缺的补充。
- 设计师：确保您的设计以像素完美的精度实现。它充当设计和开发之间的桥梁，使您可以检查每个组件是否完全按照您的预期对齐。
安装
- 专为 Google Chrome 116+ 的稳定性而设计。
- 可安装在任何 Chromium 浏览器上；但是，为了获得最佳体验，请确保您的浏览器支持所有必需的 API（例如侧面板和离屏）。如果安装有任何问题，请将浏览器更新到最新版本并重试。