Как я могу описать элементы HTML-страницы в браузере, чтобы увидеть макет ящиков? Измените таблицу стилей пользовательского агента?

Question

В Chrome devtools, Firefox devtools, Safari, Opera и т. Д., Если я проверяю элемент, я могу видеть его ограничивающий прямоугольник, хорошо очерченный, когда я курсирую над кодом для этого элемента на панели источника. Замечательно. Но что, если я хотел бы увидеть, как все (или большинство) элементов на странице выложены? Например, может быть, я хотел бы увидеть что-то вроде этого:

В окне «Редактор стилей» Firefox Я добавил эти стили:

div { border: 1px dotted pink } 
p { border: 1px solid green } 
a { border: 2px solid yellow } 
li { border: 1px dashed cyan } 
img { border: 1px solid purple} 

(Chrome не может сделать так как он не поддерживает веб-стандарт UAAG 2.0 для доступности). Поскольку таблица стилей пользовательского агента переопределяет стили со страницы, я вижу вид контуров, которые я ищу.

Теперь это просто взломать и, возможно, достаточно, но есть ли другие инструменты, которые делают это, или что-то в devtools, которых я не нашел?

Примечание: Я нашел этот ответ по поводу «Показывать скомпонованы границ слоя» в опции меню Rendering в Chrome, но это не совсем то, что я ищу:

https://superuser.com/questions/774424/grid-overlay-showing-up-as-soon-a-i-launch-chrome-developer-tools

Answer 1

Оказывается, я искал расширение браузера друг упомянул давно: в «Web Developer» расширение.

http://chrispederick.com/work/web-developer/

Вот как это выглядит с изложением элементов уровня блока:

Он доступен для Chrome, Firefox и Opera. Видимо, не для Сафари.

Answer 2

Вы не имеете для редактирования таблицы стилей агента пользователя, как вы можете это сделать, используя инструменты разработчика [F12].

Вам нужно добавить этот код

*{border: 1px solid #fff}