Novedades de Herramientas para desarrolladores (Chrome 104)

Jecelyn Yeen

Reinicia el marco durante la depuración

Volvió la función Restart frame. Puedes volver a ejecutar el código anterior cuando se pausa en algún lugar 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 Call stack en el panel Debugger, haz clic con el botón derecho en toggleColorScheme y selecciona Restart frame.

Reinicia el marco durante la depuración

Error de Chromium: 1303521

Opciones de reproducción lenta en el panel de la grabadora

Ahora puedes volver a 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 paso en pantalla.

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

Opciones de reproducción lenta en el panel de la grabadora

Error de Chromium: 1306756

Compila una extensión para el panel de la 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 grabador para aprender a compilar una.

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

extensión personalizada para el panel de Grabadora

Error de Chromium: 1325751

Agrupar 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 se desarrollan aplicaciones web con frameworks (por ejemplo, React o Angular), puede ser difícil navegar por los archivos fuente debido a los archivos reducidos que generan las herramientas de compilación (por ejemplo, Webpack o Vite).

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

  • Autor. Son similares a los archivos fuente que ves en tu IDE. DevTools genera estos archivos en función de los mapas de origen (que proporcionan tus herramientas de compilación).
  • Implementada. Son los archivos reales que lee el navegador. Por lo general, estos archivos se reducen.

Pruébalo con esta demostración de React.

Agrupar archivos por escrito / implementado en el panel Sources

Error de Chromium: 960909

Nueva métrica de tiempos del usuario en el panel Estadísticas de rendimiento

Visualiza las marcas performance.measure() en tu grabación con la nueva pista Tiempo del usuario 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 segmento Tiempo del usuario se muestra en la grabación. Haz clic en el elemento de tiempos para ver sus detalles en el panel lateral.

Seguimiento de los tiempos de usuario en el panel Estadísticas de rendimiento

Error de Chromium: 1322808

Cómo revelar el espacio asignado de un elemento

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

Este ejemplo contiene tarjetas con algunos slots con nombre. Inspecciona la ranura person-occupation de una tarjeta y haz clic en la insignia slot junto a ella para revelar la ranura asignada.

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

Cómo revelar el espacio asignado de un elemento

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 pthread de Emscripten. Con esta función, los desarrolladores pueden probar el rendimiento de sus aplicaciones con diferentes recuentos de núcleos.

Simula la simultaneidad del hardware para las grabaciones de rendimiento

Error de Chromium: 1297439

Obtener una vista previa de un valor que no sea de color cuando se completan automáticamente 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.

Obtener una vista previa de un valor que no sea de color cuando se completan automáticamente las variables de CSS

Error de Chromium: 1285091

Identifica los marcos de bloqueo en el panel de la memoria caché atrás/adelante

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

Identifica los fotogramas de bloqueo en el panel de la memoria caché atrás/adelante

Error de Chromium: 1288158

Sugerencias de autocompletar mejoradas para objetos JavaScript

La finalización automática para las propiedades de objetos de JavaScript ahora se muestra según este orden:

  1. Propiedades enumerables propias
  2. Propiedades propias no enumerables
  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 heredadas, y todas las propiedades heredadas tenían la misma prioridad.

Sugerencias de autocompletar mejoradas para objetos JavaScript

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> intercalado con anotaciones sourceURL.
  • El depurador ahora resuelve las variables centradas en el bloque en la vista Alcance con mapas de origen. Resuelve las variables centradas en el bloque
  • El depurador ahora resuelve las variables en las funciones de flecha en la vista Alcance con mapas de origen. Resuelve las variables en las funciones de flecha

Problemas de Chromium: 1329113 y 1322115

Otros aspectos destacados

Estas son algunas correcciones importantes de esta versión:

  • Se corrigió la configuración de Autocompletado para el panel Fuentes. Anteriormente, la función de autocompletar siempre estaba activada, incluso si la configuración estaba inhabilitada. (1323286)
  • Se actualizó la pestaña Manifiesto en el panel Aplicación para analizar el formato de esquema de colores más reciente. (1318305)
  • Se mejoraron las sugerencias para los problemas de bloqueo de renderización de <script async> en el panel Estadísticas de rendimiento. Anteriormente, DevTools sugería add async attribute to the script tag, aunque la secuencia de comandos ya está marcada como asíncrona. (1334096).
  • El panel Estadísticas de rendimiento ahora detecta iframes como posibles causas de los cambios de diseño. Puedes ver los detalles del iframe en el panel Detalles. (1328873).
  • Cuando se abre un archivo en el menú de comandos, los archivos creados por el autor (archivos generados por los mapas de origen) ahora tienen una clasificación más alta, por lo que aparecen por encima de las secuencias de comandos implementadas 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 plataformas web de vanguardia y te ayudan a encontrar problemas en tu sitio antes que tus usuarios.

Comunícate con el equipo de Chrome DevTools

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

Novedades de DevTools

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