非常实用的UI调试技巧

在业务开发过程中，肯定经常需要查看某个元素的位置和大小，修改其CSS，所以会经常用到DevTools中的选择元素功能。其实我们可以使用一种CSS技术，给所有的元素加上outline，这样我们就可以快速的了解我们需要的元素的位置信息，而不用去选择元素来查看。我们只需要添加下面的CSS就可以将这种效果添加到任何网站的body*{outline:1pxsolidred}注意这里我没有使用border的原因是border会增加元素的尺寸而outline不会。这种技巧不仅可以帮助我们在开发时快速了解元素的位置，还可以帮助我们轻松查看任何网站的布局。这是我最喜欢的查看元素是否对齐的技术。但是目前的技术需要我们手动添加CSS来实现，显得有些鸡肋。是否可以通过开关打开和关闭任何网页？答案是肯定的，我们需要用到Chrome的书签功能。打开书签管理页面右上角的三个点“添加新书签”。名称随意，将以下代码粘贴到URLjavascript中：(function(){varelements=document.body.getElementsByTagName('*');varitems=[];for(vari=0;i0){for(vari=0;ihtml*{outline:1pxsolidred}';}})();然后我们可以在任意网站点击刚刚创建的书签，它会内部判断是否有调试样式。存在则删除，不存在则添加。这样我们就可以很方便的通过这个技巧查看任意网页的布局。PS：以上书签技巧参考于此，原文内容有些繁琐，作者在风格上改变了内容。