Novedades de Herramientas para desarrolladores (Chrome 101)

Importa y exporta flujos de usuarios registrados como un archivo JSON

El panel Grabadora ahora admite la importación y exportación de registros de flujo de usuarios como un archivo JSON. Esta adición facilita el uso compartido de los flujos de usuarios y puede ser útil para informar errores.

Por ejemplo, descarga este archivo JSON. Puedes importarlo con el botón de importación y volver a reproducir el flujo de usuarios.

Aparte de eso, también puedes exportar la grabación. Después de registrar un flujo de usuarios, haz clic en el botón de exportación. Hay 3 opciones de exportación:

  • Exportar como archivo JSON. Descarga la grabación como un archivo JSON.
  • Exportar como secuencia de comandos @puppeteer/replay. Descarga la grabación como un guion de Puppeteer Replay.
  • Exportar como secuencia de comandos de Puppeteer Descarga la grabación como un guion de Puppeteer.

Consulta la documentación para obtener más información sobre las diferencias entre estas opciones.

Opciones de exportación en el panel Grabadora

Problema de Chromium: 1257499

Cómo ver capas en cascada en el panel Estilos

Las capas en cascada permiten un control más explícito de tus archivos CSS para evitar conflictos de especificidad del estilo. Esto es particularmente útil para bases de código grandes, sistemas de diseño y cuando se administran estilos de terceros en aplicaciones.

En este ejemplo, hay 3 capas en cascada definidas: page, component y base. En el panel Estilos, puedes ver cada capa y sus estilos.

Haz clic en el nombre de la capa para ver su orden. La capa page tiene la especificidad más alta; por lo tanto, el fondo de box es verde.

Cómo ver capas en cascada en el panel Estilos

Problema de Chromium: 1240596

Compatibilidad con la función de color hwb()

Ahora puedes ver y editar el formato de color HWB en Herramientas para desarrolladores.

En el panel Estilos, mantén presionada la tecla Mayús y haz clic en la vista previa de cualquier color para cambiar el formato del color. Se agregó el formato de color HWB.

También puedes cambiar el formato de color a HWB en el selector de color.

Función de color hwb()

Se mejoró la visualización de propiedades privadas.

Herramientas para desarrolladores ahora evalúa y muestra correctamente los descriptores de acceso privados. Anteriormente, no se podían expandir las clases con accesos privados en la consola y en el panel Fuentes.

propiedades privadas en la consola

Problemas de Chromium: 1296855, https://crbug.com/1303407

Otros aspectos destacados

Estas son algunas correcciones notables en esta versión:

  • Ahora la memoria caché atrás/adelante muestra el ID de la extensión que bloqueó bfcache cuando está presente (1284548).
  • Se corrigió la compatibilidad con el autocompletado para objetos similares a arreglos, nombres de clases CSS, map.get y etiquetas HTML. (1297101, 1297491, 1293807 y 1296983).
  • Se corrigieron elementos destacados incorrectos cuando se hacía doble clic en las palabras y se desviaba la función de autocompletar. (1298437, 1298667).
  • Se corrigió la combinación de teclas de comentarios en el panel Sources. (1296535).
  • Vuelve a habilitar la compatibilidad para usar la tecla Alt (Opciones) para la selección múltiple en el panel Fuentes. (1304070).

[Experimental] Nuevo período y modo de instantánea en el panel de Lighthouse

Además del modo navigation existente, el panel Lighthouse ahora admite dos modos más para medir los flujos de usuarios: timespan e snapshot.

Por ejemplo, puedes usar los informes de período para analizar las interacciones de los usuarios. Abre esta página de demo. Selecciona el modo Intervalo de tiempo y haz clic en Iniciar período. En la página, haz clic en un café y finaliza el período. Lee el informe para descubrir el Tiempo de bloqueo total y el Cambio de diseño acumulado que se debieron a la interacción.

Cada modo tiene sus propios casos de uso, beneficios y limitaciones únicos. Para obtener más información, consulta la documentación de Lighthouse.

Modo de período y de instantánea en el panel de Lighthouse

Problema de Chromium: 772558

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.