Novedades de Herramientas para desarrolladores (Chrome 104)

Jecelyn Yeen

Cómo reiniciar el marco durante la depuración

Regresó la función Reiniciar el marco. Puedes volver a ejecutar el código anterior cuando se detenga en algún punto de una función. Anteriormente, esta función dejó de estar disponible y se quitó en Chrome 92 debido a problemas de estabilidad.

En este ejemplo, el depurador se detuvo inicialmente 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, expande la sección Pila de llamadas en el panel Depurador, haz clic con el botón derecho en toggleColorScheme y selecciona Reiniciar marco.

Error de Chromium: 1303521

Opciones de reproducción lenta en el panel de Grabadora

Ahora puedes reproducir los flujos de usuarios a una velocidad más lenta: lenta, muy lenta y extremadamente lenta. Estas opciones te permiten observar mejor cada repetición de pasos en la pantalla.

Abre el panel de Grabadora y comienza una nueva grabación. Una vez que finalice la grabación, haz clic en el botón desplegable Volver a reproducir. Selecciona una velocidad para iniciar la repetición.

Error de Chromium: 1306756

Crea una extensión para el panel de Grabadora

Ahora puedes compilar o instalar una extensión de Chrome para exportar secuencias de comandos de repetición en tu formato favorito. Consulta la documentación de la API de la extensión de Recorder para obtener información sobre cómo compilar una.

Para instalar una extensión de demostración, sigue estos pasos que se describen en la documentación.

Error de Chromium: 1325751

Agrupa los archivos por escrito / implementado en el panel Sources

Habilita la nueva opción Group files by Authored / Deployed para organizar tus archivos en el panel Sources. Cuando desarrollas aplicaciones web con frameworks (por ejemplo, React o Angular), puede ser difícil navegar por los archivos fuente debido a los archivos minimizados que generan las herramientas de compilación (por ejemplo, Webpack o Vite).

Con esta casilla de verificación, puedes agrupar los archivos en 2 categorías para buscarlos más rápido:

• Creado. Es similar a los archivos fuente que ves en tu IDE. DevTools genera estos archivos en función de los mapas de origen (proporcionados por tus herramientas de compilación).
• Implementado. Son los archivos reales que lee el navegador. Por lo general, estos archivos están minimizados.

Pruébalo con esta demostración de React.

Error de Chromium: 960909

Nuevo registro User Timings en el panel Estadísticas de rendimiento

Visualiza las marcas performance.measure() en tu grabación con el nuevo segmento User Timings en el panel Estadísticas de rendimiento.

Por ejemplo, esta página web usa el método performance.measure() para calcular el tiempo transcurrido de la carga de texto.

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

Problema de Chromium: 1322808

Revela la ranura asignada de un elemento

Los elementos insertados en el panel Elements tienen una nueva insignia slot. Cuando depures problemas de diseño, usa esta función para identificar más rápido el elemento que afecta el diseño del nodo.

En este ejemplo, se incluyen tarjetas con algunos espacios con nombre. Inspecciona la ranura person-occupation de una tarjeta y haz clic en la insignia slot junto a ella para mostrar la ranura asignada.

Aprende a usar los elementos <template> y <slot> para crear una plantilla flexible que luego se pueda usar para completar el DOM de sombra de un componente web.

Error de Chromium: 1018906

Simula la simultaneidad del hardware para las grabaciones de rendimiento

El nuevo parámetro de configuración Hardware concurrency en el panel Performance permite a los desarrolladores configurar el valor que informa 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 grupo de subprocesos de Emscripten. Con esta función, los desarrolladores pueden probar el rendimiento de sus aplicaciones con diferentes cantidades de núcleos.

Error de Chromium: 1297439

Obtén una vista previa del valor no relacionado con el color cuando se autocompletan las variables de CSS

Cuando se completan automáticamente las variables de CSS, DevTools ahora propaga la variable que no es de color con un valor significativo para que puedas obtener una vista previa del tipo de cambio que tendrá el valor en el nodo.

Error de Chromium: 1285091

Cómo identificar los marcos de bloqueo en el panel Memoria caché atrás/adelante

El panel Caché de atrás/adelante del panel Aplicación tiene una nueva sección de marcos para ayudarte a identificar los marcos de bloqueo que pueden impedir que la página sea apta para la bfcache.

Problema de Chromium: 1288158

Se mejoraron las sugerencias de autocompletar para objetos de JavaScript

La función de autocompletado para las propiedades de objetos de JavaScript ahora se muestra 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 por sobre las heredadas, y todas las propiedades heredadas tenían la misma prioridad.

Error de Chromium: 1299241

Mejoras en los mapas de origen

Estas son algunas correcciones en los mapas de origen para mejorar la experiencia general de depuración:

• Los puntos de interrupción ahora funcionan en <script> intercalados con anotaciones sourceURL.
• Ahora, el depurador resuelve las variables con alcance 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.

Problemas de Chromium: 1329113, 1322115

Otros aspectos destacados

Estas son algunas correcciones destacadas en esta versión:

• Se corrigió el parámetro de configuración Autocompletado del panel Fuentes. Anteriormente, la función de autocompletar siempre estaba activada, incluso si el parámetro de configuración estaba inhabilitado. (1323286)
• Se actualizó la pestaña Manifest en el panel Application para analizar el formato del esquema de color más reciente. (1318305)
• Se mejoraron las sugerencias para los problemas de bloqueo de la renderización de <script async> en el panel Estadísticas de rendimiento. Anteriormente, DevTools sugería add async attribute to the script tag, aunque el script ya estuviera marcado como asíncrono. (1334096)
• El panel Estadísticas de rendimiento ahora detecta los elementos iframe como posibles causas de los cambios de diseño. Puedes ver los detalles del iframe en el panel Detalles. (1328873)
• Cuando se selecciona Abrir archivo en el menú Comando, los archivos creados (archivos generados por mapas de origen) ahora se clasifican más alto para que aparezcan sobre los secuencias de comandos implementados con nombres similares. (1312929)

Descarga los canales de vista previa

Considera usar Chrome Canary, Dev o Beta como tu navegador de desarrollo predeterminado. Estos canales de versión preliminar te brindan acceso a las funciones más recientes de DevTools, te permiten probar las APIs de vanguardia de la plataforma web y te ayudan a encontrar problemas en tu sitio antes de que lo hagan tus usuarios.

Comunícate con el equipo de Herramientas para desarrolladores de Chrome

Usa las siguientes opciones para hablar sobre las funciones nuevas, las actualizaciones o cualquier otro tema relacionado con Herramientas para desarrolladores.

• Envíanos tus comentarios y solicitudes de funciones a crbug.com.
• Informa un problema de Herramientas para desarrolladores con more_vert Más opciones > Ayuda > Informar un problema de Herramientas para desarrolladores en Herramientas para desarrolladores.
• Envía un tuit a @ChromeDevTools.
• Deja comentarios en los videos de Novedades de las Herramientas para desarrolladores de YouTube o en los videos de Sugerencias sobre las Herramientas para desarrolladores de YouTube.

Novedades de Herramientas para desarrolladores

Una lista de todo lo que se abordó en la serie Novedades de DevTools