很好用的 UI 调试技巧

在营业开拓进程中，想必各人常常会必要查察一个元素的位置及巨细并修改它的 CSS，因此就会频仍行使到 DevTools 中的选择元素成果。

着实我们可以行使一个 CSS 能力给全部元素加上 outline，这样就能敏捷相识本身所需的元素位置信息，无须再选择元素查察了。

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

body * { 
    outline: 1px solid red 
} 

必要留意的是这里我没有行使 border 的缘故起因是 border 会增进元素的巨细可是 outline 不会。

通过这个能力不只能辅佐我们在开拓中敏捷相识元素地址的位置，还能辅佐我们利便地查察恣意网站的机关。

笔者最喜好用这个能力来查察元素是否对齐。

可是当下这个能力必要我们手动添加 CSS 来实现，显得略微有点鸡肋，是否可以通过一个开关来实现恣意网页开启封锁这个成果呢?

谜底是有的，我们必要借助 Chrome 的书签成果。

• 打开书签打点页
• 右上角三个点「添加新书签」
• 名称随意，粘贴以下代码到网址中

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。存在的话就删除，不存在的话就添加，通过这种方法我们就能很利便的通过这个能力查察恣意网页的机关了。

PS：以上书签的能力参考自此处，原内容略微繁琐，笔者窜改了 style 中的内容。

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!