En las devtools de Chrome, las devtools de Firefox, Safari, Opera, etc., si inspecciono un elemento, puedo ver su cuadro delimitador bien delineado cuando paso el mouse sobre el código de ese elemento en el panel de origen. Eso es genial. Pero, ¿qué pasa si me gustaría ver cómo se presentan todos (o la mayoría) de los elementos de la página? Por ejemplo, tal vez me gustaría ver algo como esto:

enter image description here

En el "Editor de estilos" de Firefox he agregado estos estilos:

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 no puede hacer esto ya que no admite el estándar web UAAG 2.0 para la accesibilidad). Como la hoja de estilo del agente de usuario anula los estilos de la página, veo el tipo de esquemas que estoy buscando.

Ahora, esto es solo un truco, y tal vez sea suficiente, pero ¿hay otras herramientas que hacen esto, o algo en las herramientas de desarrollo que no encontré?

Nota: Encontré esta respuesta con respecto a "Mostrar bordes de capa compuestos" en la opción del menú Renderizado en Chrome, pero no es realmente lo que estoy buscando:

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

3
Purplejacket 28 dic. 2016 a las 07:30

3 respuestas

La mejor respuesta

Resulta que estaba buscando una extensión de navegador que un amigo había mencionado hace mucho tiempo: la extensión "Desarrollador web".

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

Esto es lo que parece esbozar los elementos de nivel de bloque:

enter image description here

Está disponible para Chrome, Firefox y Opera. Aparentemente no para Safari.

3
Purplejacket 9 ene. 2017 a las 20:01

Si está utilizando Firefox Quantum:

https://addons.mozilla.org/en-US/firefox/addon/open-pesticide/?src=search

Pesticida abierto por MatthewBaa

Describe cada elemento de la página para ayudarlo a visualizar sus dimensiones y superar esos molestos problemas de diseño de CSS. Requiere cero permisos y completamente de código abierto.

1
davimdantas 31 may. 2018 a las 13:21

No tiene que editar la hoja de estilo del agente de usuario, ya que puede hacerlo utilizando las herramientas de desarrollador [F12].

Necesitas agregar este código

*{border: 1px solid #fff}
4
Rajan471 28 dic. 2016 a las 04:44