This article is reprinted from the yCK article:Github.com/KieSun/Drea…

During business development, you will often need to check the location and size of an element and modify its CSS, so you will use DevTools to select elements frequently.

In fact, you can use a CSS trick to add an outline to all the elements, so that you can quickly know the location of the elements you want, without having to select the elements to look at.

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

html * {
    outline: 1px solid red
}
Copy the code

Note that I didn’t use border here because border increases the size of the element but outline doesn’t.

This technique not only helps us quickly understand the location of elements during development, but also allows us to easily view the layout of any site.

This technique is my favorite to use to see if elements are aligned.

However, this skill requires us to manually add CSS to achieve, seems a little chicken ribs, can through a switch to achieve any page on or off this function?

The answer is yes, we need to use Chrome bookmarks.

  1. Open the bookmarks Management page
  2. Three “Bookmarks” in the upper right corner
  3. The name is optional, paste the following code into the url
javascript: (function() {
	var elements = document.body.getElementsByTagName(The '*');
	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>';
	}
})();
Copy the code

We can then click on the bookmark we just created on any site and internally determine if the style is being debugged. Delete it if it exists, add it if it doesn’t, and in this way we can easily view the layout of any web page using this technique.

PS: The above bookmark tips refer to here, the original content is a little cumbersome, the author changed the content of the style.