网页元素间距测量(better rule插件的使用)
2024-09-08 18:30:24
我们在测试UI界面的时候,需要测量各元素大小及元素之间的距离。元素大小,使用F12可以简易的得到数据,但是元素的间距相对来说会比较复杂。这里推荐一款chrome插件better rule,帮助大家测量元素之间的距离。
1.下载安装
https://download.csdn.net/download/weixin_44700435/87513361
下载 Better Ruler 的 crx 文件后,打开 Chrome 的扩展程序页面(chrome:extensions 或通过 Chrome 菜单图标 > 更多工具 > 扩展程序找到),然后将 .crx 文件拖放到扩展程序页面进行安装它。
2.使用方法
- 点击插件图标即可开始测量,再次点击将退出测量
- 移动鼠标的同时按住`Alt`键(`Option`, 如果是mac),可实时显示当前鼠标位置元素的大小。
- 移动鼠标的同时按住`Alt`键(`Option`, 如果是mac),如果在吸附范围内(距离元素边界50px内,距离顶点15px内,具体数值可在底部工具栏自定义)可自动吸附。
- 按下`f`键(可在工具栏配置),显示和隐藏底部工具栏。- 如果被元素尺寸挡住,可以按住`shift`键,暂时隐藏元素尺寸和关闭按钮。
- 点击过插件图标一次之后,可以通过双击快捷键来激活和关闭插件, 默认为`z`。
- 页面刷新后该快捷键失效,需要重新点击插件图标启用。如果快捷键无效,请点击页面空白处再尝试。
3.使用效果
4.针对于H5模式,可以使用chrome自带的工具
效果如下
最新文章
- AIX 5L 系统管理技术 —— 存储管理——卷组
- 纯灌水Linus主义
- C#实现http协议下的多线程文件传输
- [原创] 用两个stack实现queue的功能
- BZOJ4304 : 道路改建
- JS 日历控件
- mvc cookie
- multimap和multiset 认知和使用
- redisb并发访问慢出现的问题
- 关于 Repository和UnitOfWork 模式的关系
- 射频识别技术漫谈(19)——Desfire的3次握手认证和段密码生成
- debian支持ll命令
- Java开发中常见的危险信号(上)
- python并发编程之多线程
- Spring MVC基础知识整理➣国际化和异常处理
- Redis主从实战
- Porsche Piwis Tester II V12.100 Version Released
- gets() 与 scanf() 的小尴尬
- ELK环境搭建完整说明
- window下查杀占用端口的进程
热门文章
- revit卸载工具,完全彻底卸载删除干净revit各种残留注册表和文件的方法和步骤。
- NOI 1.7编程基础之字符串
- How to Avoid Trivial Solutions in Physics-Informed Neural Networks
- 超2T硬盘使用gpt分区及做成lvm
- (四十二)Unittest单元测试框架之关于unittest还需要知道的-跳过测试和预期失败
- python面向对象--类的刨析
- 实践:Oracle 数据库基于 RMAN 备份至 腾讯云COS
- MySQL查询时记录行号rownum MySQL查询显示行号MySQL查询显示行号MySQL流水号自MySQL自增行号
- vuexy full-wersion项目安装报错问题处理
- 项目_1.3_手写SpringMVC框架