Qué hay de nuevo en DevTools (Chrome 97)

Gracias Miguel Ángel por la traducción y Carlos Caballero por la revisión.

# Función en vista previa: Nuevo panel de Grabadora

Use el nuevo panel de Grabadora para grabar, reproducir y medir flujos de usuario.

Abra el panel de Grabadora. Siga las instrucciones en la pantalla para iniciar una nueva grabación.

Por ejemplo, puede grabar el proceso de compra de café con esta demo de compra de café. Después de añadir un café y rellenar los detalles de pago, puede finalizar la grabación, reproducir el proceso o hacer clic en el botón Medir rendimiento para medir el flujo de usuario en el panel Rendimiento.

¡Vaya a la documentación del panel de Grabadora para aprender más con el tutorial paso a paso!

La Grabadora es una función de vista previa. Nuestro equipo está trabajando activamente en ella y estamos buscando su opinión para mejoras.

Chromium issue: 1257499

# Actualización de la lista de dispositivos en el Modo Dispositivo

Habilitar la barra de herramientas de dispositivo, más dispositivos modernos se han añadido en la lista de dispositivos. Seleccione un dispositivo para simular sus dimensiones.

Chromium issue: 1223525

# Autocompletado con Editar como HTML

La UI de Editar como HTML ahora soporta autocompletado y resaltado de sintaxis. En el panel Elementos, haga clic derecho en un elemento y seleccione Editar como HTML. Intente escribir una propiedad DOM (por ejemplo, id o aria), el autocompletado le ayudará a encontrar el nombre de la propiedad que está buscando.

Chromium issue: 1215072

# Mejorada la experiencia de depuración de código

Los números de las columnas ahora se incluyen en el error de salida en la Consola. Tener acceso fácil a los números de columnas es esencial para depurar especialmente con JavaScript minimizado.

Chromium issue: 1073064

# [Experimental] Sincronización de configuraciones de DevTools entre dispositivos

Sus ajustes en DevTools son ahora sincronizados entre dispositivos por defecto cuando activa la sincronización del perfil de Chrome. Puede cambiar las preferencias de sincronización de Devtools a través de Preferencias > Sincronización > Activar sincronización de ajustes.

Esta nueva opción hace más fácil trabajar entre dispositivos. Por ejemplo, los siguientes ajustes de apariencia son sincronizados de forma que tiene una experiencia consistente entre dispositivos y no necesita re-definir los mismos ajustes otra vez. Aprenda más sobre la función de sincronización en personalización DevTools.

Esta nueva función es experimental en este momento, el equipo está activamente trabajando en ella. Si tiene alguna sugerencia, por favor compártala con nosotros aquí.

Chromium issue: 1245541

# 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 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
• Destacados varios

# 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
• Destacados varios -->

# 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 y column-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

• Emule la función multimedia CSS de contraste
• Emula la función de tema oscuro automático de Chrome
• Copiar declaraciones como JavaScript en el panel Estilos
• Nueva pestaña de Payload en el panel Red
• Mejoras en la visualización de propiedades en el panel Propiedades
• Opción para ocultar errores CORS en la consola
• Vista previa y evaluación adecuadas de los objetos Intl en la consola
• Trazas de la pila asíncrona consistentes
• Mantener la barra lateral de la consola
• Panel 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