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

# Reiniciar el marco durante la depuración

¡Vuelve la función Reiniciar marco! Puede volver a ejecutar el código anterior cuando esté en pausa en cualquier lugar de una función. Anteriormente, esta función quedó obsoleta y se eliminó en Chrome 92 debido a problemas de estabilidad.

En este ejemplo, el depurador inicialmente se detuvo en el punto de interrupción (línea 343) cerca del final de la función toggleColorScheme. Para reiniciar la depuración desde el principio de la función toggleColorScheme, expanda la sección Pila de llamadas en el panel Depurador, haga clic derecho en toggleColorScheme y seleccione Reiniciar marco

Chromium issue: 1303521

# Opciones de reproducción lenta en el panel Grabador

Ahora puede reproducir flujos de usuario a una velocidad más lenta: lenta, muy lenta y extremadamente lenta. Estas opciones le permiten observar mejor la repetición de cada paso en la pantalla.

Abrir el panel Grabadora e iniciar una nueva grabación. Una vez finalizada la grabación, haga clic en el botón desplegable Reproducir. Seleccione una velocidad para iniciar una repetición.

Chromium issue: 1306756

# Cree una extensión para el panel de la grabadora

Ahora puede crear o instalar una extensión de Chrome para exportar secuencias de comandos de reproducción en su formato favorito. Consulte la documentación de API de extensión de grabadora para obtener información sobre cómo crear una.

Para instalar una extensión de demostración, siga estos pasos descritos en la documentación.

Chromium issue: 1325751

Agrupar archivos por Autoría/Implementación en el panel Fuentes

Habilite la nueva opción Agrupar archivos por Autor/Implementado para organizar sus archivos en el panel Fuentes. Al desarrollar aplicaciones web con marcos (por ejemplo, React, Angular), puede resultar difícil navegar por los archivos de origen debido a los archivos minimizados generados por las herramientas de compilación (por ejemplo, Webpack, Vite).

Con esta casilla de verificación, puede agrupar archivos en 2 categorías para una búsqueda de archivos más rápida:

• Autor. Similar a los archivos fuente que ve en su IDE. DevTools genera estos archivos en función de los mapas de origen (proporcionados por sus herramientas de compilación).
• Desplegada. Los archivos reales que lee el navegador. Por lo general, estos archivos se minimizan.

¡Pruébelo usted mismo con esta demostración de React!

Chromium issue: 960909

# Nueva pista de tiempos de usuario en el panel de información de rendimiento

Visualice las marcas performance.measure() en su grabación con la nueva pista User Timings en el panel Performance insights.

Por ejemplo, esta página web utiliza [performance.measure()](https://web.dev/articles/usertiming#calculating_measurements_ with_measure()) método para calcular el tiempo transcurrido de carga de texto.

Cuando comienzas a medir la carga de la página, la pista Tiempos de usuario se muestra en la grabación. Haga clic en el elemento de tiempos para ver sus detalles en el panel lateral.

Chromium issue: 1322808

# Revelar el slot asignado de un elemento

Los elementos que tienen asignado un slot en el panel Elementos tienen una nueva insignia slot. Al depurar problemas de diseño, use esta característica para identificar el elemento que afecta el diseño del nodo más rápido.

Este ejemplo contiene tarjetas con algunos slots con nombre. Inspeccione el slot de "ocupación de persona" de una tarjeta, haga clic en la insignia de "slot" junto a ella para revelar su slot asignado.

Aprende cómo usar y elementos para crear una plantilla flexible que luego se puede usar para completar el DOM oculto de un componente web.

Chromium issue: 1018906

# Simule la concurrencia de hardware en las grabaciones de rendimiento

La nueva configuración de Simultaneidad de hardware en el panel Rendimiento permite a los desarrolladores configurar el valor informado por navigator.hardwareConcurrency.

Algunas aplicaciones usan navigator.hardwareConcurrency para controlar el grado de paralelismo de su aplicación, por ejemplo, para controlar el tamaño del conjunto de subprocesos de Emscripten. Con esta función, los desarrolladores pueden probar el rendimiento de su aplicación con diferentes recuentos de núcleos.

Chromium issue: 1297439

# Vista previa del valor sin color al autocompletar variables CSS

Al completar automáticamente las variables CSS, DevTools ahora completa la variable sin color con un valor significativo para que pueda obtener una vista previa de qué tipo de cambio tendrá el valor en el nodo.

Chromium issue: 1285091

# Identifique los marcos de bloqueo en el panel de caché Atrás/Adelante

El panel Caché atrás/adelante en el panel Aplicación tiene una nueva sección de marcos para ayudarlo a identificar los marcos de bloqueo que pueden estar impidiendo que la página sea elegible para bfcache.

Chromium issue: 1288158

# Sugerencias de autocompletado mejoradas para objetos de JavaScript

Las propiedades de autocompletado para objetos de JavaScript ahora se muestran según este orden:

1. Propiedades enumerables propias
2. Propiedades no enumerables propias
3. Propiedades enumerables heredadas
4. Propiedades no enumerables heredadas

Anteriormente, a los desarrolladores les resultaba más difícil encontrar propiedades relevantes porque la sugerencia solo favorecía las propiedades propias sobre las propiedades heredadas, y todas las propiedades heredadas tenían la misma prioridad.

Chromium issue: 1299241

# Mejoras en los mapas de origen

Aquí hay algunas correcciones en los mapas de origen para mejorar la experiencia general de depuración:

• Los puntos de interrupción ahora funcionan en <script> en línea con anotaciones sourceURL.

• El depurador ahora resuelve las variables de ámbito de bloque en la vista Alcance con mapas de origen.

  

• El depurador ahora resuelve variables en funciones de flecha en la vista Alcance con mapas de origen.

  

Chromium issues: 1329113, 1322115

# Destacados varios

Estas son algunas correcciones notables en esta versión:

• Se corrigió la configuración de Autocompletar para el panel de Fuentes. Anteriormente, la función de autocompletar siempre estaba activada, incluso si la configuración estaba deshabilitada. (1323286)

• Se actualizó la pestaña Manifiesto en el panel Aplicación para analizar el último formato de combinación de colores. (1318305)

• Se mejoraron las sugerencias para los problemas de bloqueo de representación de <script async> en el panel Perspectivas de rendimiento. Anteriormente, DevTools sugirió "agregar un atributo asíncrono a la etiqueta del script" aunque el script ya esté marcado como asíncrono. (1334096)

• El panel Perspectivas de rendimiento ahora detecta iframes como posibles causas de cambios de diseño. Puede ver los detalles del iframe en el panel Detalles. (1328873)

• Cuando abrir archivo en el Menú de comandos, los archivos creados (archivos generados por mapas de origen) ahora se clasifican más alto para que aparezcan encima de los scripts implementados con nombres similares. (1312929)

# 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 y end para propiedades CSS flexbox align-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 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