Novedades en las Dev Tools 126 de Google Chrome
![Tiempo de lectura](https://nubecolectiva.com/img/clock.png)
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.
![Para los usuarios nuevos puede ser complicado entender la información del panel Performance Modificando una web usando las Chrome DevTools](https://blog.nubecolectiva.com/wp-content/uploads/2024/06/modificando-una-web-usando-las-chrome-devtools.png)
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:
![Esta sección debería ser más usada por los desarrolladores, hay información valiosa para tomar en cuenta Opción Configurar pistas en el panel Performance](https://blog.nubecolectiva.com/wp-content/uploads/2024/06/opcion-configurar-pistas.png)
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:
![El icono de lápiz de permite editar una secuencia de comandos ignorada Sección Lista de ignorados en Chrome DevTools](https://blog.nubecolectiva.com/wp-content/uploads/2024/06/seccion-lista-de-ignorados-en-chrome-dev-tools.png)
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:
![Por defecto esta habilitada la opción Sin limitaciones Ralentización de la CPU a 20x](https://blog.nubecolectiva.com/wp-content/uploads/2024/06/ralentizacion-del-cpu-20x.png)
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:
![Según el equipo de Chrome DevTools, el panel Lighthouse brinda mejores datos que este panel Panel Estadísticas de rendimiento](https://blog.nubecolectiva.com/wp-content/uploads/2024/06/panel-estadisiticas-de-rendimiento.png)
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:
![En este ejemplo se consumió 10.5 MB de memoria RAM del servidor Nuevos filtros en instantáneas en el panel Memoria](https://blog.nubecolectiva.com/wp-content/uploads/2024/06/nuevos-filtros-en-instantaneas-en-el-panel-memoria.png)
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:
![Al lado derecho puedes encontrar información sobre el segmento y un botón para eliminarlo Inspeccionar segmentos de almacenamiento](https://blog.nubecolectiva.com/wp-content/uploads/2024/06/inspeccionar-segmentos-de-almacenamiento.png)
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:
![Para el usuario común (no desarrollador) debe estar habilitada esta advertencia Desactivar advertencias XSS en la Consola](https://blog.nubecolectiva.com/wp-content/uploads/2024/06/desactivar-advertencias-xss-en-la-consola.png)
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:
![Te recomendamos usar Lighthouse para que optimices tu proyecto web Lighthouse 12 en Chrome DevTools 126](https://blog.nubecolectiva.com/wp-content/uploads/2024/06/lighthouse-12-en-chrome-devtools-126.png)
Otros Cambios Destacados
A continuación, algunos cambios y correcciones notables de esta versión:
- Rendimiento:
- Se eliminarán las opciones de captura lenta Habilitar instrumentación de pintura avanzada y Habilitar estadísticas del selector CSS, en las próximas versiones de Chrome DevTools.
- La pestaña Estadísticas del selector, ahora no permite desplazar automáticamente hacia abajo a medida que se amplía el gráfico de llamas y los datos cambian (337999939).
- Consola: Las combinaciones de tecla CTRL + ` ahora cierran la consola en la caja solo está en foco (40875466, 328210785).
- Autocompletar: Se ha corregido el análisis de direcciones (335409093, 335409707).
- Accesibilidad: Se han corregido los avisos del lector de pantalla para cadenas localizadas (324930007).
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)
- Algunos de los pasos mencionados pueden variar en futuras versiones de Chrome Dev Tools, esto no depende de nosotros sino de los desarrolladores que dan soporte a las Dev Tools y cambian el orden de las opciones mencionadas.
- Algunos de los enlaces compartidos en este post pueden dejar de existir, esto no depende de nosotros, sino de los servicios que los almacenan.
- Si aún no tienes actualizado tus 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.
Síguenos en nuestras redes sociales para que no te pierdas nuestros próximos contenidos.
- Chrome Dev Tools
- 09-06-2024
- 19-08-2024
- Crear un Post - Eventos Devs - Foro
Social
Redes Sociales (Developers)
Redes Sociales (Digital)