Novedades de Herramientas para desarrolladores (Chrome 99)

Jecelyn Yeen

Limitación de solicitudes de WebSocket

El panel Network ahora admite la limitación de solicitudes de WebSocket. Anteriormente, la limitación de red no funcionaba en las solicitudes de WebSocket.

Abre el panel Red, haz clic en una solicitud de WebSocket y abre la pestaña Mensajes para observar las transferencias de mensajes. Selecciona Slow 3G para limitar la velocidad.

Limitación de solicitudes de WebSocket

Error de Chromium: 423246

Nuevo panel de la API de Reporting en el panel Application

Usa el nuevo panel de la API de Reporting para supervisar los informes generados en tu página y su estado.

La API de Reporting está diseñada para ayudarte a supervisar los incumplimientos de seguridad de tu página, las llamadas a la API que dejaron de estar disponibles y mucho más.

Abre una página que use la API de Reporting (p.ej., la página de demostración). En el panel Aplicación, desplázate hacia abajo hasta la sección Servicios en segundo plano y selecciona el panel API de Reporting.

En la sección Informes, se muestra una lista de los informes generados en tu página y su estado. Haz clic en él para ver los detalles del informe.

En la sección Endpoints, se proporciona una descripción general de todos los extremos configurados en el encabezado Reporting-Endpoints.

Panel de la API de Reporting

Error de Chromium: 1205856

Compatibilidad con la espera hasta que el elemento esté visible o se pueda hacer clic en él en el panel de la grabadora

Cuando se reproduce una grabación del flujo de usuarios, el panel de la Grabadora ahora esperará hasta que el elemento esté visible o se pueda hacer clic en él en la ventana gráfica, o bien intentará desplazar automáticamente el elemento a la ventana gráfica antes de reproducir el paso. Anteriormente, la repetición fallaba de inmediato.

Aquí se muestra un ejemplo de un menú fuera de la pantalla que se ubica fuera del viewport y se desliza cuando se activa. El flujo del usuario consiste en activar o desactivar el menú y hacer clic en el elemento de menú. Anteriormente, la reproducción fallaba en el último paso, ya que el elemento de menú aún se deslizaba y no era visible en la ventana gráfica. Ya se solucionó.

Error de Chromium: 1257499

Mejor formato, filtrado y diseño de la consola

Cómo aplicar el estilo adecuado a los mensajes de registro con el código de escape ANSI

Ahora puedes usar las secuencias de escape ANSI para aplicar el estilo adecuado a los mensajes de la consola. Anteriormente, la consola de Herramientas para desarrolladores tenía compatibilidad muy limitada (y parcialmente dañada) con las secuencias de escape ANSI.

Es común que los desarrolladores de Node.js coloreen los mensajes de registro a través de secuencias de escape ANSI, a menudo con la ayuda de algunas bibliotecas de diseño como chalk, colors, ansi-colors, kleur, etcétera.

Con estos cambios, ahora puedes depurar tus aplicaciones de Node.js sin problemas con las Herramientas para desarrolladores, con mensajes de consola coloreados adecuados. Abre esta demostración para verla por tu cuenta.

Para obtener más información sobre cómo dar formato y aplicar estilos a los mensajes de la consola con las Herramientas para desarrolladores, consulta la documentación sobre cómo dar formato y aplicar estilos a los mensajes en la consola.

Diseño de la consola

Problemas de Chromium: 1282837, 1282076

Admite correctamente los especificadores de formato %s, %d, %i y %f

La consola ahora realiza correctamente las conversiones de tipo %s, %d, %i y %f según se especifica en el estándar de la consola. Anteriormente, el resultado de la conversación era incoherente.

Admite especificadores de formato en el mensaje de la consola

Problemas de Chromium: 1277944, 1282076

Filtro de grupo de consolas más intuitivo

Cuando se filtra el mensaje de la consola, ahora se muestra un mensaje de la consola si el contenido del mensaje coincide con el filtro o si el título del grupo (o del grupo superior) coincide con el filtro. Anteriormente, el título del grupo de la consola se mostraba a pesar del filtro.

Además, si se muestra un mensaje de la consola, ahora también se muestra el grupo (o el grupo superior) al que pertenece.

Filtro de grupo de la consola

Error de Chromium: 1068788

Mejoras en los mapas de origen

Depura la extensión de Chrome con archivos de mapa de origen

Ahora puedes depurar extensiones de Chrome con archivos de mapa de origen. Anteriormente, las Herramientas para desarrolladores solo admitían mapas de origen intercalados para la depuración de extensiones de Chrome.

Depura la extensión de Chrome con archivos de mapa de origen

Error de Chromium: 212374

Se mejoró el árbol de carpetas de origen en el panel de Fuentes

El árbol de carpetas de origen en el panel Fuentes ahora se mejoró con menos desorden en las estructuras y los nombres de las carpetas (p.ej., “../”, “./”, etcétera). Internamente, esto es el resultado de normalizar las URLs de origen absolutas en los mapas de origen.

Se mejoró el árbol de carpetas de origen en el panel de Fuentes

Problema de Chromium: 1284737

Cómo mostrar los archivos fuente del trabajador en el panel Sources

Los archivos fuente de trabajadores (p.ej., trabajadores web o de servicio) con SourceURL relativa ahora se muestran en el panel Fuente. Anteriormente, los archivos fuente de los trabajadores no se controlaban correctamente.

ALT_TEXT_HERE

Error de Chromium: 1277002

Actualizaciones del tema oscuro automático de Chrome

Se simplificó la IU de la emulación del tema oscuro automático. Ahora es una casilla de verificación, pero antes era un menú desplegable.

Además, cuando se habilita el Tema oscuro automático, se inhabilita el menú desplegable Emular prefers-color-scheme y se establece automáticamente en prefers-color-scheme: dark.

Chrome 96 presenta una prueba de origen para el tema oscuro automático en Android. Con esta función, el navegador aplica un tema oscuro generado automáticamente a los sitios con tema claro cuando el usuario habilitó los temas oscuros en el sistema operativo.

Emulación del Tema oscuro automático

Error de Chromium: 1243309

Selector de color y panel dividido táctiles

Ahora puedes seleccionar el color y cambiar el tamaño del cajón en Herramientas para desarrolladores con los dedos o un lápiz stylus en dispositivos con pantalla táctil.

Este es un ejemplo capturado con la pantalla táctil del dispositivo Google Pixelbook.

Problemas de Chromium: 1284245, 1284995

Otros aspectos destacados

Estas son algunas correcciones destacadas en esta versión:

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 vanguardia de la plataforma web y te ayudan a encontrar problemas en tu sitio antes de que lo hagan tus usuarios.

Comunícate con el equipo de Herramientas para desarrolladores de Chrome

Usa las siguientes opciones para analizar las nuevas funciones, las actualizaciones o cualquier otro tema relacionado con las Herramientas para desarrolladores.

Novedades de Herramientas para desarrolladores

Una lista de todo lo que se abordó en la serie Novedades de las Herramientas para desarrolladores