| layout | title | authors | date | updated | description | hero | alt | tags | ||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
layouts/blog-post.njk |
Qué hay de nuevo en DevTools (Chrome 104) |
|
2022-07-13 |
2022-07-13 |
Reiniciar el frame durante la depuración, opciones de reproducción lenta en el panel Grabador y más. |
image/dPDCek3EhZgLQPGtEG3y0fTn4v82/9Ao1OaeKd2KqBwL1JyE7.jpg |
|
Gracias por la traducción Carlos Caballero y por la revisión Miguel Ángel.
{% Partial 'devtools/banner.md' %}
{% YouTube id='4RXWfw7Xg_Y' %}
¡Vuelve la función Reiniciar marco! Puede volver a ejecutar el código anterior cuando esté en pausa en cualquier lugar de una función. Anteriormente, esta función quedó obsoleta y se eliminó en Chrome 92 debido a problemas de estabilidad.
En este ejemplo, el depurador inicialmente se detuvo 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, expanda la sección Pila de llamadas en el panel Depurador, haga clic derecho en toggleColorScheme y seleccione Reiniciar marco
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/uBcTkuIaoHHTgJCiGNED.png", alt="Reiniciar el marco durante la depuración", width="800", height="499" %}
Chromium issue: 1303521
Ahora puede reproducir flujos de usuario a una velocidad más lenta: lenta, muy lenta y extremadamente lenta. Estas opciones le permiten observar mejor la repetición de cada paso en la pantalla.
Abrir el panel Grabadora e iniciar una nueva grabación. Una vez finalizada la grabación, haga clic en el botón desplegable Reproducir. Seleccione una velocidad para iniciar una repetición.
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/yLIIMlaew0EWfEYdDbXJ.png", alt="Opciones de reproducción lenta en el panel Grabador", width="800", height="486" %}
Chromium issue: 1306756
Ahora puede crear o instalar una extensión de Chrome para exportar secuencias de comandos de reproducción en su formato favorito. Consulte la documentación de API de extensión de grabadora para obtener información sobre cómo crear una.
Para instalar una extensión de demostración, siga estos pasos descritos en la documentación.
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/xRO1d79tBe0ILcBoD0oh.png", alt="extensión personalizada para el panel Grabador", width="800", height="486" %}
Chromium issue: 1325751
Habilite la nueva opción Agrupar archivos por Autor/Implementado para organizar sus archivos en el panel Fuentes. Al desarrollar aplicaciones web con marcos (por ejemplo, React, Angular), puede resultar difícil navegar por los archivos de origen debido a los archivos minimizados generados por las herramientas de compilación (por ejemplo, Webpack, Vite).
Con esta casilla de verificación, puede agrupar archivos en 2 categorías para una búsqueda de archivos más rápida:
- Autor. Similar a los archivos fuente que ve en su IDE. DevTools genera estos archivos en función de los mapas de origen (proporcionados por sus herramientas de compilación).
- Desplegada. Los archivos reales que lee el navegador. Por lo general, estos archivos se minimizan.
¡Pruébelo usted mismo con esta demostración de React!
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/5E1qbkl0Gx1REx7FdqEr.png", alt="Agrupar archivos por Autoría/Implementación en el panel Orígenes", width="800", height="521" %}
Chromium issue: 960909
Visualice las marcas performance.measure() en su grabación con la nueva pista User Timings en el panel Performance insights.
Por ejemplo, esta página web utiliza [performance.measure()](https://web.dev/articles/usertiming#calculating_measurements_ with_measure()) método para calcular el tiempo transcurrido de carga de texto.
Cuando comienzas a medir la carga de la página, la pista Tiempos de usuario se muestra en la grabación. Haga clic en el elemento de tiempos para ver sus detalles en el panel lateral.
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/nxPCp6UaiGWJCWWx4Laa.png", alt="Seguimiento de tiempos de usuario en el panel de información de rendimiento", width="800", height="499" %}
Chromium issue: 1322808
Los elementos que tienen asignado un slot en el panel Elementos tienen una nueva insignia slot. Al depurar problemas de diseño, use esta característica para identificar el elemento que afecta el diseño del nodo más rápido.
Este ejemplo contiene tarjetas con algunos slots con nombre. Inspeccione el slot de "ocupación de persona" de una tarjeta, haga clic en la insignia de "slot" junto a ella para revelar su slot asignado.
Aprende cómo usar y elementos para crear una plantilla flexible que luego se puede usar para completar el DOM oculto de un componente web.
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/7uQGHp9WoMCG1RIAkgIF.png", alt="Revelar el slot asignado de un elemento", width="800", height="486" %}
Chromium issue: 1018906
La nueva configuración de Simultaneidad de hardware en el panel Rendimiento permite a los desarrolladores configurar el valor informado por 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 conjunto de subprocesos de Emscripten. Con esta función, los desarrolladores pueden probar el rendimiento de su aplicación con diferentes recuentos de núcleos.
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/PyykGRv29FZbBKJAwWOW.png", alt="Simule la concurrencia de hardware para grabaciones de rendimiento", width="800", height="536" %}
Chromium issue: 1297439
Al completar automáticamente las variables CSS, DevTools ahora completa la variable sin color con un valor significativo para que pueda obtener una vista previa de qué tipo de cambio tendrá el valor en el nodo.
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/V4slwNtX9HwLPdAyr8JF.png", alt="Vista previa del valor sin color al autocompletar variables CSS", width="800", height="431" %}
Chromium issue: 1285091
El panel Caché atrás/adelante en el panel Aplicación tiene una nueva sección de marcos para ayudarlo a identificar los marcos de bloqueo que pueden estar impidiendo que la página sea elegible para bfcache.
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/UaRYEoYYoXhjSIn9seYK.png", alt="Identifique los marcos de bloqueo en el panel de caché Atrás/Adelante", width="800", height="486" %}
Chromium issue: 1288158
Las propiedades de autocompletado para objetos de JavaScript ahora se muestran según este orden:
- Propiedades enumerables propias
- Propiedades no enumerables propias
- Propiedades enumerables heredadas
- 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 propiedades heredadas, y todas las propiedades heredadas tenían la misma prioridad.
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/IvFTcOWrBOTTMRHqn8u4.png", alt="Sugerencias de autocompletado mejoradas para objetos de JavaScript", width="800", height="563" %}
Chromium issue: 1299241
Aquí hay algunas correcciones en los mapas de origen para mejorar la experiencia general de depuración:
- Los puntos de interrupción ahora funcionan en
<script>en línea con anotaciones sourceURL.
-
El depurador ahora resuelve las variables de ámbito de bloque en la vista Alcance con mapas de origen.
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/gv9cGnDMF7OVlXPWntII.png", alt="Resuelve variables de ámbito de bloque", width="800", height="532" %}
-
El depurador ahora resuelve variables en funciones de flecha en la vista Alcance con mapas de origen.
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/CZk0xjwMQAqknkW5G4Xf.png", alt="Resuelve variables en funciones de flecha", width="800", height="479" %}
Chromium issues: 1329113, 1322115
Estas son algunas correcciones notables en esta versión:
- Se corrigió la configuración de Autocompletar para el panel de Fuentes. Anteriormente, la función de autocompletar siempre estaba activada, incluso si la configuración estaba deshabilitada. (1323286)
- Se actualizó la pestaña Manifiesto en el panel Aplicación para analizar el último formato de combinación de colores. (1318305)
- Se mejoraron las sugerencias para los problemas de bloqueo de representación de
<script async>en el panel Perspectivas de rendimiento. Anteriormente, DevTools sugirió "agregar un atributo asíncrono a la etiqueta del script" aunque el script ya esté marcado como asíncrono. (1334096)
- El panel Perspectivas de rendimiento ahora detecta iframes como posibles causas de cambios de diseño. Puede ver los detalles del iframe en el panel Detalles. (1328873)
- Cuando abrir archivo en el Menú de comandos, los archivos creados (archivos generados por mapas de origen) ahora se clasifican más alto para que aparezcan encima de los scripts implementados con nombres similares. (1312929)
{% Partial 'devtools/reach-out.md' %} {% Partial 'devtools/whats-new.md' %}