Novedades de DevTools en Chrome 133

Sofia Emelianova
Sofia Emelianova

Historial de chat persistente de IA

El panel de asistencia de IA ahora conserva de forma local tu historial de chat 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ísticas 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.

El panel Rendimiento con la estadística sobre la publicación de imágenes destacada.

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

El diálogo de accesos directos con los accesos directos disponibles para el panel de Rendimiento.

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 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 > 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 desplazar el cursor

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 de captura de los pertinentes.

Antes y después de agregar recomendaciones de limitación a los menús de configuración.

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.

Antes y después de mover los marcadores a la parte inferior del registro.

El segmento 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.

Antes y después de agregar seguimientos de pila a la pestaña Resumen

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.

Antes y después de mover la configuración de insignias al menú

Nuevo panel "Novedades"

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

El aspecto antiguo y nuevo del panel "Novedades".

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 destacadas 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, la información sobre herramientas del gráfico de llamas ahora muestra las URLs, si las hay (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, si haces clic en Exportar HAR una vez, se abrirá 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 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