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

Novedades de Herramientas para desarrolladores (Chrome 99)

Jecelyn Yeen

Limitació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 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 lenta para limitar la velocidad.

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

Panel de la API de Reporting

Problema de Chromium: 1205856

Se admite la espera hasta que el elemento sea visible o se pueda hacer clic en él en el panel de Grabadora

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

A continuación, se muestra un ejemplo de un menú fuera de la pantalla ubicado fuera del viewport y deslizarse hacia adentro cuando se activa. El flujo del usuario consiste en activar o desactivar el menú y hacer clic en el elemento de 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

Mejor estilo, formato y filtrado en la consola

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

Ahora puedes usar las secuencias de escape de ANSI para definir el estilo adecuado de 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 dar formato y estilo a los mensajes de la consola con Herramientas para desarrolladores, consulta la documentación sobre cómo dar formato y estilo a los mensajes en la consola.

diseño de consola

Problemas de Chromium: 1282837, 1282076

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

Console ahora realizará 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.

Admitir especificadores de formato en el mensaje de la consola

Problemas de Chromium: 1277944, 1282076

Filtro de grupo 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.

filtro de grupo de la consola

Problema de Chromium: 1068788

Mejoras en los mapas de fuentes

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

Ahora puedes depurar la extensión de Chrome con archivos de mapas 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 mapas de origen

Problema de Chromium: 212374

Árbol de carpetas de fuentes mejorado en el panel Sources

Ahora se mejoró el árbol de carpetas de fuentes del panel Sources con menos desorden en las estructuras y los nombres de las carpetas (p.ej., “../”, “./”, etcétera). En niveles más profundos, esto es el resultado de la normalización de las URL de origen absolutas en los mapas de origen.

Árbol de carpetas de fuentes mejorado en el panel Sources

Problema de Chromium: 1284737

Muestra los archivos de origen del trabajador en el panel Sources

Los archivos fuente Worker (p.ej., web worker, service worker) con SourceURL relativo ahora se muestran en el panel Source. Anteriormente, los archivos fuente del trabajador no se administraban de forma correcta.

ALT_TEXT_HERE

Problema 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, antes era un menú desplegable.

Por otro lado, cuando habilites el Tema oscuro automático (Auto Dark Theme), se inhabilitará el menú desplegable Emulate 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 para los sitios con tema claro cuando el usuario habilita los temas oscuros en el sistema operativo.

Emulación del Tema oscuro automático

Problema de Chromium: 1243309

Panel dividido y selector de colores con facilidad

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 en 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 problemas de solicitudes preliminares de CORS en la pestaña Problemas. (1272445).
Informa los problemas de User-Agent Client Hints en la pestaña Problemas. (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 cuando se quita el punto de interrupción en el panel Sources. (922513)
No se requiere volver a cargar cuando se cambia el tema claro/oscuro en Herramientas para desarrolladores. (1278738).

Descarga los canales de vista previa

Considera usar Chrome Canary, Dev o Beta como navegadores de desarrollo predeterminados. Estos canales de vista previa te brindan acceso a las funciones más recientes de Herramientas para desarrolladores, prueban API de plataforma web de vanguardia y detectan problemas en tu sitio antes que los usuarios.

Comunicarse con el equipo de Herramientas para desarrolladores de Chrome

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

Para enviarnos sugerencias o comentarios, accede a crbug.com.
Para informar un problema de Herramientas para desarrolladores, use Más opciones > Ayuda > Informar problemas de Herramientas para desarrolladores en Herramientas para desarrolladores.
Twittea a @ChromeDevTools.
Deja comentarios en nuestros videos de YouTube de Herramientas para desarrolladores o en videos de YouTube de las Sugerencias de las Herramientas para desarrolladores.