Novedades de DevTools (Microsoft Edge 114)

Estas son las características más recientes de DevTools de la versión estable de Microsoft Edge.

Sugerencia

La conferencia Microsoft Build 2023 fue del 23 al 25 de mayo de 2023. Obtenga más información sobre las nuevas características de depuración de memoria, rendimiento y producción en DevTools, así como nuevas funcionalidades para PWA en la barra lateral, WebView2 y complementos de chat, en los siguientes vídeos:

Vídeo: Novedades de DevTools 113 y 114

Imagen en miniatura del vídeo

Estadísticas del selector de agregados en la herramienta Rendimiento

Microsoft Edge 109 agregó la característica Estadísticas del selector a la herramienta Rendimiento . Puede usar los datos de las estadísticas del selector para comprender qué selectores CSS tardan más tiempo durante los eventos Recalcular estilo en la herramienta Rendimiento y contribuyen a un rendimiento lento.

En Microsoft Edge 114, ya no es necesario seleccionar un evento Recalcular estilo individual para ver los selectores que se han recalculado durante ese evento. En su lugar, la pestaña Estadísticas del selector en el panel inferior de la herramienta Rendimiento agrega automáticamente los datos en todos los eventos de Recalcular estilo en el perfil grabado. A medida que se acerca a partes específicas del perfil, la pestaña Estadísticas del selector se actualiza para mostrar solo los datos de la parte del perfil que está analizando actualmente.

Además, se ha agregado una nueva columna de Hoja de estilos a la pestaña Estadísticas del selector . La columna Hoja de estilos contiene un vínculo para cada selector a la hoja de estilo donde está definido el selector.

Las estadísticas de selector ahora se agregan en los eventos de Recalcular estilo dentro de la sección que se muestra actualmente del perfil grabado.

Gracias por usar la característica Estadísticas del selector y compartir sus comentarios con nosotros en GitHub Problema #98: [Comentarios] Explicación del seguimiento de rendimiento del selector

Vea también:

La herramienta Problemas y el panel Estilos advierten sobre las propiedades CSS que activan el diseño

DevTools ahora detecta y advierte sobre las propiedades CSS que pueden causar problemas de rendimiento basados en el diseño al usar animación CSS en la página web, como mover texto. El diseño es el proceso del navegador web para volver a calcular las posiciones y geometrías de los elementos del documento, para volver a representar parte o la totalidad del documento. Dado que el diseño es una operación de bloqueo del usuario en el explorador, se recomienda limitar el diseño tanto como sea posible para mantener el contenido web fluido y receptivo a la interacción.

Algunas propiedades CSS no desencadenan una operación de diseño, ya que se ejecutan en el hilo del compositor en el explorador, como la transformación y la opacidad. Sin embargo, incluso las propiedades CSS que no activan el diseño pueden desencadenar una operación Paint que, cuando se usa en combinación con animaciones CSS, puede provocar un impacto negativo en el rendimiento.

En el panel Estilos de la herramienta Elementos , se ha agregado un subrayado ondulado e información sobre herramientas en las propiedades CSS que activan las operaciones de diseño o pintura. Para ver el problema en una información sobre herramientas, mantenga el puntero sobre el subrayado ondulado:

Problema de diseño CSS en el panel Estilos

En la herramienta Problemas , en la categoría Rendimiento , se informa de un nuevo tipo de problema, como "Los cambios en esta propiedad activarán: 'Diseño', que puede afectar al rendimiento cuando se usa en el interior @Keyframes". Cuando use el panel Estilos , para abrir el problema en la herramienta Problemas , presione Mayús+clic en el subrayado ondulado de dicha propiedad, o bien haga clic con el botón derecho en el subrayado ondulado y, a continuación, seleccione Ver problemas. La herramienta Problemas se abre en el cajón (ahora panel Vista rápida ) en la parte inferior de DevTools:

Problema de diseño CSS en la herramienta Problemas

Vea también:

La herramienta Memoria puede cargar seguimientos mejorados de más de 1 GB

En versiones anteriores de Microsoft Edge, no se podía cargar un seguimiento mejorado de más de 1 GB. En Microsoft Edge 114, se ha corregido este problema. Ahora puedes cargar correctamente seguimientos mejorados de cualquier tamaño.

Los seguimientos mejorados son una característica experimental de Microsoft Edge que permite exportar e importar instancias enteras de DevTools, guardadas como .devtools archivos, con la mayor cantidad de estado posible conservada en las herramientas Memoria, Rendimiento, Elementos, Consola y Orígenes . Un .devtools archivo se abre en una instancia de DevTools independiente y carga la siguiente información de seguimiento, a la vez que conserva las referencias al código fuente:

  • Instantáneas del DOM.
  • Mensajes de consola.
  • Instantáneas de montón.
  • Perfiles de rendimiento.

Un seguimiento mejorado

Vea también:

La herramienta Memoria compara de forma más precisa dos instantáneas de montón

En la herramienta Memoria , puede tomar varias instantáneas del montón y compararlas para encontrar diferencias en los objetos del montón. En versiones anteriores de Microsoft Edge, la herramienta Memoria notificaba demasiados objetos nuevos y eliminados al comparar instantáneas de montón, porque la herramienta no realizaba un seguimiento coherente de los identificadores de objeto. En realidad, muchos de estos son probablemente los mismos objetos.

En Microsoft Edge 114, se ha corregido este problema al garantizar que se realice un seguimiento de los identificadores de objeto coherentes en varias instantáneas.

Comparación de dos instantáneas de montón en Microsoft Edge 114

Vea también:

Mejoras de accesibilidad para la herramienta de información general de CSS

En Microsoft Edge 112, la herramienta Información general de CSS se actualizó para mostrar una lista de selectores no sencillos al tomar una instantánea de información general del CSS de una página web. En Microsoft Edge 114, la sección Selectores no simples de la herramienta de información general de CSS ahora es más fácil de usar con tecnología de asistencia, como lectores de pantalla.

Al hacer clic en un selector o navegar a un selector y presionar ENTRAR, los lectores de pantalla ahora anuncian "Selector CSS copiado":

Navegación por la herramienta de información general de CSS con el teclado

Vea también:

La extensión DevTools para VS Code tiene una mejor compatibilidad con el modo de contraste alto

En versiones anteriores de la extensión Microsoft Edge DevTools para Visual Studio Code, en el modo de contraste alto, al mantener el puntero sobre los iconos dentro de las herramientas no se representaban los controles de la interfaz de usuario con suficiente contraste. Este problema se ha corregido.

Por ejemplo, en el panel Estilos de la herramienta Elementos , las casillas para aplicar estilos a los elementos ahora se procesan correctamente en el modo de contraste alto:

Mantenga el puntero sobre las casillas de verificación en el panel Estilos en modo de contraste alto en la extensión de VS Code

Además, en la herramienta Consola , iconos como Mostrar barra lateral de consola ahora se representan correctamente en el modo de contraste alto:

Mantenga el puntero sobre el botón Mostrar barra lateral de la consola en modo de contraste alto en la extensión de VS Code

Vea también:

Anuncios del proyecto de Chromium

Microsoft Edge 114 también incluye las siguientes actualizaciones del proyecto de Chromium:

Vea también

  • Se actualizó por última vez el