Se usó la API de Cloud Translation para traducir esta página.

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 el flujo de usuarios paso a paso en el panel de la 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 y esta 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.

Para obtener más información, consulta la Referencia de las funciones de la grabadora.

Reproducción paso a paso en la grabadora

Problema de Chromium: 1257499

Admite el evento de desplazamiento del mouse en el panel de Grabadora.

La grabadora ahora permite agregar manualmente un paso del mouse sobre el que se debe colocar el cursor sobre una grabación.

Esta demostración muestra un menú emergente cuando colocas el cursor sobre ella. Intenta grabar un flujo de usuarios y hacer clic en un elemento del menú.

Si vuelves a reproducir el flujo de usuarios ahora, fallará porque la grabadora no captura los eventos del mouse sobre ellos 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 de menú.

Admite el evento de desplazamiento del mouse sobre la grabadora.

Problema de Chromium: 1257499

Largest Contentful Paint (LCP) en el panel de 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 de acceso 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 que aparece en Cronograma. En el panel Details, puedes ver la puntuación del LCP, aprender a corregir recursos que ralentizan el LCP y ver la ruta crítica del recurso LCP.

Consulta las Estadísticas de rendimiento para obtener más 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

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

El panel Estadísticas de rendimiento ahora detecta destellos de texto invisible (FOIT) y de texto sin estilo (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 del segmento Cambios de diseño.

Consulta Cómo optimizar la carga y la renderización de WebFont a fin de aprender la técnica para evitar cambios de diseño.

FOUT en el panel Estadísticas de rendimiento

Problemas de Chromium: 1334628, 1328873

Controladores de protocolo en el panel Manifest

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

El registro del controlador de protocolo de URL permite a las AWP instaladas controlar vínculos que utilizan un protocolo específico (p.ej., magnet, web+example) para ofrecer una experiencia más integrada.

Ve a la sección Controladores de protocolo desde el panel Application > Manifest. Aquí puedes ver y probar todos los protocolos disponibles.

Por ejemplo, instala esta AWP de demostración. En la sección Controladores de protocolo, escribe “americano” y haz clic en Probar protocolo para abrir la página del café en la AWP.

Controladores de protocolo en el panel Manifest

Problemas de Chromium: 1300613

Insignia de la capa superior en el panel de elementos

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

Recientemente, el elemento <dialog> se estabilizó 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 demostración, haz clic en Abrir diálogo.

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

Para saltar del elemento del 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 del árbol de capas superiores (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

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 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 Agregar información de depuración de DWARF... para adjuntar información de depuración a pedido.

ALT_TEXT_HERE

Problema de Chromium: 1341255

Cómo admitir 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 vuelven a activar la función de reiniciar el marco. Sin embargo, no pudiste editar la función en la que está detenido actualmente. Es común que los desarrolladores interrumpan una función y, luego, la editen mientras están detenidos.

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 la función 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

Problema de Chromium: 1334484

Ver y editar @scope en las reglas del panel Estilos

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

El elemento @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 reglas at-rules de @scope. Haz clic en la declaración de la regla para editarla.

Nota: Actualmente, el @scope de CSS está en desarrollo. Para probar esta función, habilita la marca Funciones experimentales de la plataforma web mediante chrome://flags/#enable-experimental-web-platform-features.

@scope en las reglas del panel Estilos

Problema de Chromium: 1337777

Mejoras en el mapa de fuentes

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 del mapa de origen con signos de puntuación. Algunos minificadores modernos (por ejemplo, esbuild) producen mapas de origen que combinan identificadores con la puntuación posterior (coma, paréntesis, punto y coma).
Las Herramientas para desarrolladores ahora resuelven los nombres del mapa de fuentes para los constructores con una llamada a super.
Se corrigió la indexación de las URLs del mapa de origen para las URLs canónicas duplicadas. Anteriormente, las interrupciones 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 de esta versión:

Quita de forma correcta un par clave-valor de almacenamiento local de la tabla en el panel Aplicación > Almacenamiento local cuando se borre. (1339280).
Las vistas previas de colores ahora se muestran correctamente cuando se visualizan los archivos CSS en el panel Fuentes. Anteriormente, sus posiciones estaban mal ubicadas. (1340062).
Muestra de manera coherente los elementos de CSS y de cuadrícula de CSS en el panel Layout, además de como insignias en el panel Elements. Anteriormente, faltaban los elementos flexibles y de cuadrícula en ambos lugares de forma aleatoria. (1340441, 1273992).
Hay un nuevo vínculo de la secuencia de comandos del anuncio del creador disponible para los marcos de anuncios si Herramientas para desarrolladores encontró la secuencia de comandos que provocó que el marco se etiquetara como un anuncio. Puedes abrir un marco a través de Aplicación > Marcos. (1217041).

Descarga los canales de vista previa

Considera usar Canary, Dev o Beta de Chrome como tu navegador de desarrollo predeterminado. Estos canales de vista previa te brindan acceso a las funciones más recientes de Herramientas para desarrolladores, prueba APIs de plataformas web de vanguardia y encuentra problemas en tu sitio antes que tus usuarios.

Cómo comunicarse con el equipo de Herramientas para desarrolladores de Chrome

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

Envíanos tus sugerencias o comentarios a través de crbug.com.
Informa un problema en Herramientas para desarrolladores mediante Más opciones > Ayuda > Informar problemas con Herramientas para desarrolladores en Herramientas para desarrolladores.
Envía un tweet a @ChromeDevTools.
Deja comentarios en los videos de YouTube de las Novedades de las Herramientas para desarrolladores o en las sugerencias de Herramientas para desarrolladores (videos de YouTube).