首页 孤独与我正文

很好用的 UI 调试技巧

夏雨 孤独与我 2019-09-27 857 0 | 文章出自:掘金 chrome调试技巧UI调试
限时免费加入本站QQ群994819852

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


很好用的 UI 调试技巧 chrome调试技巧 UI调试 第1张


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


很好用的 UI 调试技巧 chrome调试技巧 UI调试 第2张


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

body * {     outline: 1px solid red }

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

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

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

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

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

  1. 打开书签管理页

  2. 右上角三个点「添加新书签」

  3. 名称随意,粘贴以下代码到网址中

javascript: (function() { 
var elements = document.body.getElementsByTagName('*'); 
var items = []; 
for (var i = 0; i < elements.length; i++) { 
if (elements[i].innerHTML.indexOf('html * { outline: 1px solid red }') != -1) { 
items.push(elements[i]);
} } if (items.length > 0) { 
for (var i = 0; i < items.length; i++) { 
items[i].innerHTML = '';‘’
} } else { 
           document.body.innerHTML += '<style>html * { outline: 1px solid red }</style>'; } 
})();

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



本页链接:https://www.xiayu.wang/gdyw/hhyduidsjq.html

文章标题:很好用的 UI 调试技巧

版权声明:除非特别标注,否则均为本站原创文章,转载时请以链接形式注明文章出处。

评论

最新留言

  • 手冲人

    手冲人 说:

    1

    2020-04-06 19:59:55
    来源:福利帖:查车牌常用的网站
  • 你好

    你好 说:

    谢谢啊

    2020-04-06 19:52:30
    来源:福利帖:查车牌常用的网站
  • 试试

    试试 说:

    shishi怎么样

    2020-04-06 19:47:33
    来源:福利汇总:也许是最全的TG福利频道分享页了
  • 001

    001 说:

    很好

    2020-04-06 19:09:54
    来源:福利汇总:也许是最全的TG福利频道分享页了
  • 小小红

    小小红 说:

    很好

    2020-04-06 19:06:20
    来源:福利分享:台湾麻豆传媒合集
  • 宸宇九思

    宸宇九思 说:

    营养要跟上,楼主可以的

    2020-04-06 17:02:06
    来源:福利汇总:也许是最全的TG福利频道分享页了
  • ccccc

    ccccc 说:

    哇哦哇哦哇哦

    2020-04-06 14:28:45
    来源:福利分享:台湾麻豆传媒合集
  • 2001911

    2001911 说:

    谢谢。。。

    2020-04-06 13:40:49
    来源:福利帖:查车牌常用的网站