Very 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

html * {
    outline: 1px solid red
}

Note that I did not use this  reason that  increases the size of the elements but  will not. borderborder outline

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.

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>';
	}
})();

We can then click on the bookmark you just created on any website, it will determine whether there is an internal debugging . Exists to delete, does not exist to add, we will be able to easily view the layout of any page in this way by this technique. style