Novedades de Herramientas para desarrolladores: Chrome 129

Sofia Emelianova
Sofia Emelianova

El grabador admite la exportación a Puppeteer para Firefox.

Como parte de la compatibilidad con WebDriver BiDi, el panel Grabadora ahora puede exportar grabaciones a Puppeteer para Firefox. Con la compatibilidad de Puppeteer con Firefox, ahora puedes grabar flujos de usuarios con el panel Grabadora de las Herramientas para desarrolladores de Chrome, exportarlos y ejecutarlos en Firefox y Chrome.

Antes y después de agregar la opción "Puppeteer para Firefox" al menú de exportación de la grabadora.

Para obtener más información, consulta WebDriver BiDi: El futuro de la automatización entre navegadores.

Mejoras en el panel de rendimiento

Esta versión incluye una serie de mejoras en el panel Rendimiento.

Observaciones de las métricas en vivo

El panel Rendimiento ahora muestra observaciones en vivo sobre las Métricas web esenciales, tanto en tu máquina local como en función de los datos de campo del Informe de UX de Chrome. Esto te permite detectar problemas de rendimiento sin tener que realizar registros de rendimiento y comprender qué tan representativa es tu experiencia en comparación con las de tus usuarios.

Para ver las observaciones en vivo sobre LCP y CLS, abre el panel Rendimiento. Para ver INP, realiza una interacción en una página. Para comparar tus métricas locales con la experiencia del usuario agregada en el Informe de UX de Chrome, agrega datos de campo. Para ello, en la sección Datos de campo, ubicada a la derecha, haz clic en Configurar y, en la ventana de diálogo, haz clic en Aceptar. Coloca el cursor sobre un valor de métrica para ver un cuadro de información con más detalles.

Observaciones en vivo sobre las métricas en el panel Rendimiento

El panel Rendimiento destaca las métricas que se pueden mejorar y proporciona estadísticas y sugerencias sobre cómo hacer coincidir tu experiencia local con la de tus usuarios. Por ejemplo, puedes reducir la CPU o la red, lo que puedes hacer en la misma pantalla, en la sección Configuración de grabación a la derecha.

El cuadro Buscar del panel Rendimiento ahora también funciona en la pista Red, por lo que puedes encontrar solicitudes con la combinación de teclas Ctrl/Cmd + F.

Se encontró una solicitud de red con la búsqueda.

Consulta los seguimientos de pila de las llamadas a performance.mark y performance.measure

En la pestaña Summary, el panel Performance ahora muestra los seguimientos de pila de las llamadas performance.mark y performance.measure. Puedes usar estas llamadas para extender el seguimiento de rendimiento con tus datos personalizados.

El antes y el después de mostrar las trazas de pila para las llamadas de performance.mark y performance.measure.

Para obtener más información, consulta Cómo personalizar tus datos de rendimiento con la API de extensibilidad.

Usa datos de direcciones de prueba en el panel Autocompletar

El panel Autocompletar ahora proporciona datos de prueba para los formularios de dirección. De esta forma, es más fácil probar los formularios de dirección de tu sitio web cuando no tienes ninguna dirección guardada en Chrome o usas un perfil de invitado.

Para autocompletar formularios de direcciones con datos de prueba, abre el panel Autocompletar, activa la Mostrar direcciones de prueba en el menú de Autocompletar, haz clic con el botón derecho en un formulario de dirección archivado en tu página y selecciona una de las opciones del menú Herramientas para desarrolladores.

Las opciones de datos de prueba de Autocompletar para antes y después de agregarse a un menú desplegable con un campo de formulario de dirección.

Mejoras en el panel de elementos

Esta versión incluye algunas mejoras en el panel Elements.

Cómo forzar más estados para elementos específicos

La sección :hov en Elementos > Diseños ahora te proporciona más pseudoclases que puedes habilitar de forma forzosa. El nuevo conjunto de opciones se encuentra en el menú desplegable de estado Forzar elemento específico y es específico para ciertos elementos que selecciones. Por ejemplo, <label> y <input> tienen diferentes conjuntos de opciones.

El antes y el después que agregan la capacidad de forzar estados de elementos específicos.

Problema de Chromium: 40280012.

En Elementos > Estilos, ahora se completan automáticamente más propiedades de la cuadrícula.

La pestaña Elementos > Estilos ahora proporciona opciones de autocompletado cuando editas el área de la cuadrícula y los nombres de las líneas.

El antes y el después de agregar opciones de autocompletar cuando editas los nombres de las líneas de la cuadrícula.

Para obtener más información, consulta Cómo inspeccionar diseños de cuadrícula de CSS y, en particular, la sección Mostrar nombres de línea.

Lighthouse 12.2.0

El panel de Lighthouse ahora ejecuta Lighthouse 12.2.0.

Esta actualización incluye varias correcciones de errores. Consulta la lista completa de cambios.

Para conocer los aspectos básicos del uso del panel Lighthouse en DevTools, consulta Lighthouse: Optimiza la velocidad del sitio web.

Error de Chromium: 772558.

Otros aspectos destacados

Estas son algunas correcciones y mejoras notables en esta versión:

  • Elementos:
    • Se corrigió un error con la renderización incorrecta de propiedades de longitud sobrecargadas 357020613.
    • Se cambió el nombre de position-try-options por position-try-fallbacks según la especificación.
    • Una actualización de página ahora restablece el nodo seleccionado incluso dentro de un iframe 40719145.
    • Accesibilidad: Los lectores de pantalla ahora anunciarán el botón Mostrar elemento 357382536.
  • Rendimiento > Red: La opción del menú Reveal in Network ahora abre la pestaña Encabezados de la solicitud de red relevante.
  • Consola:
    • Los errores de la extensión C/C++ ahora no abren la consola 356320158 de manera forzosa.
    • Se corrigió un error con import.meta en un módulo JS que se producía cuando se pausaba 40743793.
  • Memoria: Se corrigió un error por el que la función Restablecer los retenedores ignorados no se mostraba después de ignorar un retenedor 327337527.

Descarga los canales de vista previa

Considera usar Chrome Canary, Dev o Beta como tu navegador de desarrollo predeterminado. Estos canales de vista previa te brindan acceso a las funciones más recientes de Herramientas para desarrolladores, te permiten probar API de plataformas web de vanguardia y te ayudan a encontrar problemas en tu sitio antes que los usuarios.

Comunícate con el equipo de Chrome DevTools

Usa las siguientes opciones para hablar sobre las funciones nuevas, las actualizaciones o cualquier otro tema relacionado con DevTools.

Novedades de DevTools

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