Qué hay de nuevo en DevTools (Chrome 99)

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í.

Limitación de las peticiones WebSocket

El panel Red ahora permite limitar peticiones web socket. Antes, la limitación de la velocidad de peticiones de la red no afectaba a peticiones web socket.

Abre el panel Red, clic en una petición web socket y abre la pestaña Mensajes para observar los mensajes de transferencia. Selecciona 3G lento para limitar la velocidad.

Regulando peticiones WebSocket

Chromium issue: 423246

Nuevo panel de la API de Reportes en el panel Aplicación

Usa el nuevo panel Reportes API para monitorizar los reportes generados en tu página y su estado.

La API de Reportes está diseñada para ayudarte a monitorizar las violaciones de seguridad de tu página, llamadas a API obsoletas y más.

Abra una página que use la API de Reportes (ej. página de demostración). En el panel Aplicación, desplácese hacia abajo hasta la sección Servicios en segundo plano y seleccione el panel Reportes API.

La sección Reportes muestra una lista de reportes generados en tu página y su estado. Clic en ella para ver los detalles del reporte.

La sección Endpoints le proporciona una visión general de todos los endpoints configurados en el encabezado Reporting-Endpoints.

Reportes API

Chromium issue: 1205856

Soporte para esperar hasta que un elemento sea visible/clicable en el panel Recorder

Cuando se reproduce una grabación de flujo de usuario, el panel Grabadora ahora esperará hasta que el elemento sea visible o clicable en la vista o intentará desplazar automáticamente el elemento a la vista antes de reproducir el paso. Antes, la reproducción hubiera fallado inmediatamente.

Aquí hay un ejemplo de un menú fuera de la vista y que se desliza cuando se activa. El flujo de usuario es para activar el menú y hacer clic en el elemento del menú. Antes, la reproducción hubiera fallado en el último paso, porque el elemento del menú sigue deslizando y no está visible en la vista todavía. Está arreglado ahora.

Chromium issue: 1257499

Mejores estilos de consola, formateado y filtrado

Estila correctamente los mensajes de registro con código de escape ANSI

Ahora puedes usar las secuencias de escape ANSI para estilizar correctamente los mensajes de consola. Antes, DevTools console tenía un soporte muy limitado (y parcialmente defectuoso) para secuencias de escape ANSI.

Es común para los desarrolladores de Node.js usar secuencias de escape ANSI para colorear los mensajes de registro, a menudo con la ayuda de algunas bibliotecas de estilización como chalk, colors, ansi-colors, kleur, etc.

Con estos cambios, ahora puedes depurar tus aplicaciones de Node.js de forma sencilla usando DevTools, con mensajes de consola coloreados correctamente. Abre este demo para verlo tú mismo!

Para aprender más sobre formatear y estilizar los mensajes de consola con DevTools, ve a la documentación formatear y estilar mensajes en la Consola.

Estilando la consola

Chromium issues: 1282837, 1282076

Soporte correcto para los especificadores de formato %s, %d, %i y %f

La Consola ahora realiza correctamente las conversión de tipo %s, %d, %i, y %f como se especifica en la Consola Estándar. Antes, el resultado de la conversión era inconsistente.

Chromium issues: 1277944, 1282076

Filtro de grupo de consola más intuitivo

Al filtrar los mensajes de consola, un mensaje de consola se muestra ahora si su contenido de mensaje coincide con el filtro o el título del grupo (o el grupo ascendente) coincide con el filtro. Antes, el título del grupo de consola se mostraba sin importar el filtro.

Además, si un mensaje de consola se muestra, el grupo (o el grupo ascendente) al que pertenece se muestra ahora.

Filtro de grupo de consola

Chromium issue: 1068788

Mejoras en los mapas de código fuente

Depuración de extensiones de Chrome con archivos de mapa de código fuente

Ahora puedes depurar extensiones de Chrome con archivos de mapa de código fuente. Antes, DevTools sólo soportaba mapa de código fuente en línea para depurar extensiones de Chrome.

Depuración de extensiones de Chrome con archivos de mapa de código fuente

Chromium issue: 212374

Mejorado árbol de carpetas de fuente en el panel de Fuentes

El árbol de carpetas de fuente en el panel de Fuentes ha sido mejorado con menos ruido en las estructuras de carpetas y nombres (ej. “../”, “./”, etc). Bajo el capó, esto es el resultado de normalizar las URL absolutas de fuente en los mapas de fuente.

Mejorado árbol de carpetas de fuente en el panel de Fuentes

Chromium issue: 1284737

Muestra los archivos de fuente de Worker en el panel de Fuentes

Los archivos fuente de Worker (ej. web worker, service worker) con SourceURL relativa se muestran ahora en el panel de Fuentes. Antes, los archivos de fuente de Worker no se manejaban correctamente.

Muestra los archivos de fuente de Worker en el panel de Fuentes

Chromium issue: 1277002

Actualizaciones del modo oscuro automático de Chrome

La UI de la emulación de Modo Oscuro Automático ha sido simplificada. Ahora es una casilla, antes era un desplegable.

Además de eso, cuando el Modo Oscuro Automático está habilitado, el desplegable Emular prefers-color-scheme se deshabilitará y se establecerá a prefers-color-scheme: dark automáticamente.

Chrome 96 introduce una Prueba de Origen para el Modo Oscuro Automático en Android. Con esta característica, el navegador aplica un modo oscuro automáticamente generado a los sitios con un tema claro, cuando el usuario ha optado por usar temas oscuros en su Sistema Operativo.

Emulación de Modo Oscuro Automático

Chromium issue: 1243309

Selector de color y panel de división en modo táctil

Ahora puedes seleccionar color, y redimensionar el Cajón en DevTools con dedos o lápiz en dispositivos táctiles.

Aquí tiene un ejemplo capturado con el dispositivo táctil de la Google Pixelbook.

Chromium issues: 1284245, 1284995

Destacados varios

Estos son algunos arreglos destacados en esta versión:

  • Arreglado el comportamiento de Mayús + Supr y Re Pág / Av Pág en el panel Fuentes y Consola. (1278461, 1285662)
  • Cierra el diálogo de edición de puntos de ruptura en la eliminación de puntos de ruptura en el panel Fuentes. (922513)

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.