前端UI调试辅助操作技巧

给所有元素加上outline，这样就能迅 速了解自己所需的元素位置信息，直接 可见元素位置大小了。

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

html * {
    outline: 1px solid red
}

这里使用outline是它不会增加元素的大小
通过这个技巧不仅能帮助我们在开发中迅速了解元素所在的位置，还能帮助我们方便地查看任意网站的布局。

可是这样就得每次添加css才能实现，其实还有更简便的方法，那就需要用到浏览器的书签功能了。

步骤：

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。存在的话就删除，不存在的话就添加，通过这种方式我们就能很方便的通过这个技巧查看任意网页的布局了。