Desarrollador depura elementos DOM en tu página con una línea de código

¿Cuántas veces has luchado para encuentra un problema específico arruinando su diseño CSS? Desde que faltan etiquetas de cierre hasta hermanos anidados incorrectamente, los problemas de CSS son una moneda de diez centavos por docena. Y con este depurador de diseño CSS, el proceso solo es mucho más fácil.

Esta única línea de código atravesar el DOM y perfilar cada elemento Con un color diferente. De esta manera usted puede mejor visualizar cómo funciona (o no funciona) su CSS y detectar rápidamente las áreas problemáticas.

GitHub permite a los desarrolladores guardar pequeños trozos de código llamados Gists. Estos son todos de código abierto y gratis para guardar para su propio uso. Es por eso que este depurador de CSS es tan útil. Combina el destreza moderna de Chrome DevTools con el simplicidad de bookmarklets del navegador.

Para usar este código, primero debes Copia la versión que más te guste de la página Gist. Entonces tú pega ese código en su ventana de Terminal y ejecutarlo. Usted debe terminar con un resultado como este:

Ahora, es posible Guarda este código como un bookmarklet en la barra de herramientas de su navegador. Pero si eres un usuario de Chrome puedes Guarde este código JS como un fragmento de código que es mucho más fácil de ejecutar.

Este fragmento de código puede ser recordado una y otra vez con el clic de un botón. Usted puede analizar cada página, Lleno de estos coloridos esquemas CSS, para elementos DOM de padres e hijos por igual.

Sin embargo, no deberías sentirte limitado solo a Chrome. Este fragmento Funciona para todos los principales navegadores, incluyendo Firefox, Safari, Opera e Internet Explorer.

Y para cualquier persona que tenga curiosidad por saber cómo funciona esto, puede consultar la versión anotada Con comentarios para cada línea de código..

Esta esencia esta llena de comentarios de usuarios relacionados y actualizaciones de otros desarrolladores Ayudando a hacerlo más pequeño y más eficiente. Pero en su estado actual, esta es una de las formas más simples de Depurar cualquier DOM con una sola línea de código.