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 detiene 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 Pila de llamadas en el panel Depurador, haz clic con el botón derecho en toggleColorScheme y selecciona Reiniciar marco.

Cómo reiniciar el marco durante la depuración

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.

Opciones de reproducción lenta en el panel de Grabadora

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.

extensión personalizada para el panel de Grabadora

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:

  • Autor Es similar a los archivos fuente que ves en tu IDE. Las Herramientas para desarrolladores generan estos archivos en función de los mapas de fuentes (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.

Agrupa los archivos por escrito / implementado en el panel Sources

Error de Chromium: 960909

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

Visualiza las marcas de performance.measure() en tu grabación con el nuevo segmento Tiempos de 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 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.

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

Problema de Chromium: 1322808

Revelar la ranura asignada de un elemento

Los elementos ranurados 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.

Revelar la ranura asignada 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 subprocesos de Emscripten. Con esta función, los desarrolladores pueden probar el rendimiento de sus aplicaciones con diferentes cantidades de núcleos.

Simula la simultaneidad del hardware para las grabaciones de rendimiento

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.

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

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 en el 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.

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

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.

Se mejoraron las sugerencias de autocompletar para objetos de 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> intercalados con anotaciones sourceURL.
  • Ahora, el depurador resuelve las variables con alcance de bloque en la vista Alcance con mapas de origen. Resuelve variables con alcance de bloque
  • El depurador ahora resuelve variables en funciones de flecha en la vista Alcance con mapas de origen. Resuelve variables en funciones de flecha

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 Autocompletar 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 async. (1334096)
  • El panel Estadísticas de rendimiento ahora detecta los elementos iframe como posibles causas de cambios de diseño. Puedes ver los detalles del iframe en el panel Detalles. (1328873)
  • Cuando abres un archivo en el menú de comandos, los archivos creados (archivos generados por mapas de origen) ahora se clasifican más alto, por lo que aparecen 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 analizar las nuevas funciones, las actualizaciones o cualquier otro tema relacionado con las Herramientas para desarrolladores.

Novedades de Herramientas para desarrolladores

Una lista de todo lo que se abordó en la serie Novedades de las Herramientas para desarrolladores