Novedades de DevTools en Chrome 133

Historial de chat persistente con IA

El panel de asistencia de IA ahora conserva tu historial de chat de forma local en todas las sesiones, por lo que puedes ver tus conversaciones anteriores con Gemini incluso después de volver a cargar DevTools o Chrome.

Mejoras en el panel de rendimiento

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

Estadística de entrega de imágenes

En la pestaña Rendimiento > Estadísticas, ahora se pueden destacar las imágenes cuyo tamaño de archivo puedes optimizar. Haz clic en una imagen de la estadística para verla destacada en el segmento Red.

Para obtener más información sobre cómo optimizar la entrega de imágenes, consulta Cómo codificar imágenes de manera eficiente.

Navegación con el teclado clásica y moderna

El panel Rendimiento ahora te permite elegir tu estilo preferido de navegación con el teclado, con las siguientes diferencias principales:

• Clásico: Acercar con la rueda del mouse (panel táctil hacia arriba o hacia abajo) y desplazamiento vertical con Mayúsculas + rueda del mouse
• Moderno: Desplazamiento vertical con la rueda del mouse, desplazamiento horizontal con Mayúsculas + rueda del mouse y zoom con Comando/Control + rueda del mouse

Para elegir tu estilo preferido, en la esquina superior derecha del panel, haz clic en Ayuda Mostrar atajos y selecciona Clásico o Moderno. El diálogo de combinaciones también te proporciona una hoja de referencia de las combinaciones disponibles.

Ignora las secuencias de comandos irrelevantes en el gráfico de llamas

Para enfocarte mejor en tu código, ahora puedes agregar secuencias de comandos irrelevantes a la lista de ignorados directamente en el panel Rendimiento. El panel contraerá automáticamente el anidamiento excesivo.

Para agregar secuencias de comandos a la lista de elementos ignorados, haz clic en compress Mostrar diálogo de configuración de la lista de elementos ignorados en la barra de acciones superior y escribe una expresión regular en el campo de entrada. El gráfico de llamas aplicará la nueva regla a medida que escribas.

DevTools guarda las reglas de la lista de ignorados que agregas en Configuración Configuración > Lista de ignorados, y puedes activarlas y desactivarlas en el diálogo cuando quieras.

Marcador de línea de tiempo y resaltado de rango al colocar el cursor sobre él

Para ayudarte a comprender mejor el registro de rendimiento, el panel Rendimiento ahora hace lo siguiente:

• Cuando colocas el cursor sobre la línea de tiempo, se muestra un marcador vertical que abarca todo el registro de rendimiento.
• Destaca un rango en la línea de tiempo cuando colocas el cursor sobre los elementos de la pista Principal.

Configuración de limitación recomendada

El panel Rendimiento ahora recomienda parámetros de configuración de limitación tanto en las métricas en tiempo real como en los menús desplegables Configuración Configuración de captura pertinentes.

La reducción de CPU recomendada es (por ahora) la 4x slowdown más utilizada, y la recomendación de red se basa en los datos del Informe de UX de Chrome, si está activado en las métricas en tiempo real.

Además, el panel Rendimiento ahora te recuerda la configuración de limitación que usaste junto a cada registro en el menú desplegable Sesiones recientes de la barra de acciones.

Marcadores de tiempo en una superposición

Los marcadores de tiempo se movieron del segmento Timings a la parte inferior del registro y ahora se superponen sobre todos los segmentos, y son visibles incluso si el segmento Timings está oculto.

La pista Tiempos conserva tus llamadas personalizadas de mark() y measure().

Seguimientos de pila de llamadas de JavaScript en el Resumen

En la pestaña Rendimiento > Resumen, ahora se muestran los seguimientos de pila de las llamadas de JavaScript, incluidas las asíncronas.

Se movió la configuración de insignias al menú de Elements

La configuración de insignias en el panel Elements se trasladó de una barra de acciones oculta de forma predeterminada al menú contextual correspondiente.

Nuevo panel "Novedades"

El panel Novedades tiene un nuevo aspecto que se asemeja más al diseño de Chrome.

Problema de Chromium: 325441858.

Lighthouse 12.3.0

El panel Lighthouse ahora ejecuta Lighthouse 12.3.0.

Entre otras cosas, esta actualización agrega nuevas auditorías que verifican el aislamiento de origen adecuado con COOP y una política de HSTS sólida. Consulta la lista completa de cambios.

Para conocer los conceptos básicos del uso del panel Lighthouse en las Herramientas para desarrolladores, consulta Lighthouse: Optimiza la velocidad del sitio web.

Error de Chromium: 40543651.

Otros aspectos destacados

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

• Fuentes: Cuando se pausa, el Depurador ya no cambia inesperadamente al contexto del service worker si se crea después de la pausa (373893057).
• Rendimiento:
  • Cuando se coloca el cursor sobre las secuencias de comandos, las sugerencias del gráfico de llamas ahora muestran URLs, si hay alguna (368541957).
  • Resumen: El gráfico circular se reemplaza por una representación de barras.
  • Se cambió el nombre de la casilla de verificación Datos de extensión en Configuración de captura a Mostrar pistas personalizadas.
  • La pestaña Estadísticas ahora tiene una sección Estadísticas aprobadas (N), que se contrae de forma predeterminada.
• Application > Storage: Puedes crear entradas de almacenamiento con claves vacías porque son técnicamente válidas (373703285).
• Ahora, el modo de dispositivo está inhabilitado para las páginas chrome:// (40186276).
• Red:
  • Con el parámetro de configuración correspondiente activado, hacer clic en Exportar HAR una vez ahora abre un menú con dos opciones (limpio y con datos sensibles). Anteriormente, el menú se abría con un clic largo (378076279).
  • La opción Copiar como cURL ahora usa el atributo -b para omitir las cookies y ser más legible, en lugar de -H 'cookie:...' (40791742).
• Accesibilidad: Ahora puedes mover pestañas dentro de los paneles hacia la izquierda o la derecha con un menú contextual (383164782).
• Bloqueo de la solicitud de red: Este parámetro de configuración del menú de comandos ahora está sincronizado con la casilla de verificación correspondiente (378058733).

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 hablar sobre las funciones nuevas, las actualizaciones o cualquier otro tema relacionado con Herramientas para desarrolladores.

• Envíanos tus comentarios y solicitudes de funciones a crbug.com.
• Informa un problema de Herramientas para desarrolladores con more_vert Más opciones > Ayuda > Informar un problema de Herramientas para desarrolladores en Herramientas para desarrolladores.
• Envía un tuit a @ChromeDevTools.
• Deja comentarios en los videos de Novedades de las Herramientas para desarrolladores de YouTube o en los videos de Sugerencias sobre las Herramientas para desarrolladores de YouTube.

Novedades de Herramientas para desarrolladores

Una lista de todo lo que se abordó en la serie Novedades de DevTools