Se usó la API de Cloud Translation para traducir esta página.

Novedades de Herramientas para desarrolladores (Chrome 104)

Jecelyn Yeen

Reiniciar el fotograma durante la depuración

Vuelve a la función Reiniciar fotograma. Puedes volver a ejecutar el código anterior cuando estés detenido en 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 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 Call pila en el panel Debugger, haz clic con el botón derecho en toggleColorScheme y selecciona Restart marco.

Reiniciar el fotograma durante la depuración

Problema de Chromium: 1303521

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

Ahora puedes volver a reproducir los flujos de usuarios a una velocidad menor, es decir, lenta, muy lenta o extremadamente lenta. Estas opciones te permiten observar mejor la reproducción de cada paso en la pantalla.

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

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

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 reproducción en tu formato favorito. Consulta la documentación de la API de extensión de Grabadora 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

Problema de Chromium: 1325751

Agrupar archivos por Autor / Implementado en el panel de fuentes

Habilita la nueva opción Agrupar archivos por creado / implementado para organizar tus archivos en el panel de fuentes. Cuando se desarrollan aplicaciones web con frameworks (por ejemplo, React o 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 archivos en 2 categorías para una búsqueda más rápida:

De autor. Es similar a los archivos de origen que ves en tu IDE. Herramientas para desarrolladores genera estos archivos según los mapas de origen (proporcionados por tus herramientas de compilación).
Implementado. Los archivos reales que lee el navegador. Por lo general, estos archivos están reducidos.

Pruébalo con esta demostración de React.

Agrupar archivos por Autor / Implementado en el panel de fuentes

Problema de Chromium: 960909

Nuevo segmento Tiempos de usuario (User Timings) en el panel de estadísticas de rendimiento

Visualiza las marcas de performance.measure() en la 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 carga del texto.

Cuando comiences a medir la carga de la página, el segmento User Timings aparecerá en la grabación. Haz clic en el elemento de tiempos para ver sus detalles en el panel lateral.

Seguimiento de Tiempos de usuario en el panel de estadísticas de rendimiento

Problema de Chromium: 1322808

Mostrar el espacio asignado de un elemento

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

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

Obtén 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.

Mostrar el espacio asignado de un elemento

Problema de Chromium: 1018906

Cómo simular la simultaneidad de hardware para las grabaciones de rendimiento

El nuevo parámetro de configuración 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 su aplicación, por ejemplo, a fin de 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.

Cómo simular la simultaneidad de hardware para las grabaciones de rendimiento

Problema de Chromium: 1297439

Obtener una vista previa del valor sin color al completar automáticamente las variables de CSS

Cuando se autocompletan las variables de CSS, Herramientas para desarrolladores completa la variable que no es de color con un valor significativo, de modo que puedes obtener una vista previa del tipo de cambio que tendrá el valor en el nodo.

Obtener una vista previa del valor sin color al completar automáticamente las variables de CSS

Problema de Chromium: 1285091

Cómo identificar fotogramas de bloqueo en el panel de la memoria caché atrás/adelante

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

Cómo identificar fotogramas de bloqueo en el panel de la memoria caché atrás/adelante

Problema de Chromium: 1288158

Sugerencias de autocompletado mejoradas para objetos JavaScript

El autocompletado de las propiedades de los objetos de JavaScript ahora se muestra en este orden:

Propiedades que pueden enumerarse propias
Propiedad no enumerable
Propiedades heredadas que se pueden enumerar
Propiedades heredadas no enumerables

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

Sugerencias de autocompletado mejoradas para objetos JavaScript

Problema de Chromium: 1299241

Mejoras en los mapas de fuentes

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

Los puntos de interrupción ahora funcionan intercalados <script> con anotaciones sourceURL
El depurador ahora resuelve las variables con alcance de bloque en la vista Scope con mapas de orígenes.
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 de esta versión:

Se corrigió la configuración de Autocompletar para el panel Fuentes. Anteriormente, la función de autocompletar siempre activa estaba inhabilitada, incluso aunque la opción de configuración estuviera inhabilitada. (1323286).
Se actualizó la pestaña Manifiesto en el panel Application para analizar el formato más reciente del esquema de colores. (1318305).
Se mejoraron las sugerencias sobre los problemas de bloqueo de renderización de <script async> en el panel Estadísticas de rendimiento. Anteriormente, 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 de diseño. Puedes ver los detalles del iframe en el panel Detalles. (1328873).
Cuando se abre archivo en el menú Comandos, los archivos de autor (archivos generados por mapas de origen) ahora tienen una clasificación más alta, de modo que aparezcan sobre secuencias de comandos implementadas con nombres similares. (1312929).

Descarga los canales de vista previa

Considera usar Canary, Dev o Beta de Chrome como tu navegador de desarrollo predeterminado. Estos canales de vista previa te brindan acceso a las funciones más recientes de Herramientas para desarrolladores, prueba APIs de plataformas web de vanguardia y encuentra problemas en tu sitio antes que tus usuarios.

Cómo comunicarse con el equipo de Herramientas para desarrolladores de Chrome

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

Envíanos tus sugerencias o comentarios a través de crbug.com.
Informa un problema en Herramientas para desarrolladores mediante Más opciones > Ayuda > Informar problemas con Herramientas para desarrolladores en Herramientas para desarrolladores.
Envía un tweet a @ChromeDevTools.
Deja comentarios en los videos de YouTube de las Novedades de las Herramientas para desarrolladores o en las sugerencias de Herramientas para desarrolladores (videos de YouTube).