Muito fácil de usar técnicas de depuração de interface do usuário

No processo de desenvolvimento de negócios, certamente, muitas vezes, precisa ver a localização eo tamanho de um elemento e modificar o seu CSS, por isso vai freqüentemente usam para selecionar elementos nos DevTools função

Na verdade, podemos usar uma técnica CSS para adicionar todos os elementos outline, para que possamos compreender rapidamente os elementos da informação de localização que eles precisam, não há necessidade de visualizar o elemento seleccionado.

Nós só precisa adicionar a seguinte CSS será capaz de adicionar este efeito a qualquer website

html * {
    outline: 1px solid red
}

Note que eu não utilizar esta  razão que  aumenta o tamanho dos elementos, mas  não vai. borderborder outline

Através desta técnica, não só nos ajudará a entender rapidamente onde a posição do elemento em desenvolvimento, mas também nos ajudam a visualizar facilmente o layout de qualquer site.

Mas no momento as habilidades que precisamos para adicionar CSS manualmente para alcançar, é um gosto pouco pequeno, pode ser alcançado por um interruptor em qualquer página para desligar esta função?

A resposta é sim, é preciso usar o recurso de favoritos do Chrome.

1. Abra a página de gerenciamento de favoritos

2. canto superior direito dos três pontos "para adicionar um novo marcador."

3. nome aleatório, cole o seguinte código na 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>';
	}
})();

Podemos, então, clique no marcador que você acabou de criar em qualquer site, ele irá determinar se há uma depuração interna . Existe para apagar, não existe a acrescentar, que será capaz de visualizar facilmente o layout de qualquer página desta forma por esta técnica. style