
Me complace compartir con usted algunas de las funciones más nuevas de Chrome DevTools. Hay una breve introducción a continuación, y luego cubriremos muchas de las nuevas funciones de DevTools. También veremos lo que sucede en algunos otros navegadores. Me mantengo al día con estas cosas, mientras creo Dev Tips, ¡la colección más grande de consejos de DevTools que encontrarás en línea!
Es una buena idea averiguar qué ha cambiado en DevTools porque está en constante evolución y las nuevas funciones están diseñadas específicamente para ayudar y mejorar nuestra experiencia de desarrollo y depuración.
Saltemos a lo último y lo mejor. Si bien la versión pública estable de Chrome tiene la mayoría de estas características, estoy usando Chrome Canary porque me gusta estar a la última.
Faro
Lighthouse es una herramienta de código abierto para auditar páginas web, generalmente en torno al rendimiento, SEO, accesibilidad y demás. Desde hace un tiempo, Lighthouse se ha incluido como parte de DevTools, lo que significa que puede encontrarlo en un panel llamado… ¡Lighthouse!
Bien hecho, Sr. Coyier. 🏆
Me gusta mucho Lighthouse porque es una de las partes más fáciles de usar de DevTools. Haga clic en “Generar informe” e inmediatamente obtendrá notas legibles para su página web, como:
El documento utiliza tamaños de fuente legibles Texto 100 % legible
O:
Evite un tamaño DOM excesivo (1189 elementos)
Casi todas las auditorías tienen enlaces a la documentación del desarrollador que explica cómo puede fallar la auditoría y qué puede hacer para mejorarla.
La mejor manera de comenzar con Lighthouse es realizar auditorías en sus propios sitios web:
- Abra DevTools y navegue hasta el Panel de faro cuando estás en uno de tus sitios
- Seleccione los elementos que desea auditar (Mejores prácticas es un buen punto de partida)
- Hacer clic Generar informe
- Haga clic en cualquier auditoría aprobada/fallida para investigar los hallazgos
Aunque Lighthouse ha sido parte de DevTools por un tiempo (¡desde 2017!), todavía merece una mención significativa debido a las funciones orientadas al usuario que continúa ofreciendo, como:
- Una auditoría que verifica que los elementos de anclaje se resuelvan en sus URL (Dato curioso: ¡trabajé en esto!)
- Una auditoría que verifica si la métrica de pintura con contenido más grande es lo suficientemente rápida
- Una auditoría para advertirle sobre JavaScript no utilizado
Un mejor “elemento de inspección”
Esta es una característica sutil y, en cierto modo, muy pequeña, pero puede tener efectos profundos en la forma en que tratamos la accesibilidad web.
Así es como funciona. Cuando usa Inspeccionar elemento, que posiblemente sea el uso más común de DevTools, ahora obtiene una información sobre herramientas con información adicional sobre accesibilidad.
¡La accesibilidad está integrada!
La razón por la que digo que esto puede tener un impacto profundo es porque DevTools ha tenido funciones de accesibilidad desde hace bastante tiempo, pero ¿cuántos de nosotros las usamos realmente? Incluir esta información en una función de uso común como Inspeccionar elemento le dará mucha más visibilidad y la hará mucho más accesible.
La información sobre herramientas incluye:
- la relación de contraste del texto (qué tan bien o mal contrasta el texto de primer plano con el color de fondo)
- la representación del texto
- el papel de ARIA
- si el elemento inspeccionado es o no enfocable por teclado
Para probar esto, haga clic derecho (o Cmd
+ Shift
+ C
) en un elemento y seleccione Inspeccionar para verlo en DevTools.
Hice un video de 14 minutos sobre la depuración de accesibilidad con Chrome DevTools que cubre algo de esto con más detalle.
Emular las deficiencias de la visión
Exactamente como dice en la lata, puede usar Chrome DevTools para emular problemas de visión. Por ejemplo, podemos ver un sitio a través de la lente de visión borrosa.
¡Eso es un desafío para leer!
¿Cómo puedes hacer esto en DevTools? Como esto:
- Abra DevTools (haga clic derecho y “Inspeccionar” o
Cmd
+Shift
+C
). - Abre el Menú de comandos de DevTools (
Cmd
+Shift
+P
en mac,Ctrl
+Shift
+P
en Windows). - Seleccione Mostrar representación en el menú Comando.
- Seleccione una deficiencia en el panel de representación.
Usamos la visión borrosa como ejemplo, pero DevTools tiene otras opciones, que incluyen: protanopia, deuteranopia, tritanopia y acromatopsia.
Al igual que con cualquier herramienta de esta naturaleza, está diseñado para ser un complemento de nuestras (con suerte) habilidades de accesibilidad existentes. En otras palabras, no es instructivo, sino que influye en los diseños y las experiencias de usuario que creamos.
Aquí hay un par de recursos adicionales sobre accesibilidad y emulación de baja visión:
- Requisitos de accesibilidad para personas con baja visión (W3C)
- Mejore la accesibilidad de la página emulando las deficiencias de visión
Obtener tiempo en el rendimiento
El Panel de rendimiento en DevTools a veces puede parecer una mezcla confusa de formas y colores.
Esta actualización es excelente porque hace un mejor trabajo al mostrar métricas de rendimiento significativas.
Lo que queremos ver son esos rectángulos de tiempo adicionales que se muestran en “Tiempos” en la grabación del panel de rendimiento. Esto destaca:
- contenido DOM cargado: El evento que se activa cuando se carga el HTML inicial
- Primera pintura: Cuando el navegador pinta píxeles por primera vez en la pantalla
- Primera pintura con contenido: El punto en el que el navegador extrae contenido del DOM que indica al usuario que el contenido se está cargando
- Cargar: Cuando la página y todos sus recursos hayan terminado de cargarse
- Pintura con contenido más grande: La imagen o elemento de texto más grande, que se representa en la ventana gráfica
Como beneficio adicional, si encuentra el evento de pintura con contenido más grande en una grabación del panel de rendimiento, puede hacer clic en él para obtener información adicional.
¡Buen trabajo, trucos CSS! La pintura con contenido más grande ocurre al principio de la carga de la página.
Si bien hay mucha información de oro aquí, el “Nodo relacionado” es potencialmente el elemento más útil porque especifica exactamente qué elemento contribuyó al evento LCP.
Para probar esta función:
- Abra DevTools y navegue hasta el Panel de rendimiento
- Hacer clic “Empezar a perfilar y recargar página”
- Observe las métricas de tiempo en el Sección de horarios de una grabacion
- Haga clic en las métricas individuales para ver qué información adicional obtiene
Monitorear el desempeño
Si desea comenzar rápidamente a usar DevTools para analizar el rendimiento y ya probó Lighthouse, le recomiendo la función Monitor de rendimiento. Esto es como tener WebPageTest.org al alcance de su mano con cosas como el uso de la CPU.
He aquí cómo acceder a él:
- Abrir herramientas de desarrollo
- abre el Menú de comandos (
Cmd
+Shift
+P
en mac,Ctrl
+Shift
+P
en Windows) - Seleccione “Mostrar monitor de rendimiento” en el menú Comando
- Interactuar y navegar por el sitio web
- Observa los resultados
El Monitor de rendimiento puede brindarle métricas interesantes, sin embargo, a diferencia de Lighthouse, es para que usted descubra cómo interpretarlas y tomar medidas. No se proporcionan sugerencias. Depende de usted estudiar ese gráfico de uso de la CPU y preguntarse si algo como el 90 % es un nivel aceptable para su sitio (probablemente no lo sea).
El Monitor de rendimiento tiene una leyenda interactiva, donde puede activar y desactivar métricas, como:
- uso de CPU
- Tamaño del montón JS
- Nodos DOM
- Oyentes de eventos JS
- Documentos
- Marcos de documentos
- Diseños / seg
- Recálculos de estilo/seg.
Descripción general de CSS y anulaciones locales
Programar Plusya ha cubierto estas características, ¡así que ve y échales un vistazo!
- Descripción general de CSS: un práctico panel de DevTools que brinda un montón de estadísticas interesantes sobre el CSS que usa su página
- Anulaciones locales: una característica poderosa que le permite anular los sitios web de producción con sus recursos locales, para que pueda obtener fácilmente una vista previa de los cambios
Entonces, ¿qué pasa con DevTool en otros navegadores?
Estoy seguro de que notó que he estado usando Chrome a lo largo de este artículo. Es el navegador que uso personalmente. Dicho esto, vale la pena considerar que:
- Firefox DevTools se ve muy bien en este momento
- Con Microsoft Edge extendiéndose desde Chromium, también se beneficiará de estas características de DevTools
- Como es evidente en las Notas de la versión de vista previa de la tecnología de Safari (busque Web Inspector en esa página), Safari DevTools ha recorrido un largo camino
En otras palabras, ¡estén atentos porque este es un espacio que evoluciona rápidamente!
Conclusión
¡Cubrimos mucho en poco espacio!
- Faro: Un panel que brinda consejos y sugerencias de rendimiento, accesibilidad, SEO y mejores prácticas.
- Inspeccionar elemento: una mejora de la función Inspeccionar elemento que proporciona información de accesibilidad a la información sobre herramientas de Inspeccionar elemento
- Emular las deficiencias de la visión: Una función en el Panel de representación para ver una página a través de la lente de baja visión.
- Tiempos del panel de rendimiento: Métricas adicionales en la grabación del panel Rendimiento, que muestran estadísticas orientadas al usuario, como la pintura con contenido más grande
- Monitor de rendimiento: una visualización en tiempo real de las métricas de rendimiento del sitio web actual, como el uso de la CPU y el tamaño del DOM.
¡Consulte mi lista de correo, Consejos para desarrolladores, si desea mantenerse al día con las últimas actualizaciones y obtener más de 200 consejos de desarrollo web! También tengo un curso de video premium en ModernDevTools.com. Y tiendo a publicar montones de recursos adicionales de desarrollo web en Gorjeo.