Easy to use UI debugging techniques

In the business development process, surely we often need to see the location and size of an element and modify its CSS, so it will frequently use to select elements in the function DevTools.

In fact, we can use a CSS techniques to add all the elements outline, so that we can quickly understand the elements of the location information they need, no need to view the selected element.

 

 

 

 

We just need to add the following CSS will be able to add this effect to any website

body * {
    outline: 1px solid red
}

Note that I did not use this borderreason that borderincreases the size of the elements but outlinewill not.

Through this technique will not only help us to quickly understand where the position of the element in development, but also help us to easily view the layout of any site.

I like to use this technique to see the elements are aligned.

But the moment the skills we need to add CSS manually to achieve, it is a little bit tasteless, can be achieved by a switch on any page to turn off this function?

The answer is yes, we need to use Chrome's bookmark feature.

1. Open the bookmark management page
2. Upper right corner of the three points "to add a new bookmark."
3. Random name, paste the following code into the URL

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