En esta página:
Estamos en el mes de mayo de 2020 y hace unos días Google ha lanzado nuevas novedades en su kit de herramientas para Desarrolladores, me refiero a las Chrome Dev Tools, si eres usuario de estas herramientas, es importante saber que funcionalidades nuevas son añadidas y les puedas sacar provecho, bueno vamos con este Post.
Antes de continuar te invito a escuchar el Podcast: “5 Consejos para ser un Programador más Productivo” (No son los clásicos consejos técnicos de programación, si no de rutinas y buenos hábitos cotidianos):
| Spotify: | Sound Cloud: |
 |
 |
Bien ahora continuemos con el Post: Novedades en las Dev Tools 84 de Google Chrome.
Igualmente como en otras oportunidades, para dar una mejor descripción de las Características nuevas, colocaré el título de la nueva característica, descripción y una o varias imágenes de dicha característica.
Nueva Pestaña Issues
Esta versión de Google Chrome trae una nueva pestaña llamada Issues que muestra advertencias de manera estructurada, vincula los recursos afectados dentro de las DevTools, lo genial es que proporciona orientación sobre como solucionar los problemas, en próximas versiones de las DevTools se irán añadiendo más advertencias junto son sus respectivas soluciones.
Información de Accesibilidad al Inspeccionar un Elemento
Ahora cuando inspeccionamos un elemento, podemos ver si este tiene un nombre y rol accesible y si se puede enfocar con el teclado (Keyboard-focusable).
Actualizaciones en el Panel Performance (Rendimiento)
Hay dos novedades que han sido añadidas en este Panel, veamos a continuación:
Ver información sobre el tiempo total de bloqueo (TBT) en el footer (Píe de página)
TBT es una métrica de rendimiento de carga que ayuda a cuantificar cuánto tiempo tarda una página antes de que pueda ser utilizable. Cuando una página a terminado de cargar, parece ser utilizable, pero JavaScript puede estar haciendo un bloqueo al hilo principal.
Para obtener información sobre el tiempo total de bloqueo, no uses Reload Page 
Si te aparece en el footer o pie de página Total blocking time: Unavailable, significa que DevTools no obtuvo la información que necesita de los datos internos de creación de perfiles de Chrome.
Cambio de diseño (Layout Shift) en la sección Experience
La sección Experience del panel Performance puede ayudar al Desarrollador a detectar cambios en el diseño de una web. El cambio de diseño acumulativo (CLS), es una métrica que puede ayudar a cuantificar la inestabilidad visual no deseada, es es una nueva funcionalidad de Core Web Vitals de Google.
Haz clic en cualquier evento de cambio de diseño (Layout Shift) para ver los detalles del cambio de diseño en la pestaña Summary. Puedes desplazarte sobre los campos Moved from y Moved to para visualizar dónde ocurrió del cambio de diseño.
Nuevo término de Promise (Promesa) en la consola
En versiones anteriores de las Chrome DevTools al iniciar la sesión de una Promise, la Consola (Console) utilizaba para describir incorrectamente el estado de la Promise el valor resolved.
En DevTools 84 ahora se usa el término o valor fulfilled que se alinea con la especificación de una Promise.
Actualizaciones en el Panel Estilos (Styles)
Veamos a continuación las novedades que han sido añadidas en este panel:
Soporte para la palabra clave revert
En el panel Estilos (Styles), al autocompletar un valor DevTools ahora detecta la palabra clave CSS revert, que revierte el valor en cascada de una propiedad, es decir restablece y quita la propiedad que haya sido aplicada a un elemento.
Vista previa de imagen
Esta funcionalidad particularmente a mi me parece muy útil, ahora podemos desplazarnos sobre el valor de la propiedad background-image y colocar el puntero encima de la imagen para ver al instante una vista previa de ella.
Notación de color separada por espacios
El documento CSS Color Module Level 4 especifica que las funciones de color como rgb() deben admitir argumentos separados por espacios, por ejemplo rgb(0, 0, 0) es equivalente a rgb(0 0 0).
En esta versión Nro 84 de Chrome DevTools cuando eliges colores en formato rgb(), se muestran los argumentos separados por espacios.
El Panel Propiedades del Panel Elements queda en Desuso
En esta versión de Chrome DevTools el panel Properties (Propiedades) del panel Elements (Elementos) ha sido declarado en desuso, es su lugar puedes ejecutar en la consola el comando console.dir($0) para obtener la información de propiedades.
Hasta aquí llegamos con todas las Novedades que trae esta nueva versión de Chrome DevTools Nro 84, nos vemos en la siguiente actualización.
Notas
- Algunos de los pasos mencionados pueden variar en futuras versiones de Chrome Dev Tools, esto no depende de nosotros si no de los desarrolladores que dan soporte a las Dev Tools y cambian el orden de las opciones mencionadas.
- Si aún no tienes actualizado tu Dev Tools en Chrome, ten paciencia pronto se actualizará, a veces toma tiempo en llegar los updates.
- No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.