Novedades de Herramientas para desarrolladores (Chrome 114)

Compatibilidad con la depuración de WebAssembly

Las Herramientas para desarrolladores habilitan Configuración > Experimentos > Depuración de WebAssembly: Habilita la compatibilidad con DWARF de forma predeterminada. Para obtener más información, consulta Depura WebAssembly con herramientas modernas.

Este experimento te permite pausar la ejecución y depurar el 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 DWARF.
• Nombres de funciones comprensibles en la pila de llamadas
• Asistencia para puntos de interrupción y mucho más

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

Problema de Chromium: 1414289.

Mejora del comportamiento de pasos en las apps de Wasm

Step over en tu código original ahora evita pausar el desensamblado (archivo .wasm). Antes, se detenía allí.

Sin embargo, el paso termina cuando termina 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 > Preferencias > Fuentes.

Problema de Chromium: 1418938.

Depura la función Autocompletar con el panel de 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 problemas relacionados con Autocompletar, el panel Elements ahora puede destacarlos con subrayados rojos y ondulados.

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

Coloca el cursor sobre un problema destacado en el árbol del DOM y haz clic en Ver problema para abrir la pestaña Problemas, en la que se enumeran todos los problemas detectados y se proporcionan pistas sobre los errores.

Problema de Chromium: 1399414.

Aserciones en la grabadora

En el panel Recorder, ahora puedes 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 Add assertion. La Grabadora 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 confirmar lo siguiente:

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

También puedes configurar los 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 los 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 cuando se hace clic con el botón derecho.

Problema de Chromium: 1423624.

Lighthouse 10.1.1

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

Para aprender los conceptos básicos del uso del panel de Lighthouse en Herramientas para desarrolladores, consulta Lighthouse: Cómo optimizar la velocidad del sitio web.

Problema de Chromium: 772558.

Mejoras en el rendimiento

performance.mark() muestra el tiempo cuando se coloca el cursor sobre un elemento en Rendimiento > Plazos

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

Problema de Chromium: 1426762.

El comando profile() propaga Rendimiento > Principales

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

Problema de Chromium: 1429191.

Advertencia sobre interacciones lentas de los usuarios

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

Además, el ID de la interacción se movió del cuadro de información a Resumen.

Problemas de Chromium: 1432512, 1432509.

Se trasladó el segmento de Métricas web

El panel Rendimiento quitó los siguientes segmentos:

• El segmento de Métricas web En su lugar, consulta los tiempos correspondientes en el segmento Tiempos cuando colocas el cursor sobre ellos.
• El subsegmento Long Tasks Ya puedes encontrar esas tareas en el segmento Principal sombreado en rojo y con un triángulo rojo.

Tanto las Métricas web como las Tareas largas registran información duplicada en otro lugar. Además, no eran interactivos en comparación con sus alternativas con mejores funciones, que proporcionan información más detallada cuando se hace clic en ellas.

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

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

Baja del generador de perfiles de JavaScript: fase tres

A partir de Chrome 58, el equipo de Herramientas para desarrolladores planificó dar de baja el Generador de perfiles de JavaScript y que los desarrolladores de Node.js y Deno usaran el panel Performance para perfilar el rendimiento de la CPU en JavaScript.

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

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

Problema de Chromium: 1428026.

Otros aspectos destacados

Estas son algunas correcciones notables en esta versión:

• El selector de color ahora detecta los valores HWB que están fuera de la gama cuando se recortan (1429271).
• El panel Fuentes:
  • Se habilitó la sintaxis JSON destacada para los mapas de origen (1385374).
  • Se dejó de mostrar el mensaje "Se detectó un mapa de origen" mensajes cuando inhabilitas manualmente los mapas de fuentes (1423718).
• La consola ahora permite evaluar expresiones incompletas de JavaScript con Ctrl + Ctrl y genera errores de sintaxis (1314700).
• El diálogo de edición de puntos de interrupción ahora tiene un botón para cerrar. Anteriormente, tenías que presionar Intro o dejar de enfocar el diálogo (1412980).

Descarga los canales de vista previa

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

Comunicarse con el equipo de Herramientas para desarrolladores de Chrome

Usa las siguientes opciones para hablar sobre las nuevas funciones y los cambios en la publicación, o cualquier otra cosa relacionada con Herramientas para desarrolladores.

• Para enviarnos sugerencias o comentarios, accede a crbug.com.
• Informa un problema en Herramientas para desarrolladores con Más opciones   > Ayuda > Informa problemas de Herramientas para desarrolladores en Herramientas para desarrolladores.
• Twittea a @ChromeDevTools.
• Deja comentarios en nuestros videos de YouTube de Herramientas para desarrolladores o en videos de YouTube de las Sugerencias de las Herramientas para desarrolladores.

Novedades de Herramientas para desarrolladores

Una lista de todo lo que se ha abordado en la serie Novedades de Herramientas para desarrolladores.