Novedades de DevTools (Microsoft Edge 109)
Para consultar las características más recientes de Microsoft Edge DevTools y la extensión Microsoft Edge DevTools para Microsoft Visual Studio Code y Visual Studio, lea estos anuncios.
Para mantenerse al día y obtener las últimas características de DevTools, descargue una versión preliminar de Insiders de Microsoft Edge. Tanto si está en Windows, Linux o macOS, considere la posibilidad de usar Canary (u otro canal de versión preliminar) como explorador de desarrollo predeterminado. Las versiones Beta, Dev y Canary de Microsoft Edge se ejecutan como aplicaciones independientes, en paralelo con la versión estable y publicada de Microsoft Edge. Consulte Canales de Microsoft Edge Insider.
Para ver los anuncios más recientes, siga al equipo de Microsoft Edge en Twitter. Para notificar un problema con DevTools o solicitar una nueva característica, escriba un problema en el repositorio MicrosoftEdge/DevTools .
Importación y exportación de las instancias de DevTools con la nueva característica de seguimientos mejorados
En Microsoft Edge 109, puede activar la nueva configuración para exportar seguimientos mejorados desde las herramientas de rendimiento y memoria . Estos seguimientos mejorados incluyen más información, como:
- Mensajes registrados en la consola.
- JavaScript que se ejecutaba en la página en el momento de la grabación.
- Instantáneas del DOM.
Al guardar perfiles de rendimiento, instantáneas de montón, escalas de tiempo de asignación o muestreo de asignación, ahora puede exportar un nuevo .devtools formato de archivo. Al importar el .devtools archivo, se abre una nueva instancia de DevTools, con el estado de las herramientas Elements, Console y Sources conservadas. Estos seguimientos mejorados ofrecen una nueva forma eficaz de colaborar y compartir la información en DevTools.
Para probar la característica de seguimientos mejorados:
En DevTools, haga clic en el botón Configuración (
).En la sección Persistencia de la página Configuración de preferencias , active la casilla Exportar seguimientos de memoria y rendimiento mejorados :
Si desea conservar mensajes de consola, JavaScript o instantáneas DOM, active las casillas correspondientes.
Haga clic en el botón Cerrar (x) en Configuración de DevTools.
En la herramienta Rendimiento , realice una grabación.
Haga clic en el botón Guardar perfil (
).En el cuadro de diálogo Guardar como , guarde el nuevo
.devtoolsarchivo.
Importar:
Para importar el
.devtoolsarchivo desde la herramienta Rendimiento , haga clic en el botón Cargar perfil (
):
Se abre una nueva ventana DevTools que contiene un subconjunto de las herramientas, incluida la herramienta Rendimiento cargada con el perfil que acaba de grabar. Las herramientas Elementos, Consola y Orígenes también se rellenan previamente con su estado conservado:
También puede exportar desde la herramienta Memoria con el nuevo .devtools formato de archivo. Esta es una nueva característica con la que el equipo de DevTools está experimentando activamente, así que envíenos sus comentarios en el experimento [Comentarios] Seguimientos mejorados #122.
Vea también:
Depuración de eventos de estilo recalcular de ejecución prolongada con nuevas estadísticas de selector
En Microsoft Edge 109, en la herramienta Rendimiento , puede activar la opción Habilitar instrumentación de representación avanzada (lenta) en la herramienta Rendimiento para acceder a la nueva característica de estadísticas del selector.
Con esta opción activada:
Seleccione Grabar y, a continuación, ejecute el escenario que desea mejorar en su sitio web o aplicación.
Seleccione Detener.
Seleccione un evento Recalcular estilo . En la sección inferior de la herramienta Rendimiento , seleccione la pestaña Estadísticas del selector :
La pestaña Estadísticas del selector proporciona una lista de todos los selectores CSS calculados por el motor del explorador durante el evento Recalcular estilo . Puede ordenar los selectores por el tiempo transcurrido que tardaron en procesarse o por el número de elementos que coincidieron (la columna Recuento de coincidencias ). Use estos datos para:
- Busque selectores que tardan mucho tiempo en procesarse y simplifiquen el explorador.
- Haga que los selectores sean más específicos para mejorar el rendimiento.
Vea también:
- La verdad sobre el rendimiento del selector CSS : entrada de blog
- [Comentarios] Explicación del seguimiento del rendimiento del selector · Problema n.º 98
- Análisis del rendimiento del selector CSS durante eventos de recalcular estilo
Seguimiento de los objetos descartados por la recolección de elementos no utilizados al asignar el muestreo
En Microsoft Edge 109, el tipo de generación de perfiles de muestreo de asignación de la herramienta Memoria ahora tiene dos opciones nuevas:
Incluir objetos descartados por gc principal.
Incluir objetos descartados por gc secundaria.
Sin seleccionar estas opciones, la herramienta Memoria seguirá funcionando como antes, notificando las asignaciones que siguen activas al final de la sesión de generación de perfiles. En este modo, el muestreo de asignación no realiza un seguimiento de los objetos generados y recolectores de elementos no utilizados (GC'd) y, a continuación, desaparecen.
Seleccione ambas opciones si desea realizar un seguimiento de los elementos no utilizados que está generando el sitio web o la aplicación. En el perfil resultante, podrá ver los elementos no utilizados generados por las funciones de JavaScript que luego fueron GC'd. Use estas opciones si desea reducir la cantidad de elementos no utilizados que está generando el código. Para obtener más información sobre las diferencias entre gc principal y menor, consulte Trash talk: the Orinoco garbage collector( Charla de la papelera: recolector de elementos no utilizados de Orinoco).
Vea también:
- Investigue la asignación de memoria por función en Corregir problemas de memoria.
- Reducir elementos no utilizados con configuraciones adicionales para el muestreo de asignación en Corregir problemas de memoria.
Pruebe la nueva extensión del visualizador de instantáneas de montón para DevTools.
Agregue la nueva extensión Del visualizador de instantáneas de montón a Microsoft Edge para obtener nuevas visualizaciones de los datos que se encuentra en los archivos de instantáneas del montón. La instalación de esta extensión agrega una nueva herramienta de visualizador de instantáneas de montón en DevTools. En la herramienta Visualizador de instantáneas de montón , puede cargar un archivo de instantáneas de montón para verlo representado como un gráfico dirigido o como un árbol. Estas nuevas visualizaciones permiten explorar la cadena de retenes desde la raíz de recolección de elementos no utilizados (GC) a un nodo individual.
Vista de gráfico:
Vista de árbol:
Vea también:
- Visualizador de instantáneas de montón : Almacén de complementos de Microsoft Edge.
Mejoras en la vista rápida en modo de enfoque
Hemos escuchado sus comentarios y hemos mejorado las opciones de vista rápida en el modo de enfoque. En lugar de ofrecer solo un subconjunto de las herramientas en una lista desplegable vista rápida , ahora puede seleccionar cualquier herramienta DevTools haciendo clic en el botón Más herramientas (
), como en la barra de herramientas principal de DevTools. Cargue cualquier herramienta en el panel Vista rápida de DevTools para mostrar varias herramientas al mismo tiempo.
El estado de la barra de herramientas de vista rápida persiste en las sesiones de DevTools. El panel Vista rápida se contrae automáticamente si abre la misma herramienta en el panel superior de DevTools.
Vaya directamente a las pestañas Estilos y Estilos calculados de la herramienta Elementos.
Se produjo un problema de accesibilidad en el que los usuarios de comandos de voz no podían navegar a la pestaña Estilos o a la pestaña Calculado de la herramienta Elementos . Ahora puede acceder a estas pestañas a través de dos nuevos comandos en el menú Comandos:
- Mostrar estilos
- Mostrar estilos calculados
Vea también:
Anuncios del proyecto de Chromium
Microsoft Edge 109 también incluye las siguientes actualizaciones del proyecto de Chromium: