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

Novedades en las Dev Tools 126 de Google Chrome

Novedades en las Dev Tools 126 de Google Chrome

Novedades en las Dev Tools 126 de Google Chrome

Las cosas parecen ponerse cada vez mejor en cuanto a la IA en las Chrome DevTools.

No existe la herramienta perfecta, pero personalmente me encanta que haya IA en una de mis herramientas de desarrollo favoritas.

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

Hay funciones en las Chrome DevTools que aún no han sido descubiertas por los desarrolladores

Como 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.

Actualizaciones en el Panel Performance

Se añadieron estas 3 características:

Nuevo botón para configurar pistas

Cuando hagas clic con el botón derecho sobre una pista, te aparecerá la opción Configurar pistas…

Esta opción te permitirá mover y ocultar las pistas.

Fue removido el botón de edición (lápiz), ya que usaba espacio adicional:

Te servirá para organizar la información de rendimiento de un sitio web

Para salir de la configuración de pistas, presiona el botón Terminar de configurar pistas como se muestra en el siguiente video:

Pasemos a la siguiente característica.

Añadir/Quitar secuencia de comandos a lista de ignorados

Si presionas, por ejemplo, con el botón derecho sobre una secuencia de color celeste (anónimo).

Te aparecerá una opción llamada Añadir secuencia de comandos a lista de ignorados para ignorar esa secuencia.

Si deseas revertir la acción, presiona nuevamente el botón derecho sobre la secuencia ignorada y elige Quitar secuencia de comandos de la lista de ignorados, como se explica en el siguiente video:

También puedes encontrar las secuencias de comandos ignoradas en Configuración > Lista de ignorados:

Aquí también puedes restablecer una secuencia de comandos ignorada presionando el icono de tacho de basura

Ralentizar la CPU 20 Veces

No quiere decir que va a poner lenta tu CPU, sino más bien el análisis de la herramienta Performance.

Esto permite que el panel Performance realice un análisis más preciso y detallado de los problemas en el sitio web.

Para activar la opción Ralentización x20, presiona la tuerca de Configuración de captura que se encuentra al lado derecho y luego ve a la sección CPU y eligen la opción Ralentización x20:

En versiones anteriores ya existían las opciones de ralentización a x4 y x6

Panel Estadísticas de Rendimiento Obsoleto

Este panel será quitado de Chrome DevTools en las próximas versiones.

Actualmente, aparece un letrero amarillo informando a los usuarios.

Este panel es redundante, ya que el panel Performance y otros más brindan la información que este panel mostraba:

Varios usuarios de la comunidad no están de acuerdo con la eliminación de este panel

Pegar Cadenas de Encabezados Para Anularlas

Ahora podrás anular los Headers o encabezados no deseados en el panel Red.

Solo copia y pega el encabezado que deseas anular con su valor en la sección Encabezados de respuesta.

Puedes ver cómo funciona esta característica en el siguiente video:

Nuevos Filtros Para Detectar el Uso Excesivo de Memoria

Estos nuevos filtros en el panel Memoria te ayudan a encontrar mejor las inoperancias en el uso de la memoria de tu servidor.

Ciertos procesos pueden llegar a consumir la memoria en exceso en un servidor web.

Por ejemplo, las strings o cadenas duplicadas, o los objetos retenidos por nodos de DOM separados:

Muchos desarrolladores se enfocan en optimizar el proceso de su aplicación, pero descuidan el uso óptimo de los recursos de sus servidores

Inspeccionar Segmentos de Almacenamiento

Hay aplicaciones que almacenan contenido en segmentos como esta página: https://jsfiddle.net/5tmpfuzv

Ahora DevTools permite inspeccionar los Segmentos de almacenamiento.

Esta sección antes estaba como experimental, ahora pasó a ser estable:

Para ver esta información ve a Aplicación > Segmentos de almacenamiento y selecciona la url de la página web

Desactivar Advertencias XSS Automáticas

Las advertencias XSS (Cross-Site Scripting) alertan a los usuarios que copiar y pegar un código en la Consola puede ser perjudicial para el usuario.

En DevTools 126 se agregó una opción para deshabilitar esta advertencia que aparecía en la Consola.

Abre la Consola y pega esta opción: –unsafely-disable-devtools-self-xss-warnings y presiona ENTER.

Al intentar pegar te aparecerá la advertencia XSS en amarillo diciéndote que no se puede pegar código, escribe Permitir pegar en la consola y presiona ENTER.

Ahora puedes copiar y pegar código en la Consola sin problemas:

En este ejemplo pegamos el código console.log(new Date) en la Consola de DevTools

Lighthouse 12

Se agregó una nueva versión de Lighthouse en el panel Lighthouse de Chrome DevTools.

Los cambios más destacados de esta versión es la eliminación de la sección PWA (Progressive Web Apps).

Se reorganizó los datos de la sección SEO y otras novedades, las cuales puedes encontrar en este enlace:

La sección PWA ha sido retirada, tendremos novedades de las PWA por parte de Google en los próximos meses

Otros Cambios Destacados

A continuación, algunos cambios y correcciones notables de esta versión:

Hasta aquí llegamos con las Novedades en las Dev Tools 126 de Google Chrome, nos vemos en la siguiente actualización con más novedades.

Nota(s)

Síguenos en nuestras redes sociales para que no te pierdas nuestros próximos contenidos.

Salir de la versión móvil