Novedades de DevTools en Chrome 132

Sofia Emelianova
Sofia Emelianova

Depura solicitudes de red, archivos fuente y registros de rendimiento con Gemini

Además de los estilos CSS, ahora puedes chatear con Gemini sobre las solicitudes de red, los archivos fuente y los registros de rendimiento.

Al igual que con el menú contextual del panel Elements, para abrir el panel AI assistance y comenzar el chat con Gemini, haz clic con el botón derecho y selecciona Ask AI o haz clic en el botón Ask AI junto a lo siguiente:

  • Una solicitud de red en el panel Red
  • Un archivo en las pestañas Fuentes > Página
  • Es una actividad en el segmento Performance > Main.

Botones y opción de menú de Ask AI en Red, Fuentes y Rendimiento

Gemini tendrá en cuenta el contexto de la solicitud, el archivo o la actividad seleccionados.

El equipo de Herramientas para desarrolladores espera recibir tus comentarios en crbug.com/364805393.

Historial de chat con IA

Ahora puedes restablecer y ver chats anteriores con Gemini en el panel de asistencia de IA haciendo clic en el botón Chat nuevo en la esquina superior izquierda del panel o usando los botones y las opciones de menú de Preguntarle a la IA en el panel Red, la pestaña Fuentes > Página y el segmento Rendimiento > Principal.

Para ver uno de tus chats anteriores, selecciona la instrucción correspondiente en el menú desplegable que se encuentra debajo del botón Historial. El panel de asistencia de IA recordará tu historial de chat mientras Herramientas para desarrolladores esté abierto.

El historial de chat de IA en un menú desplegable debajo del botón "Historial".

Administra el almacenamiento de extensiones en Application > Storage

Al igual que con el almacenamiento local y de sesión, ahora puedes ver y cambiar las entradas de almacenamiento de extensiones en la sección Application > Storage.

Antes y después de agregar la sección "Almacenamiento de extensión" al panel Aplicación.

Problema de Chromium: crbug.com/40963428.

Mejoras en el rendimiento

Esta versión incluye varias mejoras en el panel Rendimiento.

Fases de interacción en las métricas en vivo

Ahora puedes expandir las interacciones en las métricas de rendimiento en vivo para ver un desglose de las fases y sus tiempos.

Antes y después de agregar un desglose de las fases y sus tiempos a las interacciones

Como se comunicó en La extensión de Web Vitals, ahora en Herramientas para desarrolladores, el lanzamiento de estas funciones marca el fin de la compatibilidad con la extensión de Web Vitals.

Problema de Chromium: crbug.com/369097528.

Información de bloqueo de la renderización en la pestaña Resumen

Cuando seleccionas una solicitud de red marcada con un triángulo rojo en el registro Rendimiento > Red, la pestaña Resumen, además de la información sobre herramientas (refactorizada), ahora también te indica que la solicitud bloquea la renderización.

Antes y después de agregar información que bloquea la renderización a la pestaña Resumen

Compatibilidad con los eventos de scheduler.postTask y sus flechas de inicio

El segmento Rendimiento > Principal ahora muestra eventos scheduler.postTask() y las siguientes flechas de iniciador entre ellos:

  • Schedule postTask -> Fire postTask
  • Schedule postTask -> Abort postTask

Antes y después de agregar compatibilidad con los eventos de scheduler.postTask y sus flechas de iniciador.

Error de Chromium: crbug.com/40775984.

Mejoras en el panel Animations y en la pestaña Elements > Styles

Esta versión incluye algunas mejoras en el panel Animations y en la pestaña Elements > Styles.

En la pestaña Elements > Styles, ahora se muestran los íconos Jump to Animations panel de animation junto al valor de las propiedades animation, por lo que puedes inspeccionar fácilmente las animaciones allí.

El antes y el después de agregar un vínculo desde la pestaña Styles al panel Animations.

Actualizaciones en tiempo real en la pestaña Computed

La pestaña Elements > Computed ahora actualiza los valores calculados en tiempo real cuando, por ejemplo, las animaciones los actualizan.

Emulación de la presión de procesamiento en Sensors

El panel Sensores ahora te permite emular la presión de la CPU Nominal, Fair, Serious y Critical.

La opción de emulación de presión de CPU antes y después de agregarla al panel de sensores.

Problema de Chromium: crbug.com/362277525.

Objetos JS con el mismo nombre agrupados por fuente en el panel Memoria

El panel Memoria ahora distingue entre los objetos JS con el mismo nombre que provienen de diferentes fuentes y los agrupa de manera correspondiente.

Los objetos JS de antes y después de la agrupación con el mismo nombre también por fuente.

Problema de Chromium: crbug.com/357902505.

Nueva apariencia de la configuración

Para alinear mejor el diseño de la interfaz de usuario, la configuración de Herramientas para desarrolladores ahora se parece más a la configuración de Chrome. En particular, las secciones ahora están separadas visualmente en "tarjetas".

Las secciones de antes y después se separan en "tarjetas".

El panel Estadísticas de rendimiento está obsoleto y se quitó de Herramientas para desarrolladores

Todas las funciones importantes y útiles del panel Estadísticas de rendimiento ahora se encuentran en el panel Rendimiento, específicamente en las métricas en vivo, la pestaña de la barra lateral Estadísticas y el registro de cambios de diseño. Por lo tanto, en esta versión, se declara obsoleto y se quita el panel Estadísticas de rendimiento de Herramientas para desarrolladores.

El equipo de Herramientas para desarrolladores agradece los comentarios que proporcionaste sobre la baja de este panel y la experiencia general de depuración del rendimiento. Como siempre, nos gusta conocer tu opinión y tus perspectivas. ¡Sigue así!

Otros aspectos destacados

Estas son algunas de las correcciones y mejoras más destacadas de esta versión:

  • Rendimiento:
    • Se quitó un límite innecesario de 3 caracteres para las búsquedas.
    • Se agregó el botón Inicio que te lleva de regreso a la pantalla de métricas en vivo.
    • Se corrigieron las combinaciones de teclas de zoom de seguimiento Mayúsculas + S/W que no funcionaban.
  • Elements > Styles:
    • Se agregó anchor-center al autocompletado 341991541.
    • Se corrigió un error por el que el editor de Flexbox no estaba disponible para valores de 2 palabras 341964645.
  • Red: Las fallas en la recuperación anticipada ahora son advertencias amarillas en lugar de errores rojos para indicar que la visualización del contenido no se ve afectada 372055494.

Descarga los canales de vista previa

Considera usar Chrome Canary, Dev o Beta como tu navegador de desarrollo predeterminado. Estos canales de versión preliminar te brindan acceso a las funciones más recientes de DevTools, te permiten probar las APIs de vanguardia de la plataforma web y te ayudan a encontrar problemas en tu sitio antes de que lo hagan tus usuarios.

Comunícate con el equipo de Herramientas para desarrolladores de Chrome

Usa las siguientes opciones para analizar las nuevas funciones, las actualizaciones o cualquier otro tema relacionado con las Herramientas para desarrolladores.

Novedades de Herramientas para desarrolladores

Una lista de todo lo que se abordó en la serie Novedades de las Herramientas para desarrolladores