Novedades de Herramientas para desarrolladores (Chrome 104)

Jecelyn Yeen

Reiniciar fotograma durante la depuración

Vuelve la función Reiniciar marco. Puedes volver a ejecutar el código anterior cuando estés pausado en alguna parte de una función. Esta función dejó de estar disponible y se quitó en Chrome 92 debido a problemas de estabilidad.

En este ejemplo, el depurador se pausó 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 Debugger, haz clic con el botón derecho en toggleColorScheme y selecciona Reiniciar marco.

Problema de Chromium: 1303521

Opciones de repetición lenta en el panel de Grabadora

Ahora puedes volver a reproducir flujos de usuarios a una velocidad menor: lenta, muy lenta y extremadamente lenta. Estas opciones te permiten ver mejor la repetición de cada paso en la pantalla.

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

Problema de Chromium: 1306756

Compila 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 extensión de Grabadora para aprender a crear una.

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

Problema de Chromium: 1325751

Agrupa los archivos por escrito / implementado en el panel Sources.

Habilita la nueva opción Agrupar archivos por escrito / implementado para organizar tus archivos en el panel Fuentes. Cuando se desarrollan aplicaciones web con frameworks (por ejemplo, React, Angular), puede resultar difícil navegar por los archivos fuente debido a los archivos reducidos que generan las herramientas de compilación (por ejemplo, Webpack, 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. Herramientas para desarrolladores genera estos archivos en función de mapas de orígenes (proporcionados por tus herramientas de compilación).
• Implementada. Son los archivos reales que lee el navegador. Por lo general, estos archivos están reducidos.

Pruébalo con esta demostración de React.

Problema de Chromium: 960909

Nuevo seguimiento de Tiempos de usuario en el panel Estadísticas de rendimiento

Visualiza las marcas performance.measure() de tu grabación con el nuevo segmento User Timings en el panel Performance Insights.

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

Cuando comiences a medir la carga de la página, se mostrará el seguimiento Tiempos de usuario en la grabación. Haz clic en el elemento de tiempos para ver los detalles en el panel lateral.

Problema de Chromium: 1322808

Mostrar el espacio asignado de un elemento

Los elementos espaciados en el panel Elements tienen una nueva insignia de 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.

Este ejemplo contiene tarjetas con algunas ranuras con nombre. Examina el espacio person-occupation de una tarjeta y haz clic en la insignia slot que aparece junto a ella para ver el espacio asignado.

Obtén más información sobre cómo usar los elementos <template> y <slot> para crear una plantilla flexible que luego se pueda usar para propagar el shadow DOM de un componente web.

Problema de Chromium: 1018906

Simula la simultaneidad de hardware para las grabaciones de rendimiento

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

Algunas aplicaciones usan navigator.hardwareConcurrency para controlar el grado de paralelismo de la 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.

Problema de Chromium: 1297439

Vista previa del valor sin color al autocompletar las variables de CSS

Cuando se autocompletan variables de CSS, las Herramientas para desarrolladores ahora completan la variable sin color con un valor significativo para que puedas obtener una vista previa del tipo de cambio que tendrá el valor en el nodo.

Problema de Chromium: 1285091

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

El panel Memoria caché atrás/adelante del panel Aplicación tiene marcos nuevas para ayudarte a identificar marcos de bloqueo que podrían impedir que la página sea apta para la bfcache.

Problema de Chromium: 1288158

Se mejoraron las sugerencias de autocompletar para los objetos JavaScript

El autocompletado de las propiedades del objeto de JavaScript ahora se muestra en función de este orden:

1. Propiedades enumerables propias
2. Propiedad de propiedades no enumerables
3. Propiedades enumerables heredadas
4. Propiedades heredadas no enumerables

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

Problema de Chromium: 1299241

Mejoras en los mapas de fuentes

A continuación, se incluyen algunas correcciones en los mapas de origen para mejorar la experiencia general de depuración:

• Las interrupciones ahora funcionan en <script> intercalado con las anotaciones sourceURL.
• El depurador ahora resuelve variables con alcance de bloque en la vista Scope con mapas de origen.
• El depurador ahora resuelve variables en funciones de flecha en la vista Scope con mapas de origen.

Problemas de Chromium: 1329113, 1322115

Otros aspectos destacados

Estas son algunas correcciones notables en esta versión:

• Se corrigió la configuración de Auto-completion para el panel Sources. Anteriormente, la función de autocompletar estaba siempre activada, incluso la configuración estaba inhabilitada. (1323286).
• Se actualizó la pestaña Manifest en el panel Application 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, las Herramientas para desarrolladores sugerían add async attribute to the script tag, a pesar de que la secuencia de comandos ya estaba marcada como asíncrona. (1334096).
• El panel Estadísticas de rendimiento ahora detecta los iframes como posibles causas de los cambios en el diseño. Puedes ver los detalles del iframe en el panel Detalles. (1328873).
• Cuando abres el archivo en el menú de comandos, los archivos creados (archivos generados por mapas de origen) ahora tienen una clasificación superior, por lo que aparecen arriba de secuencias de comandos implementadas con nombres similares. (1312929).

Descarga los canales de vista previa

Considera usar Chrome Canary, Dev o Beta como navegadores de desarrollo predeterminados. Estos canales de vista previa te brindan acceso a las funciones más recientes de Herramientas para desarrolladores, prueban API de plataformas web de vanguardia y detectan problemas en tu sitio antes que los usuarios.

Comunicarse con el equipo de Herramientas para desarrolladores de Chrome

Usa las siguientes opciones para hablar sobre las nuevas funciones y los cambios en la publicación, o cualquier otra cosa relacionada con Herramientas para desarrolladores.

• Para enviarnos sugerencias o comentarios, accede a crbug.com.
• Informa un problema en Herramientas para desarrolladores con Más opciones   > Ayuda > Informa problemas de Herramientas para desarrolladores en Herramientas para desarrolladores.
• Twittea a @ChromeDevTools.
• Deja comentarios en nuestros videos de YouTube de Herramientas para desarrolladores o en videos de YouTube de las Sugerencias de las Herramientas para desarrolladores.

Novedades de Herramientas para desarrolladores

Una lista de todo lo que se ha abordado en la serie Novedades de Herramientas para desarrolladores.