Очень полезные советы по отладке пользовательского интерфейса

внешний интерфейс JavaScript

В процессе развития бизнеса вам часто нужно проверять положение и размер элемента и изменять его CSS, поэтому вы будете часто использовать функцию выбора элемента в DevTools.

На самом деле, мы можем использовать CSS-трюк, чтобы добавитьoutline, чтобы вы могли быстро понять необходимую информацию о местоположении элемента, и вам не нужно выбирать элемент для его просмотра.

Нам просто нужно добавить следующий CSS, чтобы добавить этот эффект на любой веб-сайт.

body * {
    outline: 1px solid red
}

Следует отметить, что здесь я не использовалborderПричина в том,borderувеличит размер элемента, ноoutlineНе буду.

Этот метод может не только помочь нам быстро понять расположение элементов во время разработки, но и помочь нам легко просмотреть макет любого веб-сайта.

Мне больше всего нравится использовать этот трюк, чтобы увидеть, выровнены ли элементы.

Но теперь этот метод требует, чтобы мы вручную добавляли CSS, чтобы добиться этого, что кажется немного безвкусным.Можно ли включать и выключать эту функцию на любой веб-странице с помощью переключателя?

Ответ — да, нам нужно использовать функцию закладок Chrome.

  1. Открыть страницу управления закладками
  2. Три точки в правом верхнем углу «Добавить новую закладку»
  3. Назовите все, что хотите, вставьте следующий код в 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. Если он существует, удалите его, а если он не существует, добавьте его Таким образом, мы можем легко просмотреть макет любой веб-страницы с помощью этой техники.

PS: На приведенные выше навыки создания закладок ссылаютсяздесь, оригинальный контент немного усложнен, автор изменил егоstyleсодержание в .

Наконец

Статья впервые опубликована авторомблог

Если вы считаете, что контент полезен, вы можете обратить внимание на мой официальный аккаунт «Внешняя часть действительно забавная» и регулярно делиться следующими темами:

  • Внешнее мало знаний, холодное знание
  • Основное содержание
  • Повысить эффективность работы
  • персональный рост

Категории