Web Design Ruler EN
LXB-Studio · Firefox
Measure elements, identify fonts, and pick colors on any page. No data collection, no network requests, works offline. Open source, and the Firefox build now matches Chrome feature for feature.
<all_urls>），意味着它可以读取你在任意站点的页面内容，包括已登录的页面。这是许多扩展正常工作的必要条件，但也值得你确认来源可信。
截图
简介
Web Design Ruler is a small, honest toolkit for people who build websites. It answers the three questions you ask most while inspecting a page, how big is this, what font is that, and what color is this, without dev tools gymnastics and without phoning home.
Measure. Drag across the page to read width, height, diagonal, and area. Hold Shift to snap to a 10 px grid. Copy any value with one click.
Fonts. Hover any text to see its family, size, weight, style, line height, and color. The detector reports the font that actually rendered, not just the first name in the CSS stack. Save fonts to a history with live previews and copy any of them as CSS.
Colors. Pick from any element, including images and video frames, in HEX, RGB, and HSL. Right click while picking to grab the text color instead of the background. Recent colors are kept automatically, palettes can be saved and shared as JSON, and a built in WCAG checker shows AA and AAA contrast results as you pick. Copy All Colors harvests every color on a page in one right click and copies them as CSS variables.
Quick to reach. Toolbar popup, right click menu, or keyboard: Alt+Shift+R opens the popup, and Alt+Shift+P, F, and M jump straight to each tool. A toolbar badge shows when a tool is armed. Dark mode included, and the Firefox build ships with a Firefox themed starter palette.
Private by design. This add-on collects nothing and transmits nothing. No analytics, no ads, no accounts, and zero network calls in the code, which you can check yourself:
The manifest formally declares that no data is collected, so Firefox shows you that guarantee at install time.
NEW IN 2.3.0
Tools now stay active until you press Esc, so you can measure several elements, pick several colors, or identify several fonts in a row without reopening the popup. The popup also reopens on the tab you used last. Prefer the old one-shot behavior? Turn it off in Options. Also fixed: clicks during the brief confirmation flash no longer fall through to the page, and a stray click no longer saves an empty measurement.
Questions or ideas? Open an issue on GitHub or write to LXBStudioLLC@gmail.com.
Web Design Ruler 是做什么的
Web Design Ruler 是一款面向 Firefox 的开发者工具类扩展，主要用来调试页面、查看样式与请求、测试接口、辅助前端开发。官方对它的介绍是：Measure elements, identify fonts, and pick colors on any page. No data collection, no network requests, works offline. Open source, and the Firefox build now matches Chrome feature for feature.在Firefox 附加组件商店（AMO）上，它当前版本 2.3.0，约 54 名用户。
适合什么人用
从功能定位看，Web Design Ruler 更适合前端工程师、测试与需要经常查看页面结构的用户。如果你平时只是偶尔遇到相关需求，用浏览器自带功能也能凑合；但如果这件事每天都发生，装一个专门处理它的扩展通常比手动操作省事得多。需要注意的是它作用于所有网站，装上后建议先观察一两天，确认不影响常用站点的正常使用。
怎么安装 Web Design Ruler
- 打开Firefox 附加组件商店（AMO）上的官方页面；
- 点「添加到浏览器」并确认权限提示；
- 装好后在扩展列表里固定图标，方便随时开关。
本站只做索引与介绍，安装包来自官方商店。如果商店页面提示当前地区不可用，说明该扩展未在你所在区域上架。
常见问题
Web Design Ruler 是免费的吗？
Web Design Ruler 在Firefox 附加组件商店（AMO）免费提供下载。它是浏览器扩展，装上就能直接用，不需要注册账号。
Web Design Ruler 安全吗？
它只申请了 0 项权限，范围比较克制，没有申请「读取所有网站数据」这种大权限。
Web Design Ruler 支持哪些浏览器？
当前收录的版本来自Firefox 附加组件商店（AMO），适用于 Firefox。同一个扩展在其他商店可能有对应版本，但功能与版本号不一定相同。
怎么卸载 Web Design Ruler？
在扩展管理页找到 Web Design Ruler，点移除即可。它在本地保存的设置会一起清掉，不会残留数据。
权限清单 来自 manifest.json 原文
站点访问 2
http://*/*https://*/*
接口权限 5
activeTabclipboardWritecontextMenusscriptingstorage