Novedades de Herramientas para desarrolladores (Chrome 105)

Jecelyn Yeen

Reproducción paso a paso en la Grabadora

Ahora puedes establecer un punto de interrupción y reproducir un flujo de usuarios paso a paso en el panel de Grabadora.

Para establecer un punto de interrupción, haz clic en el punto azul junto a un paso. Vuelve a reproducir tu flujo de usuarios. La reproducción se pausará antes de ejecutar el paso. Desde aquí, puedes continuar con la reproducción, ejecutar un paso o cancelar la reproducción.

Con esta función, puedes visualizar y depurar por completo tu flujo de usuarios con facilidad.

Consulta la referencia de las funciones de Grabadora para obtener más información.

Error de Chromium: 1257499

Se agregó compatibilidad con el evento de desplazamiento del mouse en el panel de Grabadora

La Grabadora ahora admite agregar manualmente un paso de desplazamiento del mouse (hover) en una grabación.

En esta demostración, se muestra un menú emergente cuando se coloca el cursor sobre un elemento. Intenta grabar un flujo de usuarios y haz clic en un elemento de menú.

Si vuelves a reproducir el flujo del usuario ahora, fallará porque el Grabador no captura los eventos de desplazamiento del mouse automáticamente durante la grabación. Para resolver este problema, agrega un paso de forma manual para colocar el cursor sobre el selector antes de hacer clic en el elemento del menú.

Error de Chromium: 1257499

Largest Contentful Paint (LCP) en el panel de estadísticas de rendimiento

El LCP es una métrica importante centrada en el usuario para medir la velocidad de carga percibida. Ahora puedes conocer las rutas críticas y las causas raíz de un Procesamiento de imagen con contenido más grande (LCP).

En un registro de rendimiento, haz clic en la insignia de LCP en la línea de tiempo. En el panel Detalles, puedes ver la puntuación del LCP, obtener información para corregir los recursos que ralentizan el LCP y ver la ruta crítica del recurso del LCP.

Consulta Performance Insights para obtener información sobre cómo obtener estadísticas prácticas y mejorar el rendimiento de tu sitio web con el panel.

Error de Chromium: 1326481

Identifica los destellos de texto (FOIT y FOUT) como posibles causas raíz de los cambios de diseño.

El panel Estadísticas de rendimiento ahora detecta el destello de texto invisible (FOIT) y el destello de texto sin diseño (FOUT) como posibles causas raíz de los cambios de diseño.

Para ver las posibles causas principales de un cambio de diseño, haz clic en una captura de pantalla en el segmento Cambios de diseño.

Consulta Cómo optimizar la carga y la renderización de WebFonts para conocer la técnica que permite evitar los cambios de diseño.

Problemas de Chromium: 1334628, 1328873

Controladores de protocolos en el panel Manifest

Ahora puedes usar las Herramientas para desarrolladores para probar el registro de controladores de protocolo de URL para las aplicaciones web progresivas (AWP).

El registro de controladores de protocolo de URL permite que las AWP instaladas controlen vínculos que usan un protocolo específico (p.ej., magnet, web+example) para brindar una experiencia más integrada.

Navega a la sección Protocol Handlers a través del panel Application > Manifest. Aquí puedes ver y probar todos los protocolos disponibles.

Por ejemplo, instala esta PWA de demostración. En la sección Protocol Handlers, escribe “americano” y haz clic en Test protocol para abrir la página de café en la PWA.

Problemas de Chromium: 1300613

Insignia de capa superior en el panel de elementos

Usa la insignia de capa superior para comprender el concepto de capa superior y visualizar cómo cambia el contenido de la capa superior.

El elemento <dialog> se volvió estable recientemente en todos los navegadores. Cuando abres un diálogo, se coloca en una capa superior. El contenido de nivel superior se renderiza sobre todo el resto del contenido.

En esta demostración, haz clic en Abrir diálogo.

Para ayudar a visualizar los elementos de la capa superior, DevTools agrega un contenedor de capa superior (#top-layer) al árbol del DOM. Se encuentra después de la etiqueta de cierre </html>.

Para saltar del elemento contenedor de la capa superior al elemento del árbol de la capa superior, haz clic en el botón revelar junto al elemento o su fondo en el contenedor de la capa superior.

Junto al elemento de árbol de la capa superior (por ejemplo, el elemento de diálogo), haz clic en la insignia top-layer para saltar al contenedor de la capa superior.

Problema de Chromium: 1313690

Cómo adjuntar información de depuración de Wasm en el tiempo de ejecución

Ahora puedes adjuntar información de depuración de DWARF para wasm durante el tiempo de ejecución. Anteriormente, el panel Fuentes solo admitía la vinculación de mapas de origen a archivos JavaScript y Wasm.

Abre un archivo .wasm en el panel Fuentes. Haz clic con el botón derecho en el editor y selecciona Add DWARF debugging info… para adjuntar información de depuración a pedido.

Problema de Chromium: 1341255

Admite la edición en vivo durante la depuración

Ahora puedes editar la función superior de la pila sin reiniciar el depurador.

En Chrome 104, DevTools vuelve a incluir la función restart frame. Sin embargo, no pudiste editar la función en la que te encuentras en pausa. Es común que los desarrolladores interrumpan una función y, luego, la editen mientras está en pausa.

Con esta actualización, el depurador reinicia automáticamente la función con las siguientes restricciones:

• Solo se puede editar la función superior mientras está en pausa
• No hay llamadas recursivas a la misma función más abajo en la pila.

Error de Chromium: 1334484

Cómo ver y editar @scope en las reglas del panel Styles

Ahora puedes ver y editar las @reglas de CSS @scope en el panel Estilos.

Las reglas @scope @ forman parte de la especificación de CSS Cascading and Inheritance Level 6. Estas reglas permiten a los desarrolladores definir el alcance de las reglas de estilo en CSS.

Abre esta página de demostración y, luego, inspecciona el hipervínculo dentro del elemento <div class=”dark-theme”>. En el panel Estilos, consulta las reglas @.@scope Haz clic en la declaración de la regla para editarla.

Problema de Chromium: 1337777

Mejoras en los mapas de origen

Estas son algunas correcciones en los mapas de origen para mejorar la experiencia general de depuración:

• Las Herramientas para desarrolladores ahora resuelven correctamente los identificadores de mapas de fuentes con signos de puntuación. Algunos minificadores modernos (por ejemplo, esbuild) producen mapas de origen que combinan identificadores con signos de puntuación posteriores (coma, paréntesis, punto y coma).
• Ahora, Herramientas para desarrolladores resuelve los nombres de los mapas de fuentes para los constructores con una llamada super.
• Se corrigió la indexación de URLs de mapas de origen para URLs canónicas duplicadas. Anteriormente, los puntos de interrupción no se activaban en algunos archivos debido a URLs canónicas duplicadas.

Error de Chromium: 1335338, 1333411

Otros aspectos destacados

Estas son algunas correcciones destacadas en esta versión:

• Quita correctamente un par clave-valor de almacenamiento local de la tabla en el panel Application > Local Storage cuando se borra. (1339280)
• Ahora, las vistas previas de color se muestran correctamente cuando se visualizan archivos CSS en el panel Fuentes. Anteriormente, sus posiciones estaban mal ubicadas. (1340062)
• Mostrar de forma coherente los elementos de cuadrícula y flex del CSS en el panel Diseño, así como mostrarlos como insignias en el panel Elementos Anteriormente, los elementos flexibles y de cuadrícula faltaban de forma aleatoria en ambos lugares. (1340441, 1273992)
• Hay un nuevo vínculo Creator Ad Script disponible para los marcos de anuncios si DevTools encontró la secuencia de comandos que provocó que el marco se etiquetara como anuncio. Puedes abrir un frame a través de Application > Frames. (1217041)

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.

• Envíanos tus comentarios y solicitudes de funciones a crbug.com.
• Informa un problema de Herramientas para desarrolladores con more_vert Más opciones > Ayuda > Informar un problema de Herramientas para desarrolladores en Herramientas para desarrolladores.
• Envía un tuit a @ChromeDevTools.
• Deja comentarios en los videos de Novedades de DevTools de YouTube o en los videos de Sugerencias de DevTools de YouTube.

Novedades de Herramientas para desarrolladores

Una lista de todo lo que se abordó en la serie Novedades de las Herramientas para desarrolladores