Qué hay de nuevo en DevTools (Chrome 99)
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.
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
.
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.
Chromium issues: 1282837, 1282076
%s
, %d
, %i
y %f
Soporte correcto para los especificadores de formato 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.
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.
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.
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.
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.
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 problema de edición de cookies en el panel Cookies. (1290196)
- Usa
Mayús
+Tab
para seleccionar el comando anterior en el Menú de Comandos. (1278743)
- Reporta problemas de solicitud de preflight en la pestaña Problemas. (1272445).
- Reporta problemas de User-Agent Client Hints en la pestaña Problemas. (1219359).
- Arreglado el comportamiento de
Mayús
+Supr
yRe 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)
- No se requiere recargar cuando cambias el tema claro/oscuro en DevTools. (1278738)
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 > 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 109
- Recorder: Copia como opciones para los pasos, reproducción en la página, menú contextual del paso
- Muestra los nombres reales de las funciones en las grabaciones de rendimiento
- Nuevos atajos de teclado en el panel Consola y Fuentes
- Mejoras en la depuración de JavaScript {: #debugging
- Otros aspectos destacados
- [Experimental] Mejorada la UX para la gestión de puntos de interrupción
- [Experimental] Formatea automáticamente el código para una mejor lectura
Chrome 108
- Sugerencias para las propiedades CSS inactivas
- Detección automática de XPath y selectores de texto en el panel Grabador
- Paso a paso a través de expresiones separadas por comas
- Mejoras en la configuración de la lista de ignorados
- Otros detalles destacados
Chrome 107
- Personalizar atajos de teclado en DevTools
- Alternar entre temas claro y oscuro con un atajo de teclado
- Resaltar objetos C/C++ en el Inspector de memoria
- Soporte para información completa del iniciador al importar HAR
- Iniciar búsqueda en el DOM después de presionar
Enter
- Mostrar iconos
start
yend
para propiedades CSS flexboxalign-content
- Otros detalles destacados
Chrome 106
- Agrupar archivos por Autoría/Desplegado en el panel Fuentes
- Rastreos de pila vinculados para operaciones asincrónicas
- Ignorar automáticamente los scripts de terceros conocidos
- Pila de llamadas mejorada durante la depuración
- Ocultar fuentes ignoradas en el panel Fuentes
- Ocultar archivos ignorados en el menú de comandos
- Nueva pista de interacciones en el panel Rendimiento
- Desglose de tiempos de LCP en el panel Perspectivas de Rendimiento
- Generar automáticamente el nombre predeterminado para las grabaciones en el panel Grabadora
- Otros detalles destacados
Chrome 105
- Reproducción paso a paso en el panel Recorder
- Soporte de eventos de ratón en el panel Recorder
- Largest Contentful Paint (LCP) en el panel Performance Insights
- Identificar parpadeos de texto (FOIT, FOUT) como causas potenciales de desplazamientos de diseño
- Controladores de protocolo en el panel de Manifiesto
- Insignia de capa superior en el panel de Elementos
- Enlazar información de depuración de WASM al momento de ejecutar
- Soporte para edición en vivo durante la depuración
- Ver y editar las reglas de @scope en el panel de Estilos
- Mejoras en los mapas de código fuente
- Otros detalles destacados
Chrome 104
- Reiniciar el marco durante la depuración
- Opciones de reproducción lenta en el panel Grabador
- Crear una extensión para el panel de la grabadora
- Agrupar archivos por Autoría/Implementación en el panel Orígenes
- Nueva pista de tiempos de usuario en el panel de información de rendimiento
- Revelar el slot asignado de un elemento
- Simular la concurrencia de hardware en las grabaciones de rendimiento
- Vista previa del valor sin color al autocompletar variables CSS
- Identificar los marcos de bloqueo en el panel de caché Atrás/Adelante
- Sugerencias de autocompletado mejoradas para objetos de JavaScript
- Mejoras en los mapas de origen
- Otros detalles destacados
Chrome 103
- Captura de eventos de doble-click y clic derecho en el panel Grabación
- Nuevos modos de tiempo e instantánea en el panel Lighthouse
- Mejora en el control de zoom en el panel de Consejos de Rendimiento
- Confirmar para eliminar de una grabación de rendimiento
- Reordene los paneles en el panel de elementos
- Eligiendo un color fuera del navegador
- Mejorada previsualización de valor en línea durante la depuración
- Soporte para grandes bloques para autenticadores virtuales
- Nuevos atajos de teclado en el panel Fuentes
- Mejoras en los source maps
Chrome 102
- Función de vista previa: nuevo panel de información de rendimiento
- Nuevos atajos para emular temas claros y oscuros
- Mejore la seguridad en la pestaña Vista previa de la red
- Recarga mejorada en el punto de interrupción
- Actualizaciones de la consola
- Cancelar registro de flujo de usuario al inicio
- Mostrar pseudoelementos heredados resaltados en el panel Estilos
- Destacados varios
- [Experimental] Copiar cambios de CSS
- [Experimental] Selección de color fuera del navegador
Chrome 101
- Importar y exportar como JSON flujos de usuario grabados
- Ver capas de cascada en el panel de Estilos
- Soporte para la función de color hwb()
- Mejorada la visualización de las propiedades privadas
- Varios aspectos destacados
- [Experimental] Nuevos modos tiempo de espera e instantánea en el panel Lighthouse
Chrome 100
- Ver y editar reglas @supports en el panel Estilos
- Admite selectores comunes de forma predeterminada
- Personaliza el selector de grabaciones
- Cambiar el nombre de una grabación
- Vista previa de propiedades de clase/función al pasar el mouse
- Fotogramas presentados parcialmente en el panel Rendimiento
- Otros detalles destacados
Chrome 99
- Limitación de las peticiones WebSocket
- Nuevo panel de la API de Reportes en el panel Aplicación
- Soporte para esperar hasta que un elemento sea visible/clicable en el panel Recorder
- Mejores estilos de consola, formateado y filtrado
- Depuración de extensiones de Chrome con archivos de mapa de código fuente
- Mejorado árbol de carpetas de fuente en el panel de Fuentes
- Muestra los archivos de fuente de Worker en el panel de Fuentes
- Actualizaciones del modo oscuro automático de Chrome
- Selector de color y panel de división en modo táctil
- Otros detalles destacados
Chrome 98
- Función en vista previa: Árbol de accesibilidad de página completa
- Establecer un tiempo de espera más largo para la grabación del flujo de usuario
- Set longer timeout for user flow recording
- Asegúrese de que sus páginas se puedan almacenar en caché con la pestaña de caché Atrás/adelante
- Nuevo filtro de panel de propiedades
- Emular la característica de medios de colores forzados de CSS
- Mostrar reglas con el comando hover
- Soporte para
row-reverse
ycolumn-reverse
en el editor Flexbox - Nuevos atajos de teclado para reproducir XHR y expandir todos los resultados de búsqueda
- Lighthouse 9
- Panel Fuentes mejorado
- Destacados varios
- [Experimental] Endpoints en el panel de informes de API
Chrome 97
- Función en vista previa: Nuevo panel de Grabadora
- Actualización de la lista de dispositivos en el Modo Dispositivo
- Autocompletado con Editar como HTML
- Mejorada la experiencia de depuración de código
- Sincronización de configuraciones de DevTools entre dispositivos
Chrome 96
Función de vista previa: Nuevo panel de Descripción General de CSS
Mejoras en la visualización de propiedades en el panel Propiedades
Vista previa y evaluación adecuadas de los objetos
Intl
en la consolaPanel de caché de la aplicación en desuso (deprecated) en el panel de la aplicación
[Experimental] Nuevo panel de la API de informes en el panel de la aplicación
Chrome 95
- Nuevas herramientas para cambiar medidas en CSS
- Oculta problemas en la pestaña Problemas
- Mejora la visualización de propiedades
- LLighthouse 8.4 en el panel Lighthouse
- Ordena los fragmentos en el panel Fuentes
- Nuevos enlaces a las notas de la versión traducida y reporta un error de traducción
- Mejorado el menú de comandos de DevTools
Chrome 94
- Utiliza DevTools en tu idioma preferido
- Nest Hub en la lista de dispositivos
- Ensayos de origen en la vista de detalle de Frame
- Nueva insignia de consultas de contenedor CSS
- Nuevo checkbox para invertir los filtros del panel de Red
- Eliminación próxima (
deprecated
) de la barra lateral de la Consola - Mostrar cabecera
Set-Cookie
sin procesar en la pestaña Problemas y el panel Red - Visualización coherente de los descriptores de acceso nativos como propiedades propias en la consola
- Pila de error más adecuada para scripts en línea con #sourceURL
- Cambiar el formato de color en el panel Computado
- Sustitución de tooltips personalizados por tooltips nativos en HTML
- [Experimental] Ocultar problemas en la pestaña de Problemas
Chrome 93
- Consultas de contenedores CSS editables en el panel de Estilos
- Previsualización de paquetes Web en el panel de Red
- Depuración de la API de Informes de Atribución
- Mejor manejo de cadenas de texto en la Consola
- Mejoras en la depuración de CORS
- Lighthouse 8.1
- Muestra una nueva nota URL en el panel de Manifiesto
- Arreglados los selectors CSS coincidentes
- Mostrando las respuestas JSON con formato legible
Chrome 92
- Editor de CSS Grid
- Soporte para la redeclaración de
const
en la consola - Visor de orden de los elementos
- Nuevos accesos directos a los detalles de un iframe
- Mejor soporte para depurar CORS
- Renombrar etiqueta XHR por Fetch/XHR
- Filtra los recursos de tipo Wasm en el panel de Network
- Reporta problemas con el modo Quirks en la pestaña de Issues
- Reporta problemas con el modo Quirks en la pestaña de Issues
- Incluye las intersecciones computadas en el panel de Performance
- Lighthouse 7.5 en el panel de Lighthouse
- "Restart frame" queda obsoleto en el menú contextual de la pila de llamada
- [Experimental] Monitor de protocolo
- [Experimental] Grabadora de Puppeteer