|
|
51CTO旗下网站
|
|
移动端

很好用的 UI 调试技巧

在业务开发过程中,想必大家经常会需要查看一个元素的位置及大小并修改它的 CSS,因此就会频繁使用到 DevTools 中的选择元素功能。其实我们可以使用一个 CSS 技巧给所有元素加上 outline,这样就能迅速了解自己所需的元素位置信息,无须再选择元素查看了。

作者:yck来源:掘金|2019-09-24 13:34

很好用的 UI 调试技巧

在业务开发过程中,想必大家经常会需要查看一个元素的位置及大小并修改它的 CSS,因此就会频繁使用到 DevTools 中的选择元素功能。

很好用的 UI 调试技巧

其实我们可以使用一个 CSS 技巧给所有元素加上 outline,这样就能迅速了解自己所需的元素位置信息,无须再选择元素查看了。

很好用的 UI 调试技巧

我们只需要添加以下 CSS 就能为任何网站添加这样的效果

  1. body * { 
  2.     outline: 1px solid red 

需要注意的是这里我没有使用 border 的原因是 border 会增加元素的大小但是 outline 不会。

通过这个技巧不仅能帮助我们在开发中迅速了解元素所在的位置,还能帮助我们方便地查看任意网站的布局。

笔者最喜欢用这个技巧来查看元素是否对齐。

但是当下这个技巧需要我们手动添加 CSS 来实现,显得略微有点鸡肋,是否可以通过一个开关来实现任意网页开启关闭这个功能呢?

答案是有的,我们需要借助 Chrome 的书签功能。

  • 打开书签管理页
  • 右上角三个点「添加新书签」
  • 名称随意,粘贴以下代码到网址中
  1. javascript: (function() { 
  2.     var elements = document.body.getElementsByTagName('*'); 
  3.     var items = []; 
  4.     for (var i = 0; i < elements.length; i++) { 
  5.         if (elements[i].innerHTML.indexOf('html * { outline: 1px solid red }') != -1) { 
  6.             items.push(elements[i]); 
  7.         } 
  8.     } 
  9.     if (items.length > 0) { 
  10.         for (var i = 0; i < items.length; i++) { 
  11.             items[i].innerHTML = ''
  12.         } 
  13.     } else { 
  14.         document.body.innerHTML += 
  15.             '<style>html * { outline: 1px solid red }</style>'
  16.     } 
  17. })();  

然后我们就可以在任意网站上点击刚才创建的书签,内部会判断是否存在调试的 style。存在的话就删除,不存在的话就添加,通过这种方式我们就能很方便的通过这个技巧查看任意网页的布局了。

PS:以上书签的技巧参考自此处,原内容略微繁琐,笔者改动了 style 中的内容。

【编辑推荐】

  1. CSS > CSS3 中的层叠上下文解密
  2. Google Chrome终于支持CSS Variables了
  3. 如何调试 iPhone Safari 浏览器的CSS兼容问题
【责任编辑:未丽燕 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

订阅专栏+更多

网络排障一点通

网络排障一点通

网络排障及优化调整案例
共20章 | 捷哥CCIE

382人订阅学习

VMware NSX 入门到实战

VMware NSX 入门到实战

网络虚拟化革命性技术
共16章 | Cloud袁

221人订阅学习

消息队列Kafka运维实践攻略

消息队列Kafka运维实践攻略

入门级消息队列
共3章 | 独行侠梦

114人订阅学习

视频课程+更多

Vue.js 2.0之全家桶系列视频课程(vue、vue-router、axios、vuex)

Vue.js 2.0之全家桶系列视频课程(vue、vue-r

讲师:汤小洋1488607人学习过

Mysql5.7 高级性能优化

Mysql5.7 高级性能优化

讲师:白丁12357人学习过

你必学的SSM实战案例

你必学的SSM实战案例

讲师:齐毅25102人学习过

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊

51CTO服务号

51CTO官微