Qué hay de nuevo en DevTools (Chrome 101)

Published on Updated on

Translated to: English, Português, 한국어, 中文, Pусский, 日本語

Gracias Miguel Ángel por la traducción y Carlos Caballero por la revisión.

¿Tienes interés en mejorar DevTools? Regístrate para participar en la Google User Research aquí.

Importar y exportar como JSON flujos de usuario grabados

El panel Grabadora ahora permite importar y exportar grabaciones de flujos de usuario como un archivo JSON. Esta adición hace que sea más fácil compartir flujos de usuario y puede ser útil para informes de errores.

Por ejemplo, descargue este archivo JSON. Puede importarlo con el botón importar y reproducir el flujo de usuario.

Además de esto, puede exportar también la grabación. Después de grabar un flujo de usuario, haga clic en el botón exportar. Hay 3 opciones de exportación:

  • Exportar como un archivo JSON. Descargue la grabación como un archivo JSON.
  • Exportar como un script de @puppeteer/replay. Descargue la grabación como un script de Puppeteer Replay.
  • Exportar como un script de Puppeteer. Descargue la grabación como un script de Puppeteer.

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

Opciones de exportación en el panel Grabadora

Chromium issue: 1257499

Ver capas de cascada en el panel de Estilos

Las Capas de Cascada permiten un control más explícito de sus archivos CSS para evitar conflictos de especificidad en sus estilos. Esto es particularmente útil para grandes bases de código, sistemas de diseño y al gestionar estilos de terceros en aplicaciones.

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

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

Ver capas de cascada en el panel de Estilos

Chromium issue: 1240596

Soporte para la función de color hwb()

Ahora puede ver y editar el formato de color HWB en DevTools.

En el panel Estilos, mantenga la tecla Shift y haga clic en cualquier vista previa de color para cambiar el formato de color. El formato de color HWB se agregará.

Alternativamente, puede cambiar el formato de color a HWB en el selector de color.

Función de color hwb()

Mejorada la visualización de las propiedades privadas

DevTools ahora evalúa y muestra correctamente los accesores privados. Anteriormente, no se podían expandir las clases con accesos privados en la Consola y en el panel de Fuentes.

Propiedades privadas en la Consola

Chromium issues: 1296855, https://crbug.com/1303407

Varios aspectos destacados

Existen algunas correcciones destacadas en esta versión:

  • Corregido el soporte de autocompletado para objetos tipo array, nombres de clase CSS, map.get y etiquetas HTML. (1297101, 1297491, 1293807, 1296983)
  • Corregido el resaltado incorrecto al hacer doble clic en palabras y deshacer el autocompletado. (1298437, 1298667)
  • Corregido el atajo de teclado para comentarios en el panel Fuentes. (1296535)
  • Re-habilitado el soporte para usar la tecla Alt (Opciones) para la selección múltiple en el panel Fuentes. (1304070)

[Experimental] Nuevos modos tiempo de espera e instantánea en el panel Lighthouse

  • Para activar el experimento, habilite la casilla Usar el panel Lighthouse con el modo de tiempo y instantánea en Ajustes > Experimentos.

Además del modo de navegación existente, el panel Lighthouse ahora soporta dos modos de medida de flujos de usuario - tiempo de espera e instantánea.

Por ejemplo, puede usar los informes de tiempo de espera para analizar las interacciones de usuario. Abra esta página demo. Seleccione el modo de Tiempo de Espera y haga clic en Iniciar tiempo de bloqueo. En la página, haga clic en un café y termine el tiempo de bloqueo. Lea el informe para encontrar el Tiempo de bloqueo total y Desplazamiento acumulado del diseño que fueron causados por la interacción.

Cada modo tiene sus propios casos de uso, beneficios y limitaciones. Por favor, consulte la documentación de Lighthouse para más información.

Los modos de Instantánea y Tiempo de Espera en el panel de Lighthouse

Chromium issue: 772558

Descarga de los canales de vista previa

Considera usar Chrome Canary, Dev o Beta como tu navegador de desarrollo por defecto. Estos canales de prueba te dan acceso a las últimas funcionalidades de DevTools, probar innovadoras APIs de la plataforma web y encontrar errores en tus sitios antes que tus usuarios lo hagan.

Ponerse en contacto con el equipo de Chrome DevTools

Usa las siguientes opciones para hablar sobre nuevas funcionalidades y cambios en el artículo o cuaquier cosa relacionada con DevTools.

  • Envía una sugerencia u opinión a través de crbug.com.
  • Reporta un problema con DevTools usando Más opciones   Más   > Ayuda > Reportar un problema con DevTools in DevTools.
  • Haz un Tweet a @ChromeDevTools.
  • Deja un comentario en los vídeos de YouTube sobre Qué hay de nuevo en DevTools.

Más características de DevTools

Por favor, revisa la versión en inglés de What's New In DevTools para una lista completa de las características lanzadas. Debajo tienes más contenido que ha sido traducido al castellano.

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.