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 el flujo de usuarios. La repetición se detendrá antes de ejecutar el paso. Desde aquí, puedes continuar la repetición, ejecutar un paso o cancelarla.

Con esta función, puedes visualizar y depurar tu flujo de usuarios por completo 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

Error de Chromium: 1257499

Se agregó compatibilidad con el evento de desplazamiento del mouse en el panel de la grabadora.

La grabadora ahora admite agregar un paso de desplazamiento del mouse (colocar el cursor sobre) de forma manual en una grabación.

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

Si vuelves a reproducir el flujo de usuarios ahora, fallará porque la grabadora 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ú.

Se agregó compatibilidad con el evento de desplazamiento del mouse en la grabadora

Error 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 conocer las rutas de acceso críticas y las causas raíz de un procesamiento de imagen con contenido más grande (LCP).

En una grabación de rendimiento, haz clic en la insignia de LCP en la línea de tiempo. En el panel Detalles, puedes ver la puntuación de la LCP, aprender a corregir los recursos que ralentizan la LCP y ver la ruta crítica del recurso de la LCP.

Consulta Estadísticas de rendimiento para obtener información práctica y mejorar el rendimiento de tu sitio web con el panel.

LCP en el panel Estadísticas de rendimiento

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 flashes de texto invisible (FOIT) y flashes de texto sin diseño (FOUT) como posibles causas raíz de 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 la pista Cambios de diseño.

Consulta Cómo optimizar la carga y la renderización de WebFont para aprender la técnica que evita los cambios de diseño.

Se produce un error de tiempo de espera (FOUT) en el panel Estadísticas de rendimiento.

Problemas de Chromium: 1334628, 1328873

Controladores de protocolo en el panel Manifiesto

Ahora puedes usar DevTools para probar el registro del controlador de protocolo de URL para aplicaciones web progresivas (AWP).

El registro del controlador de protocolo de URL permite que los AWPs instalados controlen vínculos que usan un protocolo específico (p.ej., magnet, web+example) para lograr una experiencia más integrada.

Navega a la sección Protocol Handlers a través del panel Application > 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 Manifiesto

Problemas de Chromium: 1300613

Insignia de capa superior en el panel de elementos

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

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 todo el resto del contenido.

En esta demostración, haz clic en Open dialog.

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

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

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

Insignia de capa superior en el panel de elementos

Error de Chromium: 1313690

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

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

Abre un archivo 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

Error de Chromium: 1341255

Se admite la edición en vivo durante la depuración.

Ahora puedes editar la función más alta de la pila sin reiniciar el depurador.

En Chrome 104, DevTools recupera la función de reinicio de marco. Sin embargo, no pudiste editar la función en la que te encuentras actualmente en pausa. Es común que los desarrolladores hagan una pausa en 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 más alta mientras está en pausa.
  • No hay llamadas recursivas en la misma función más abajo en la pila.

edición en vivo durante la depuración

Error de Chromium: 1334484

Cómo ver y editar reglas de @scope en el panel de estilos

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

Las reglas @scope forman parte de la especificación de nivel 6 de la herencia y la cascada de CSS. 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 Styles, consulta las reglas de @scope. Haz clic en la declaración de la regla para editarla.

@scope en las reglas del panel Estilos

Error 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 puntuación. Algunos minificadores modernos (por ejemplo, esbuild) producen mapas de origen que combinan identificadores con puntuación posterior (coma, paréntesis, punto y coma).
  • DevTools ahora resuelve los nombres de los mapas de origen para los constructores con una llamada a super. ALT_TEXT_HERE
  • Se corrigió la indexación de URLs del mapa de origen para las URLs canónicas duplicadas. Anteriormente, los puntos de interrupción no se activaban en algunos archivos debido a las URLs canónicas duplicadas.

Error de Chromium: 1335338, 1333411

Otros aspectos destacados

Estas son algunas correcciones importantes de esta versión:

  • Quita correctamente un par clave-valor de almacenamiento local de la tabla en el panel Application > Local Storage cuando se borre. (1339280).
  • Las vistas previas de colores ahora se muestran correctamente cuando se ven los archivos CSS en el panel Sources. Anteriormente, sus posiciones estaban mal ubicadas. (1340062).
  • Muestra de forma coherente los elementos de cuadrícula y flex de CSS en el panel Diseño, así como como insignias en el panel Elementos. Anteriormente, los elementos de flex y cuadrícula faltaban de forma aleatoria en ambos lugares. (1340441, 1273992).
  • Hay un nuevo vínculo Secuencia de comandos de anuncios del creador disponible para los marcos de anuncios si DevTools encontró la secuencia de comandos que causó que el marco se etiquetara como un anuncio. Puedes abrir un marco 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 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.