Se usó la API de Cloud Translation para traducir esta página.

Novedades de Herramientas para desarrolladores (Chrome 99)

Jecelyn Yeen

Regulación de solicitudes de WebSocket

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

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

Regulación de solicitudes de WebSocket

Problema de Chromium: 423246

Nuevo panel de la API de Reporting en el panel Application

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

La API de Reporting está diseñada para ayudarte a supervisar las infracciones 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 sus estados. 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.

Panel de la API de Reporting

Problema de Chromium: 1205856

Compatibilidad con la función de espera hasta que el elemento sea visible o se pueda hacer clic en el panel de Grabadora

Cuando se reproduce una grabación de flujo de usuarios, el panel de la Grabadora ahora espera hasta que el elemento sea visible o se pueda hacer clic en él en el viewport, o bien intentará desplazarlo automáticamente hacia el 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 coloca fuera del viewport y se desliza cuando se activa. El flujo del usuario es activar o desactivar el menú y hacer clic en el elemento de menú. Anteriormente, la repetición fallaba en el último paso porque el elemento de menú aún se deslizaba y no era visible en el viewport. Ya se solucionó.

Problema de Chromium: 1257499

Mejor estilo, formato y filtrado de la consola

Diseña correctamente los mensajes de registro con el código de escape ANSI

Ahora puedes usar las secuencias de escape ANSI para diseñar correctamente los mensajes de la consola. Anteriormente, la consola de Herramientas para desarrolladores tenía una compatibilidad muy limitada (y parcialmente dañada) para las secuencias de escape ANSI.

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

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

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

estilo de consola

Problemas de Chromium: 1282837, 1282076

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

Ahora, la consola ejecuta correctamente las conversiones de tipo %s, %d, %i y %f, según se especifica en el Estándar de Console. Anteriormente, el resultado de la conversación era incoherente.

Compatibilidad con especificadores de formato en el mensaje de la consola

Problemas de Chromium: 1277944, 1282076

Filtro de grupos de consola más intuitivo

Cuando se filtra el mensaje de la consola, ahora se muestra uno si el contenido del 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.

filtro de grupos de la consola

Problema de Chromium: 1068788

Mejoras en los mapas de fuentes

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

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

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

Problema de Chromium: 212374

Árbol de carpetas de fuentes mejorado en el panel de fuentes

Ahora se mejoró el árbol de carpetas de origen en el panel Fuentes, ya que ahora se usa menos desorden en las estructuras de carpetas y en la denominación (p.ej., “../”, “./”, etcétera). De forma interna, este es el resultado de la normalización de las URLs de origen absolutas en los mapas de origen.

Árbol de carpetas de fuentes mejorado en el panel de fuentes

Problema de Chromium: 1284737

Muestra los archivos fuente de trabajadores en el panel Sources

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

ALT_TEXT_HERE

Problema de Chromium: 1277002

Actualizaciones del Tema oscuro automático de Chrome

Se simplificó la IU de Emulación automática de tema oscuro. Ahora es una casilla de verificación; antes era un menú desplegable.

Aparte de eso, cuando se habilite el Tema oscuro automático, se inhabilitará el menú desplegable Emular prefers-color-scheme y se establecerá automáticamente en prefers-color-scheme: oscuro.

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 habilita el tema oscuro en el sistema operativo.

Emulación automática del tema oscuro

Problema de Chromium: 1243309

Selector de color y panel dividido compatibles con el tacto

Ahora puedes seleccionar el color y cambiar el tamaño del panel lateral en Herramientas para desarrolladores con los dedos o la pluma stylus en los 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, 1284995

Otros aspectos destacados

Estas son algunas correcciones notables de esta versión:

Se corrigió el error de editar cookies en el panel Cookies. (1290196).
Usa Shift + Tab para seleccionar el comando anterior en el menú de comandos. (1278743).
Informa problemas con las solicitudes preliminares de CORS en la pestaña Problemas. (1272445).
Informa problemas de User-Agent Client Hints en la pestaña Issues. (1219359).
Se corrigieron los comportamientos de Shift + Delete y Page up / Page down en el panel Sources y Console. (1278461, 1285662).
Cierra el diálogo de edición del punto de interrupción en la eliminación del punto de interrupción en el panel Fuentes. (922,513)
No es necesario volver a cargar cuando cambias el tema claro/oscuro en Herramientas para desarrolladores. (1278738).

Descarga los canales de vista previa

Considera usar Canary, Dev o Beta de Chrome como tu navegador de desarrollo predeterminado. Estos canales de vista previa te brindan acceso a las funciones más recientes de Herramientas para desarrolladores, prueba APIs de plataformas web de vanguardia y encuentra problemas en tu sitio antes que tus usuarios.

Cómo comunicarse con el equipo de Herramientas para desarrolladores de Chrome

Usa las siguientes opciones para analizar las nuevas funciones y los cambios en la publicación, o cualquier otra cosa relacionada con Herramientas para desarrolladores.

Envíanos tus sugerencias o comentarios a través de crbug.com.
Informa un problema en Herramientas para desarrolladores mediante Más opciones > Ayuda > Informar problemas con Herramientas para desarrolladores en Herramientas para desarrolladores.
Envía un tweet a @ChromeDevTools.
Deja comentarios en los videos de YouTube de las Novedades de las Herramientas para desarrolladores o en las sugerencias de Herramientas para desarrolladores (videos de YouTube).