Novedades de Herramientas para desarrolladores (Chrome 114)

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

Compatibilidad con la depuración de WebAssembly

Las Herramientas para desarrolladores habilitan Configuración. Configuración > Experimentos > Casilla de verificación. Depuración de WebAssembly: Habilita la compatibilidad con DWARF de forma predeterminada. 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 información de depuración DWARF
  • Nombres de funciones comprensibles en la pila de llamadas.
  • Compatibilidad con puntos de interrupción y mucho más

Una aplicación Wasm se detuvo en el depurador.

Para probar la depuración de Wasm, instala la extensión de compatibilidad de DevTools para C/C++ (DWARF) y explora el código en la demostración de Mandelbrot.

Error de Chromium: 1414289.

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

Omitir. Omite en el código original ahora evita la pausa en el desmontaje (archivo .wasm). Anteriormente, se detenía allí.

Sin embargo, el paso finaliza cuando se encuentra fuera de la función en la que comenzó, por ejemplo, después de regresar 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 información guardada, como tus direcciones o información de pago. Para que puedas depurar fácilmente los problemas relacionados con la función Autocompletar, el panel Elementos 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 que incumple en el árbol DOM del panel de elementos y, luego, inspecciona esta página de demostración.

Problemas de autocompletado destacados en el panel Elementos y que informa 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 Grabadora ahora te permite agregar aserciones durante la grabación, con todos los datos del tiempo de ejecución disponibles.

Para agregar una aserción, inicia una grabación nueva, interactúa con tu página y haz clic en Agregar aserción. El Registrador 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 afirmar lo siguiente:

  • 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, sentencias condicionales en JavaScript, la cantidad de elementos secundarios del nodo (count), la visibilidad de los elementos y mucho más. Para obtener más información, consulta Configura pasos.

Además, la grabadora ahora recuerda el formato de secuencia de comandos que prefieras en la vista de código en paralelo y en el menú de pasos del clic derecho.

Error de Chromium: 1423624.

Lighthouse 10.1.1

El panel de Lighthouse ahora ejecuta Lighthouse 10.1.1, con un cambio notable que se introdujo en 10.1.0. Todas las auditorías que se relacionan con las 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ía agrupada por entidad

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.

Mejoras en el rendimiento

performance.mark() muestra los tiempos cuando se coloca el cursor sobre Rendimiento > Tiempos

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

La ventana emergente con el tiempo de carga cuando se coloca el cursor sobre la sección Tiempos

Error de Chromium: 1426762.

El comando profile() propaga Rendimiento > Principal.

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

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

Problema de Chromium: 1429191.

Advertencia de 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 de INP

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

Problemas de Chromium: 1432512, 1432509.

Se movió la pista de Métricas web

El panel Rendimiento quitó los siguientes segmentos:

  • El segmento Métricas web En su lugar, verás los tiempos relevantes en la pista Timings cuando coloques el cursor sobre ellos.
  • La subpista Tareas largas Ya puedes encontrar esas tareas en la ruta de acceso principal sombreada en rojo y con un triángulo rojo.

Las secciones Métricas web y Tareas largas contenían información duplicada en otro lugar. Además, no eran interactivos en comparación con sus alternativas con más funciones, que proporcionan información más detallada cuando se hace clic en ellas.

Antes y después de mover las métricas web al segmento de tiempos

Además, se cambió el nombre del segmento Experiencias 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 DevTools planeaba dar de baja el generador de perfiles de JavaScript y hacer que los desarrolladores de Node.js y Deno usaran el panel Rendimiento para generar perfiles del rendimiento de la CPU de JavaScript.

La versión 114 de DevTools inicia la fase tres de la baja en cuatro fases del generador de perfiles de JavaScript. Durante esta fase, se quita el panel JavaScript Profiler de DevTools, 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..

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

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

Error de Chromium: 1428026.

Otros aspectos destacados

Estas son algunas correcciones importantes de 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 plataformas web de vanguardia y te ayudan a encontrar problemas en tu sitio antes que tus 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.