Nota:
El acceso a esta página requiere autorización. Puede intentar iniciar sesión o cambiar directorios.
El acceso a esta página requiere autorización. Puede intentar cambiar los directorios.
Estas son las características más recientes de DevTools de la versión estable de Microsoft Edge.
Sugerencia
La conferencia Microsoft Build 2022 tuvo lugar del 24 al 26 de mayo. Obtenga más información sobre las nuevas características de depuración de memoria, rendimiento y producción en DevTools y las nuevas funcionalidades de la plataforma web para PWA en los siguientes vídeos:
Vídeo: Microsoft Edge | Novedades de DevTools 102
Extensión DevTools: nuevo explorador con emulación de dispositivo y modo y compatibilidad con mapas de origen
La extensión Microsoft Edge DevTools para Visual Studio Code ahora tiene una vista previa del explorador que le permite emular diferentes dispositivos. Haga clic en el nuevo botón Emular características multimedia CSS (
) para obtener una vista previa del proyecto actual en diferentes modos, como Oscuro, Claro, Impresión y Alto contraste:
Haz clic en el nuevo botón Emular deficiencias visuales (
visuales) para probar fácilmente la accesibilidad, por ejemplo, para mostrar cómo se ve la página web con visión borrosa o deficiencias en la visión del color.
Otras características nuevas incluyen una forma más sencilla de alternar la duplicación de CSS, que ahora también admite mapas de origen. Esto significa que puede depurar y modificar CSS creado por Sass, React y otras abstracciones en vivo en el navegador y ver los cambios en los archivos de origen.
Vea también:
- Emulación de dispositivo y estado
- Asignar el código procesado al código de la fuente original para la depuración
- Edición de reflejo de CSS con mapas de origen: problemas conocidos y comentarios
Guardar todas las cadenas de una instantánea de montón en JSON
En Microsoft Edge 102, al tomar una instantánea de montón en la herramienta Memoria , ahora puede exportar todos los objetos de cadena de la instantánea a un archivo JSON. En la herramienta Memoria , en la sección Constructor , haga clic en el nuevo botón Guardar todo en archivo junto a la (string) entrada.
La herramienta Memoria exporta un archivo JSON que contiene todos los objetos de cadena de la instantánea del montón:
Vea también:
- Guarde y exporte cadenas de una instantánea de montón a JSON en Grabar instantáneas de montón con la herramienta Memoria (tipo de generación de perfiles "instantánea de montón").
Nuevos filtros para retenedores en la herramienta Memoria
En versiones anteriores de Microsoft Edge, los ciclos y los nodos internos se mostraban en la sección Retenedores de una instantánea de montón. Para ayudar a simplificar la ruta del retenedor, en Microsoft Edge 102, la sección Retenedores de la herramienta Memoria ahora tiene nuevos filtros para ocultar ciclos y ocultar nodos internos en la ruta del retenedor.
En la sección Retenedores , un nodo ciclado se indica al estar atenuado.
En la siguiente imagen, en el menú desplegable Filtrar bordes , Ocultar ciclo no está seleccionado, por lo que se muestra un nodo ciclado (atenuado):
En la imagen siguiente, en el menú desplegable Filtrar bordes , se ha seleccionado Ocultar ciclo para que no se muestre el nodo ciclado :
Los ciclos son nodos que aparecen al menos dos veces en una ruta de retención. Una aparición de un nodo es anterior en la ruta del retenedor y otras apariciones de ese nodo son posteriores en la ruta del retenedor. Para liberar memoria, lo más importante es eliminar la aparición del nodo que aparece primero en la ruta de retención. La segunda aparición y potencialmente las posteriores del nodo todavía se muestran en la sección Retenedores .
Los nodos internos son objetos específicos de V8 (el motor de JavaScript en Microsoft Edge). Los nodos internos también se muestran en la sección Retenedores .
Vea también:
- Ocultar ciclos en Grabar instantáneas de montón con la herramienta Memoria (tipo de generación de perfiles "instantánea de montón").
La información sobre herramientas Inspeccionar elemento ahora se puede conservar hasta que la descarte
Anteriormente, en la herramienta Elementos , la superposición del nodo seleccionado solo se mostraba al pasar el ratón por encima cuando se utilizaba la herramienta Inspeccionar (icono de la 
). El diseño anterior era difícil de usar con una lupa de pantalla u otras tecnologías de asistencia.
En Microsoft Edge 102, al usar la herramienta Inspeccionar y desplazarse por la página web representada, puede mantener mostrada la superposición Inspeccionar actual. Mantenga presionada la tecla Ctrl+Alt (Windows, Linux) o Ctrl+Opción (macOS) mientras se desplaza por la página web representada. La superposición de color de cuadrícula e información sobre herramientas existente para la herramienta Inspeccionar permanece mostrada mientras mantiene el puntero sobre diferentes partes de la página web representada:
Además, puede presionar Ctrl para ocultar la superposición de la herramienta Inspeccionar mientras mueve el puntero del mouse sobre la página web representada.
Para revisar el historial de esta característica en el proyecto Chromium de código abierto, vea el asunto 1316208.
Vea también:
- Conservación de la superposición de la información sobre herramientas y la cuadrícula de la herramienta Inspeccionaren las páginas de Análisis con la herramienta Inspeccionar.
- Persistencia de la superposición de la información sobre herramientas y la cuadrícula de la herramienta Inspeccionar en Navegar por DevTools con tecnología de asistencia.
Representación mejorada de menús desplegables, botones e iconos en el modo de contraste alto
En versiones anteriores de Microsoft Edge, los siguientes elementos no se representaban correctamente en el modo de contraste alto:
- Menús desplegables en la herramienta Problemas .
- Botones en la herramienta Elementos separados .
- La Barra de Actividad en modo Focalizado.
Estos problemas se han corregido en Microsoft Edge 102.
Los menús de la herramienta Problemas se muestran correctamente en el modo de contraste alto:
La interfaz de usuario de la herramienta Elementos desasociados se muestra correctamente en el modo de contraste alto:
La Barra de Actividades y el panel Vista rápida (cuando se usa el Modo de enfoque) se muestran correctamente en el modo de contraste alto:
Vea también:
Obtenga información sobre los experimentos en DevTools desde Configuración
En la página Experimentos de configuración>, cada experimento tiene ahora un botón de ayuda (iconode
):
Para obtener más información acerca de una característica experimental, haga clic en el botón Ayuda correspondiente ().
El botón Ayuda muestra la sección relevante del artículo Características experimentales en Microsoft Edge DevTools.
Mejor diseño de la configuración de red cuando es estrecha
En versiones anteriores de Microsoft Edge, abrir la configuración de red con el icono de engranaje en la herramienta Red se superponía cuando las DevTools eran muy limitadas:
Se ha corregido este problema en Microsoft Edge 102. Los ajustes individuales ahora se muestran mejor en diseños estrechos:
Vea también:
- Capture capturas de pantalla durante la carga de la página en Referencia de características de red, sobre los ajustes configurables de la herramienta Red.
Anuncios del proyecto de Chromium
Microsoft Edge 102 también incluye las siguientes actualizaciones del proyecto Chromium:
- Nuevos métodos abreviados para emular temas claros y oscuros
- Seguridad mejorada en la pestaña Vista previa de red
- Recarga mejorada en el punto de interrupción
- Actualizaciones de la consola
- Mostrar seudoelementos de resaltado heredados en el panel Estilos
- [Experimental] Copiar cambios de CSS
- [Experimental] Elegir un color fuera del explorador