Novedades de Herramientas para desarrolladores (Chrome 101)

Jecelyn Yeen

Importa y exporta flujos de usuarios registrados como un archivo JSON

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

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

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

  • Exportar como archivo JSON. Descarga la grabación como un archivo JSON.
  • Exportar como una secuencia de comandos @puppeteer/replay. Descarga la grabación como una secuencia de comandos de Puppeteer Replay.
  • Exportar como secuencia de comandos de Puppeteer . Descarga la grabación como secuencia de comandos 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 de la grabadora

Error de Chromium: 1257499

Cómo ver las 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 de diseño. Esto es especialmente útil para bases de código grandes, sistemas de diseño y cuando se administran estilos de terceros en aplicaciones.

En este ejemplo, se definen 3 capas en cascada: 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 el orden de las capas. La capa page tiene la especificidad más alta, por lo que el fondo 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 DevTools.

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

Como alternativa, 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.

DevTools ahora evalúa y muestra correctamente los accesores privados. Anteriormente, no podías expandir clases con accesores privados en Console y el panel Sources.

propiedades privadas en la consola

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

Otros aspectos destacados

Estas son algunas correcciones importantes de esta versión:

  • La memoria caché de atrás/adelante ahora 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 arrays, nombres de clases de CSS, etiquetas map.get y HTML. (1297101, 1297491, 1293807, 1296983)
  • Se corrigieron los textos destacados incorrectos cuando se hacía doble clic en palabras y se anulaba el autocompletado. (1298437, 1298667)
  • Se corrigió la combinación de teclas de comentario en el panel Sources. (1296535).
  • Se volvió a habilitar la compatibilidad con el uso de 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 demostración. Selecciona el modo Período y haz clic en Iniciar período. En la página, haz clic en una taza de café y finaliza el período. Lee el informe para conocer el tiempo de bloqueo total y el desplazamiento de diseño acumulativo que causó 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.

Período y modo de resumen en la panelería de Lighthouse

Error de Chromium: 772558

Descarga los canales de vista previa

Considera usar Chrome Canary, Dev o Beta como navegadores de desarrollo predeterminados. 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 Herramientas para desarrolladores de Chrome

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.