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

Novedades en las Dev Tools 124 de Google Chrome

Novedades en las Dev Tools 124 de Google Chrome

Novedades en las Dev Tools 124 de Google Chrome

El desuso de JavaScript Profiler llega a su cuarta fase en Chrome DevTools 124.

Esta versión también trae cambios interesantes en el anidamiento de CSS en el panel Elements y otras características.

En este artículo te compartiré las Novedades en las Dev Tools 124 de Google Chrome, vamos con ello.

Algunas características son retiradas por el poco uso que tienen

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.

Nuevo Panel Autofill

El panel Autofill proporciona una manera conveniente de completar automáticamente formularios en sitios web con direcciones guardadas.

El nuevo panel Autofill o Autocompletar te permite inspeccionar la asignación entre los campos de tu formulario, los valores de autocompletar previstos y los datos guardados.

Puedes probar el nuevo panel Autofill en esta página de demostración con datos de prueba:

  1. En Profile Autofill, haz clic en cualquiera de los botones Fill form… , luego haz clic en Submit y luego en la ventana de diálogo Save adress?, haz clic en Save y regresa a la página con el formulario.
  2. Abre DevTools y activa un evento de autocompletar: selecciona un campo de formulario y elige la dirección de la lista desplegable.

El panel Autofill se abre automáticamente y muestra los campos de formulario detectados, los campos que el autocompletar infirió y los valores guardados:

Es útil para no tener que volver a ingresar datos en los campos de los formularios web

Puedes obtener más información, consultando Aprender formularios y Autocompletar.

Aceleración de Red Mejorada Para WebRTC

Mediante la nueva incorporación de parámetros relacionados con paquetes a perfiles de limitación de red personalizados, ahora puedes acelerar tus aplicaciones WebRTC directamente en DevTools.

Esto es útil para probar tu implementación de comunicación en tiempo real, sin la necesidad de utilizar software de terceros.

Los nuevos parámetros son: Packet Loss (porcentaje), Packet Queue Length (número de paquetes) y la flag o bandera Packet Reordering:

Estas opciones te permitirán hacer pruebas en aplicaciones que usen tecnología WebRTC

Para acelerar una conexión WebRTC, especifica los parámetros relacionados con el paquete en un perfil personalizado en Settings > Throttling y selecciónalo en el panel Network.

Prueba los nuevos parámetros usando esta página de demostración.

Primero, permite que la página use la cámara.

Luego, en el panel Network, selecciona el perfil personalizado que configuraste y de regreso a la página haz clic en Start y Call.

Compatibilidad con Animaciones Basadas en Desplazamiento en el Panel Animations

El panel Animations ahora te permite inspeccionar animaciones controladas por desplazamiento.

Prueba esta función en esta página de demostración.

Abre el panel Animations y vuelve a cargar la página para capturar animaciones basadas en desplazamiento.

Mediante este panel puedes analizar el tiempo que toma en realizar un movimiento los elementos de una animación

Un grupo de animación marcado con un ratón aparece en la Overview.

Ahora puedes inspeccionarlo.

El grupo muestra valores de píxeles en lugar de milisegundos en la Timeline.

Soporte Mejorado de Anidamiento de CSS en Elements > Styles

En DevTools 124, la pestaña Elements > Styles mejora la compatibilidad con el anidamiento de CSS y ahora muestra estilos anidados con sangría y entre llaves.

El anidamiento de CSS es una forma de agrupar reglas CSS y hacer que las cosas sean menos detalladas y más estructuradas:

Mediante esta opción podrás ver tus reglas CSS agrupadas

Panel de Rendimiento Mejorado

Chrome DevTools 124 trae las siguientes mejoras:

Ocultar funciones y sus hijos en el gráfico de llamas

Para filtrar el ruido del gráfico de llamas en Performance > Main, ahora puedes ocultar funciones irrelevantes y sus hijos.

En el gráfico de llamas, haz clic derecho en una función y elige una opción en el menú contextual:

Ocultar cierta información te permitirá tener información más clara en en gráfico

Las funciones con hijos ocultos tienen un Drop-down a la derecha.

Pasa el cursor sobre una función para ver la cantidad de hijos ocultos y haz clic para mostrarlos nuevamente.

Para volver al estado inicial del gráfico de llamas, haz clic con el botón derecho en una función y selecciona Reset trace.

Flechas de los iniciadores seleccionados a los eventos que iniciaron

En versiones anteriores, cuando seleccionabas un evento en la pista principal, la pista mostraba una flecha desde su iniciador hasta el evento seleccionado.

Ahora, la pista también muestra una flecha desde el evento seleccionado hasta el que inició, si corresponde.

Con esta mejora apreciarás mejor cuanto tiempo tomo un evento en tu página web

Además, todos los Initiator for ahora tienen campos Initiator for para en la pestaña Summary y tanto los campos Initiator for como Initiated by tienen enlaces con nombre en lugar de Reveal.

Lighthouse 11.6.0

El panel Lighthouse ahora ejecuta Lighthouse 11.6.0.

Puedes ver la lista completa de cambios.

Entre los cambios notables se encuentra la nueva opción Enable JS sampling.

Esta configuración está deshabilitada de forma predeterminada:

Esta es una casilla que puedes habilitar o deshabilitar

Si habilitas la opción Enable JS sampling, esta agrega pilas de llamadas de JavaScript detalladas al seguimiento del rendimiento, pero puede ralentizar la generación de informes:

Obtendrás información del rendimiento de tu código JavaScript

El seguimiento está disponible en Tools menu > View Unthrottled Trace después de generar el informe en el panel Lighthouse.

Puedes conocer los conceptos básicos del uso del panel Lighthouse en DevTools, consultando Lighthouse: optimizar la velocidad del sitio web.

Información Sobre Herramientas Para Categorías Especiales en Memory > Heap snapshots

Las Heap snapshots en el panel Memory tienen grupos especiales de objetos que no se basan en constructores.

Cuando pasas el cursor sobre dichos objetos, el panel Memory ahora te muestra información sobre herramientas con una breve descripción y un enlace a una descripción más larga en la documentación:

Algunas tareas en memoria son creadas con algoritmos creados por lenguajes de programación como C++

Application > Storage updates

Chrome DevTools 124 trae un par de actualizaciones en Application > Storage:

Bytes utilizados para almacenamiento compartido

La sección Application > Storage > Shared storage ahora muestra la cantidad de bytes utilizados por un origen:

Con esta información podrás saber que origen utiliza más bytes al navegar por una web

El almacenamiento compartido te permite tener acceso de escritura ilimitado al almacenamiento entre sitios con acceso de lectura que preserva la privacidad.

Web SQL está completamente obsoleto

El navegador Google Chrome dejó de utilizar Web SQL en la versión 119 y eliminó el token de prueba de desuso en esta versión, por lo que ya no puede utilizar Web SQL.

DevTools eliminó la sección Web SQL del panel Application.

Web SQL es una API web que permite almacenar datos

Mejoras en el Panel de Coverage

Se agregaron 2 actualizaciones al panel Coverage:

La barra de estado ahora calcula correctamente las estadísticas de uso de las URL filtradas.

El Panel Layers Puede Quedar Obsoleto

Es posible que el panel Layers quede obsoleto pronto debido al bajo uso.

El panel ahora muestra un cartel de advertencia en la parte superior:

Es habitual que el equipo que da soporte a las DevTools cierre algunas herramientas que tengan poco uso

El equipo de Chrome DevTools, indica que puedes compartir tus pensamientos e inquietudes antes de que el equipo tome la decisión final de desaprobar el panel.

Desuso de JavaScript Profiler: Fase 4, Final

En Chrome DevTools, el panel JS Profiler ha quedado completamente obsoleto y ya no se puede volver a habilitar.

Para perfilar el rendimiento de la CPU, utiliza el panel Performance.

Este panel te permite encontrar cuellos de botella en el rendimiento de una web

Otros Cambios Destacados

A continuación, algunos cambios y correcciones notables de esta versió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