Что можно использовать для выделения элементов HTML с видимыми отступами, полями и границами?

Question

Обычно я неплохо справляюсь с использованием расширения Chrome Web Developer для контурирования элементов, отладки моего CSS и т. Д., И когда это не соответствует задаче, я использую версию Firefox (оригинальная, улучшенная версия), ночто мне действительно нужно, так это инструмент, который может очертить «след» элемента, показывая элемент «core», его отступ, его границу в реальной ширине и поля.

Существует ли такой инструмент дляChrome или Firefox в этом отношении?

Answer 1

У инструментов Chrome Dev есть все:

Вы можете видеть фактический размер в желтом, поля в темно-синем, отступы в светло-синем и фактический элемент в светло-синем. Затем вы можете открыть консоль и переключиться в раздел «Метрики», чтобы увидеть нечто похожее на «Макет» в Firebug.

PS. Будучи бывшим фанатом Firebug в течение многих лет, я могу заверить вас, что инструменты Chrome для разработчиков сейчас действительно более мощные, чем Firebug, вам просто нужно открыть для себя все функции.

Answer 2

Чтобы выделить все элементы:

* {
  outline: 1px red solid;
}

Answer 3

По иронии судьбы, в IE всех браузеров есть встроенные средства разработки («макет» на вкладке HTML).

Для Firefox превосходный Firebug имеет аналогичный инструмент (опять же, вкладка HTML, «макет» справа).