Novedades de Herramientas para desarrolladores (Chrome 114)

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

Compatibilidad con la depuración de WebAssembly

De forma predeterminada, las Herramientas para desarrolladores habilitan Configuración. Configuración > Experimentos > Casilla de verificación. Depuración de WebAssembly: Habilitar la compatibilidad con DWARF. Para obtener más información, consulta Cómo depurar WebAssembly con herramientas modernas.

Este experimento te permite pausar la ejecución y depurar código C y C++ en apps de Wasm, con toda la información de depuración disponible:

  • Tu código fuente original, asignado con la información de depuración de DWARF
  • Nombres de funciones comprensibles en la pila de llamadas
  • Compatibilidad con puntos de interrupción y mucho más

Una aplicación de Wasm pausada en el depurador.

Para probar la depuración de Wasm, instala la extensión C/C++ DevTools Support (DWARF) y ejecuta el código paso a paso en la demostración de Mandelbrot.

Error de Chromium: 1414289.

Se mejoró el comportamiento de los pasos en las apps de Wasm

Pasa por encima. Paso a paso en tu código original ahora evita la pausa en el desensamblado (archivo .wasm). Anteriormente, se detenía allí.

Sin embargo, la ejecución paso a paso finaliza cuando se sale de la función en la que se inició, por ejemplo, después de volver de la función.

Este comportamiento está habilitado de forma predeterminada en Configuración. Configuración > Preferencias > Fuentes.

El nuevo parámetro de configuración se encuentra en Preferencias y, luego, en Fuentes.

Error de Chromium: 1418938.

Cómo depurar Autocompletar con el panel Elementos y la pestaña Problemas

Autocompletar de Chrome completa formularios automáticamente con la información guardada, como tus direcciones o información de pago. Para que puedas depurar fácilmente los problemas relacionados con la función de autocompletar, el panel Elements ahora puede destacarlos con subrayados ondulados rojos.

Para probar esta función, habilita Configuración. Configuración > Experimentos > Casilla de verificación. Destaca un nodo o atributo infractor en el árbol DOM del panel Elementos y, luego, inspecciona esta página de demostración.

Problemas de Autocompletar destacados en el panel Elementos y registrados en el panel Problemas.

Coloca el cursor sobre un problema destacado en el árbol del DOM y haz clic en Ver problema para abrir la pestaña Problemas, que enumera todos los problemas detectados y proporciona pistas sobre lo que salió mal.

Error de Chromium: 1399414.

Aserciones en la Grabadora

El panel Recorder ahora te permite agregar aserciones directamente durante la grabación, con todos los datos de tiempo de ejecución disponibles.

Para agregar una aserción, inicia una nueva grabación, interactúa con tu página y haz clic en Agregar aserción. El Grabador inserta un paso con el tipo waitForElement que puedes personalizar sobre la marcha. Mira el video para ver las aserciones en acción en la demostración del carrito de café.

En este video, se muestra cómo realizar las siguientes aserciones:

  • Atributos HTML, por ejemplo, el class de un elemento
  • Propiedades de JavaScript en JSON, por ejemplo, .innerText.

También puedes configurar pasos para confirmar, por ejemplo, instrucciones condicionales en JavaScript, la cantidad de elementos secundarios del nodo (count), la visibilidad del elemento y mucho más. Para obtener más información, consulta Cómo configurar pasos.

Además, el Grabador ahora recuerda tu formato de secuencia de comandos preferido en la vista de código lado a lado y en el menú de pasos que aparece cuando haces clic con el botón derecho.

Error de Chromium: 1423624.

Lighthouse 10.1.1

El panel Lighthouse ahora ejecuta Lighthouse 10.1.1, con un cambio notable introducido en 10.1.0. Todas las auditorías que se relacionan con URLs ahora se agrupan por entidad y agregan estadísticas numéricas, como el tamaño o la duración. Los terceros populares también se etiquetan con su categoría para que sea más fácil identificar su propósito en la página.

Auditorías agrupadas por entidad

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

Problema de Chromium: 772558.

Mejoras en el rendimiento

performance.mark() muestra la sincronización cuando se coloca el cursor sobre el elemento en Rendimiento > Tiempos

El método performance.mark() ahora muestra su tiempo cuando colocas el cursor sobre la marca correspondiente en Rendimiento > Tiempos. La sincronización aquí es una marca de tiempo relativa al evento de navegación anterior.

La ventana emergente con la sincronización al colocar el cursor sobre el elemento en la sección Timings

Problema de Chromium: 1426762.

El comando profile() completa la sección Rendimiento > Principal

Los comandos profile() y profileEnd() de la consola ahora inician y detienen la generación de perfiles de CPU en el subproceso principal del panel Rendimiento.

El comando console() crea un perfil en el panel Rendimiento.

Problema de Chromium: 1429191.

Advertencia por interacciones lentas del usuario

Las interacciones del usuario que duran más de 200 milisegundos reciben una advertencia de Interaction to Next Paint (INP) en la pestaña Rendimiento > Resumen.

La advertencia sobre el INP

Además, el ID de la interacción se trasladó de la sugerencia a Resumen.

Problemas de Chromium: 1432512, 1432509.

Se movió el segmento de Métricas web

En el panel Rendimiento, se quitaron los siguientes segmentos:

  • La pista de Métricas web En cambio, consulta los tiempos relevantes en el segmento Tiempos cuando coloques el cursor sobre él.
  • Es el subpista Long Tasks. Ya puedes encontrar esas tareas en el pista principal sombreada en rojo y con un triángulo rojo.

Los seguimientos de Métricas web y Tareas largas contenían información duplicada en otros lugares. Además, no eran interactivas en comparación con sus alternativas más completas, que proporcionan información más detallada cuando se hace clic en ellas.

Antes y después de mover las Métricas web a la pista de tiempos.

Además, el segmento Experiencias cambió su nombre a Cambios de diseño para reflejar con mayor precisión su uso.

Obtén más información sobre las Métricas web.

Baja del generador de perfiles de JavaScript: Fase tres

Desde Chrome 58, el equipo de Herramientas para desarrolladores planeó, con el tiempo, desaprobar el Perfilador de JavaScript y hacer que los desarrolladores de Node.js y Deno usen el panel Rendimiento para generar perfiles del rendimiento de la CPU de JavaScript.

La versión 114 de Herramientas para desarrolladores inicia la tercera fase de la baja del Generador de perfiles de JavaScript de cuatro fases. Durante esta fase, se quita el panel JavaScript Profiler de Herramientas para desarrolladores, pero puedes habilitarlo temporalmente a través de Configuración. Configuración > Experimentos y abrirlo desde el menú de tres puntos Menú de tres puntos..

Casilla de verificación del generador de perfiles de JavaScript en Configuración y, luego, en Experimentos

Para generar un perfil del rendimiento de la CPU, usa el panel Rendimiento.

Error de Chromium: 1428026.

Otros aspectos destacados

Estas son algunas correcciones destacadas en esta versión:

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