Novedades en las Dev Tools 80 de Google Chrome

Hace mucho que Chrome Dev Tools no tenia novedades desde hace más un mes en donde lanzaron nuevas características de su herramienta en la versión Nro 79, en el mes de Diciembre de 2019 acaban de lanzar la versión Nro 80 en donde han añadido características muy interesantes y en este Post te las voy a compartir.

Para tener una mejor descripción de las Características nuevas, colocaré el titulo de la nueva característica, descripción y una o varias imágenes de dicha característica.

Soporte para Redeclarar un let y una class en la Consola

En versiones anteriores cuando el usuario volvía a declarar una variable local con let la consola arrojaba un error

En esta versión Nro 80 de Chrome Dev Tools ahora se puede volver a declarar una variable local con let y la consola no lanza error alguno

Depuración mejorada de WebAssemby

Ya que Chrome Dev tools ha empezado a admitir Depuración DWARF (DWARF es un formato de archivo de depuración utilizado por muchos compiladores y depuradores), sabiendo esto pues Chrome Dev tools ha agregado soporte para pasar por alto algunos códigos, establecer puntos de interrupción y solucionar rastros de pila en los lenguajes de programación de origen, entre otras mejoras que puedes revisar en el siguiente enlace.

Solicitar cadenas de iniciadores y dependencias (Panel Network)

Ahora puedes visualizar los iniciadores y dependencias que son llamados al hacer una solicitud de red, estos se ven como una lista anidada, para ver los iniciadores y dependencias debes dirigirte a la pestaña initiator que se encuentra dentro del Panel Network.

Esta información puede ayudarte a comprender porque se solicitó un recurso o que actividad de red causó un determinado recurso, como un script por ejemplo

En la imagen anterior https://web.dev/default-627898b5.js es el recurso seleccionado, pero https://web.dev/bootstrap.js es el initiator (iniciador) de los demás recursos respectivamente, es decir https://web.dev/bootstrap.js es el que causó la solicitud de red para https://web.dev/default-627898b5.js

Entendiendo esto pues https://web.dev/chunk-f34f99f7.js es una dependencia de https://web.dev/default-627898b5.js es decir https://web.dev/default-627898b5.js causó la solicitud de red para https://web.dev/chunk-f34f99f7.js

Con esta información sabremos desde donde proviene una dependencia o script.

Resaltado de un Recurso de Red (Panel Network)

En este versión de Chrome Dev Tools se resalta un recurso de Red con un borde azul, esto se da haciendo clic sobre el recurso y luego en la parte de arriba en el Timeline se pintará con un borde de color azul, esto ayudará a verificar si la solicitud del recurso se lleva acabo antes o después de lo esperado

Columna Path y URL en el Panel Network

Ahora podemos visualizar la ruta absoluta de un recurso de Red y la URL de donde procede o se encuentra el recurso de Red.

Si no puedes ver la columna Path y Url tienes que habilitarlas haciendo clic con el botón derecho del mouse sobre el encabezado de la tabla Cascada y selecciona Ruta o Url para habilitarlas

Actualización de las User-Agent Strings

Chrome Dev Tools nos permite configurar un String de agente de usuario (User – Agent) personalizado en la pestaña Network conditions.

El String que personalizamos afecta el encabezado HTTP User – Agent adjunto a los recursos de Red y también afecta el valor de la propiedad navigator.userAgente en el Navegador.Se han actualizado las opciones de User – Agent para reflejar versiones modernas del Navegador

Actualización del Panel Audits

El Panel Audits presenta un nuevo diseño con soporte para adaptarse a las pantallas (responsive design), las opciones de configuración de aceleración se han simplificado

Puedes obtener más información sobre los cambios en la interface del Panel Audits y las limitaciones en este enlace.

Recopilar Modos de Cobertura por Función o Bloque

Ahora en la pestaña Coverage que se encuentra dentro del Panel Elements te permite especificar si los datos de cobertura del código deben recopilares por función o por bloque.

La cobertura por bloque ofrece más detalles pero requiere más esfuerzo del Sistema,  Chrome Dev Tools utiliza la cobertura por función, por el momento

Hasta aquí estas son todas las Novedades que  trae esta nueva versión de Chrome DevTools, 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.