Icono del sitio Blog de Programación y Desarrollo – Nube Colectiva

Novedades en las Dev Tools 101 de Google Chrome

Como todos los meses el equipo de desarrolladores que da soporte a las Chrome DevTools nos trae una nueva versión con novedades y características que mejoran la productividad de los developers y antes de la mitad del mes de abril de 2022 han lanzado la versión 101, versión que seria la primera después de haber llegado a la número 100 y en este post te contaré todo lo nuevo que trae, vamos con ello.

Antes de continuar con este Post, te invito a leer los siguientes artículos:

Asimismo te invito a escuchar el Podcast: “Invierte Tu Dinero En Lo Que Te Haga Crecer“5 Habilidades que Debe Tener un Desarrollador Backend” (Anchor Podcast) (Anchor Podcast): 

Spotify: Sound Cloud: Apple Podcasts Anchor Podcasts

Bien ahora continuemos con el Post: Novedades en las Dev Tools 101 de Google Chrome.

Al igual que en Posts anteriores, 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.

Importar y Exportar Flujos de Usuarios Registrados Como un Archivo JSON

El Panel Recorder ahora admite la importación y exportación de grabaciones de flujo de usuario como un archivo JSON. Esto facilita compartir flujos de usuarios y puede ser útil para informar errores.

Por ejemplo si descargas este archivo JSON, puedes importarlo mediante el botón de importación y reproducir el flujo de usuario.

Además, puedes exportar la grabación, luego de registrar un flujo de usuario , haz clic en el botón exportar. Hay 3 opciones de exportación:

Consulta la documentación para obtener más información sobre las diferencias entre estas opciones.

Ver Capas en Cascada en el Panel Styles

Las capas en cascada permiten tener un contro más explícito de tus archivos CSS para evitar conflictos de especificidad de estilo. Esto es particularmente útil para grandes bases de código, sistemas de diseño y cuando se administran estilos de terceros en las aplicaciones.

En esta demo, hay 3 capas en cascada: page, component y base. En el panel Styles puedes ver cada capa y sus estilos.

Haz clic en el nombre de la capa para ver el orden de las capas. La capa page tiene la especificidad más alta, por lo que el fondo box es verde.

Compatibilidad con la Función de Color hwb()

Ahora puedes ver y editar el formato de color HWB en DevTools. En el panel Styles manten presionada la tecla SHIFT y haz clic en cualquier vista previa de color para cambiar el formato de color, podrás ver el formato de color HWB.

Alternativamente, puedes cambiar el formato de color HWB en el selector de color.

Mejora en la Visualización de Propiedades Privadas

Ahora DevTools evalúa y muestra correctamente los accesos privados. En versiones anteriores, no se podía expandir las clases con accesos privados en la consola (Console) y el panel Sources.

Otros Cambios y Correcciones Destacadas

También se realizaron los siguientes cambios y correciones notables:

Nuevo intervalo de tiempo y modo de instantánea en el panel Lighthouse (Experimental)

Para habilitar este experimento, activa la casilla de verificación Use Lighthouse panel with timespan and snapshot modes en Settings > Experiments.

Asimismo el modo de navegación existente en el panel Lighthouse ahora admite dos modos más para pedir los flujos de usuarios.

Por ejemplo puedes utilizar los informes de Timespan para analizar las interacciones de los usuarios. Abre esta demo, seleccioma el modo Timespan y haz clic en Start Timespan. En la página haz clic en un café y finaliza el intervalo de tiempo. Lee el informe para averiguar el tiempo total de bloqueo y el cambio de diseño acumulativo que fueron causados por la interacción.

Cada modo tiene sus propios casos de uso, beneficios y limitaciones únicos. Consulta la documentación de Lighthouse para obtener más información. 

Hasta aquí llegamos con todas las Novedades que trae esta nueva versión de Chrome DevTools Nro 101, nos vemos en la siguiente actualización. 

Nota(s)

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos. 
Salir de la versión móvil