Novedades de Herramientas para desarrolladores (Chrome 99)

Limitación de solicitudes de WebSocket

El panel Network ahora admite la limitación de solicitudes de socket web. Anteriormente, el control de la limitación de la red no funcionaba en las solicitudes de socket web.

Abre el panel Network, haz clic en una solicitud de socket web y abre la pestaña Messages para observar las transferencias de mensajes. Selecciona 3G lento para limitar la velocidad.

Problema de Chromium: 423246

Nuevo panel de la API de Reporting en el panel de la aplicación

Usa el nuevo panel de la API de informes 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 obsoletas y mucho más.

Abre una página que use la API de Reporting (p.ej., una 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 informes.

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 Extremos, se proporciona una descripción general de todos los extremos configurados en el encabezado Reporting-Endpoints.

Error de Chromium: 1205856

Se agregó compatibilidad para esperar hasta que el elemento sea visible o se pueda hacer clic en él en el panel de la grabadora.

Cuando se vuelva a reproducir una grabación de flujo de usuarios, el panel de la Grabadora esperará hasta que el elemento sea visible o se pueda hacer clic en él en la vista del viewport, o bien intentará desplazar automáticamente el elemento a la vista del viewport antes de volver a reproducir el paso. Antes, la repetición fallaba de inmediato.

Este es un ejemplo de un menú fuera de la pantalla que se ubica fuera de la ventana de visualización y se desliza hacia adentro cuando se activa. El flujo de usuarios es activar o desactivar el menú y hacer clic en el elemento del menú. Antes, la repetición fallaba en el último paso porque el elemento de menú aún se desliza y aún no es visible en el viewport. Ya se solucionó.

Problema de Chromium: 1257499

Mejores estilos, formatos y filtrados de la consola

Aplica correctamente el diseño de los mensajes de registro con el código de escape ANSI

Ahora puedes usar las secuencias de escape ANSI para aplicar correctamente el diseño a los mensajes de la consola. Anteriormente, la consola de Herramientas para desarrolladores tenía una 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 con secuencias de escape ANSI, a menudo con la ayuda de algunas bibliotecas de estilo como tiza, colors, ansi-colors, kleur, etcétera.

Con estos cambios, ahora puedes depurar tus aplicaciones de Node.js sin inconvenientes usando las Herramientas para desarrolladores, con mensajes de consola coloreados de forma adecuada. Abre esta demostración para verla tú mismo.

Para obtener más información sobre cómo aplicar formato y diseño a los mensajes de la consola con DevTools, consulta la documentación sobre cómo aplicar formato y diseño a los mensajes en la consola.

Problemas de Chromium: 1282837, 1282076

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

Ahora, Console realiza correctamente las conversiones de tipo %s, %d, %i y %f, como se especifica en Console Standard. Anteriormente, el resultado de la conversación era incoherente.

Errores de Chromium: 1277944, 1282076

Filtro de grupos de consolas más intuitivo

Al filtrar el mensaje de la consola, ahora se muestra un mensaje de la consola si el contenido de su mensaje coincide con el filtro o si el título del grupo (o el grupo principal) 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 principal) al que pertenece.

Error de Chromium: 1068788

Mejoras en los mapas de origen

Cómo depurar una extensión de Chrome con archivos de mapa de origen

Ahora puedes depurar la extensión de Chrome con archivos de mapa de origen. Anteriormente, DevTools solo admitía mapas de origen intercalados para la depuración de extensiones de Chrome.

Error de Chromium: 212374

Árbol de carpetas de origen mejorado en el panel Sources

El árbol de carpetas de origen en el panel Sources ahora está mejorado con menos desorden en las estructuras y los nombres de las carpetas (p.ej., “../”, “./”, etcétera). En términos técnicos, este es el resultado de la normalización de las URLs de origen absolutas en los mapas de origen.

Problema de Chromium: 1284737

Muestra los archivos de origen del trabajador en el panel Sources

Los archivos de origen de trabajador (p.ej., trabajador web o service worker) con SourceURL relativa ahora se muestran en el panel Source. Anteriormente, los archivos de origen del trabajador no se manejaban correctamente.

Error de Chromium: 1277002

Actualizaciones del Tema oscuro automático de Chrome

La IU de la emulación del Tema oscuro automático ahora es más simple. Ahora es una casilla de verificación, antes era un menú desplegable.

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

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 temas claros cuando el usuario habilita los temas oscuros en el sistema operativo.

Problema de Chromium: 1243309

Selector de color y panel dividido aptos para pantallas táctiles

Ahora puedes seleccionar el color y cambiar el tamaño del panel lateral en DevTools con los dedos o una pluma stylus en dispositivos con pantalla táctil.

A continuación, se muestra un ejemplo capturado con la pantalla táctil del dispositivo Google Pixelbook.

Problemas de Chromium: 1284245 y 1284995

Otros aspectos destacados

Estas son algunas correcciones importantes de esta versión:

• Se solucionó el problema de edición de cookies en el panel Cookies. (1290196).
• Usa Shift + Tab para seleccionar el comando anterior en el menú de comandos. (1278743).
• Informa los problemas de solicitud de comprobación previa de CORS en la pestaña Problemas. (1272445).
• Informa los problemas de las Client Hints de usuario-agente en la pestaña Problemas. (1219359).
• Se corrigieron los comportamientos de Shift + Delete y Page up / Page down en los paneles Sources y Console. (1278461, 1285662)
• Cierra el diálogo de edición del punto de interrupción cuando lo quites en el panel Sources. (922513)
• No es necesario volver a cargar cuando cambias el tema oscuro o claro en DevTools. (1278738)

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

Comunícate con el equipo de Chrome DevTools

Usa las siguientes opciones para hablar sobre las funciones nuevas, las actualizaciones o cualquier otro tema relacionado con DevTools.

• Envíanos tus comentarios y solicitudes de funciones a crbug.com.
• Informa un problema de DevTools con more_vert Más opciones > Ayuda > Informar un problema de DevTools en DevTools.
• Twittea a @ChromeDevTools.
• Deja comentarios en los videos de YouTube sobre las novedades de las Herramientas para desarrolladores o en los videos de YouTube con sugerencias de Herramientas para desarrolladores.

Novedades de DevTools

Una lista de todo lo que se analizó en la serie Novedades de DevTools.