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 volver a reproducir un flujo de usuarios paso a paso en el panel 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 repetición, ejecutar un paso o cancelar la repetición.

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

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

Reproducción paso a paso en la grabadora

Problema de Chromium: 1257499

Admite el mouse sobre el evento en el panel de Grabadora

La Grabadora ahora permite agregar un paso del mouse sobre (desplazarse) de forma manual en una grabación.

Esta demostración muestra un menú emergente cuando el usuario coloca el cursor sobre un elemento. Intenta registrar un flujo de usuarios y haz clic en un elemento del menú.

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

Admite el mouse sobre el evento en la grabadora.

Problema de Chromium: 1257499

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

LCP es una métrica importante centrada en el usuario para medir la velocidad de carga percibida. Ahora puedes descubrir las rutas críticas y las causas raíz de un Largest Contentful Paint (LCP).

En una grabación de rendimiento, haz clic en la insignia de LCP en la sección Cronograma. En el panel Details, puedes ver la puntuación de LCP, aprender a corregir los recursos que ralentizan el LCP y ver la ruta crítica para el recurso LCP.

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

LCP en el panel Estadísticas de rendimiento

Problema de Chromium: 1326481

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

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

Para ver las posibles causas raíz 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 WebFont para conocer la técnica que permite evitar cambios de diseño.

FOUT en el panel Estadísticas de rendimiento

Problemas de Chromium: 1334628, 1328873

Controladores de protocolo en el panel del manifiesto

Ahora puedes usar las Herramientas para desarrolladores a fin de probar el registro de controladores del protocolo de URL para las apps 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 ofrecer una experiencia más integrada.

Navega a la sección Controladores de protocolo a través de Aplicación > Panel Manifest. Puedes ver y probar todos los protocolos disponibles aquí.

Por ejemplo, instala esta AWP 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 AWP.

Controladores de protocolo en el panel del manifiesto

Problemas de Chromium: 1300613

Insignia de la capa superior en el panel Elements

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

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

En esta demo, haz clic en Abrir diálogo.

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

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

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

Insignia de la capa superior en el panel Elements

Problema de Chromium: 1313690

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 Sources solo permitía adjuntar mapas de fuentes a archivos JavaScript y Wasm.

Abre un archivo de Wasm en el panel Sources. 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.

ALT_TEXT_HERE

Problema de Chromium: 1341255

Compatibilidad con 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, las Herramientas para desarrolladores recuperan la función de reinicio de marco. Sin embargo, no pudiste editar la función en la que estabas detenido. Es común que los desarrolladores interrumpan una función y, luego, la editen mientras están en pausa.

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

  • Mientras la campaña está pausada, solo se puede editar la función superior
  • No hay llamadas recursivas en la misma función más abajo en la pila.

edición en vivo durante la depuración

Problema de Chromium: 1334484

Visualiza y edita @scope en las reglas del panel Estilos

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

El valor de @scope en las reglas forma parte de la especificación de CSS de nivel 6 en cascada y herencia. 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 at-rules de @scope. Haz clic en la declaración de la regla para editarla.

@scope en las reglas del panel Estilos

Problema de Chromium: 1337777

Mejoras en el mapa de fuentes

A continuación, se incluyen algunas correcciones en los mapas de origen para mejorar la experiencia general de depuración:

  • Herramientas para desarrolladores ahora resuelve correctamente los identificadores del mapa de origen con puntuación. Algunos minificadores modernos (por ejemplo, esbuild) producen mapas de origen que combinan identificadores. con la puntuación subsiguiente (coma, paréntesis, punto y coma).
  • Herramientas para desarrolladores ahora resuelve los nombres de mapas de origen para constructores con una llamada a super. ALT_TEXT_HERE
  • 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.

Problema de Chromium: 1335338, 1333411

Otros aspectos destacados

Estas son algunas correcciones notables en esta versión:

  • Quita correctamente un par clave-valor de almacenamiento local de la tabla en Application > El panel Almacenamiento local cuando se borra. (1339280).
  • Las vistas previas de colores ahora se muestran correctamente cuando visualizas los archivos CSS en el panel Sources. Antes, sus posiciones estaban en el lugar incorrecto. (1340062).
  • Muestra de manera coherente los elementos flexibles y de cuadrícula de CSS en el panel Layout, y muéstralos como insignias en el panel Elements. Antes, los elementos de Flex y Cuadrícula faltaban de forma aleatoria en ambos lugares. (1340441, 1273992).
  • Si las Herramientas para desarrolladores encontraron la secuencia de comandos que hizo que el marco se etiquetara como anuncio, habrá un nuevo vínculo Creator Ad Script para los marcos de anuncios. Puedes abrir un marco a través de Aplicación > Marcos. (1217041).

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   Más > 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.