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.
Mejorar la localización de DevTools
Para satisfacer sus necesidades de traducción, el equipo de Microsoft Edge DevTools se centra en mejorar la calidad de las traducciones. A partir de la versión 87 de Microsoft Edge, varias cadenas y términos están bloqueados y no cambian, incluso cuando el resto de DevTools se muestran en otros idiomas. La lista de cadenas y términos afectados incluye lo siguiente:
- Las cadenas en la herramienta Faro .
- El término
service worker. - Algunos de los filtros de la herramienta Red como
URL, ,XHR,JSyCSS. - La API de utilidades de la consola de 0 $ .
$0 ahora está disponible en la Consola para los usuarios en versiones localizadas de DevTools. Gracias a la comunidad global de desarrolladores por ayudarnos a mejorar la localización de las DevTools de Microsoft Edge. Siga enviando comentarios sobre la calidad de la localización para mejorar el soporte técnico de DevTools en todas las configuraciones regionales. Para obtener actualizaciones en tiempo real sobre esta característica en el Chromium proyecto de código abierto, consulte Problema #1136655.
Vea también:
Mover herramientas entre los paneles superior e inferior
DevTools ahora admite mover herramientas entre los paneles superior e inferior. Personalice sus DevTools y mejore su productividad viendo cualquier combinación de dos herramientas al mismo tiempo. Por ejemplo, vea las herramientas Elementos y Orígenes al mismo tiempo (moviendo la herramienta Orígenes a la parte inferior).
Para mover cualquier herramienta superior a la parte inferior, haga clic con el botón derecho en una pestaña y, después, seleccione Mover a la parte inferior:
Para mover cualquier herramienta inferior a la parte superior, haz clic con el botón derecho en una pestaña y selecciona Mover a la parte superior:
Para revisar el historial de esta característica en el proyecto Chromium de código abierto, vea el asunto #1075732.
Vea también:
- Herramientas de la Barra de Actividades frente a herramientas de Vista rápida en Acerca de la lista de herramientas
Guardar y exportar mediante la consola de red
La herramienta Consola de red ahora tiene una compatibilidad mejorada con los esquemas Postman v2.1 y OpenAPI v2 .
La herramienta Consola de red admite ahora las siguientes acciones:
- Guarde y exporte colecciones y entornos.
- Edite y exporte conjuntos de variables de entorno dentro de la herramienta Consola de red .
Escribir un nombre para el nuevo entorno:
Seleccionar el formato para el nuevo entorno:
Actualización: esta característica se ha publicado y ya no es experimental.
Vea también:
- Guarde y exporte colecciones, entornos y variables de entorno en Compose y envíe solicitudes de API web mediante la herramienta Consola de red.
Para obtener información sobre el historial, en el Chromium proyecto de código abierto, consulte el problema #1093687.
Herramientas de cuadrícula CSS mejoradas
Las DevTools de Microsoft Edge ahora admiten las siguientes características para inspeccionar, ver y depurar las cuadrículas CSS.
Muestre una superposición de cuadrícula simplificada con la herramienta Inspeccionar u obtenga información más detallada con superposiciones persistentes.
Para habilitar superposiciones de cuadrícula persistentes, haga clic en el icono de cuadrícula junto a un elemento de contenedor de cuadrícula en la herramienta Elementos o haga clic en la cuadrícula en la herramienta Diseño .
Puede habilitar superposiciones persistentes para varias cuadrículas.
La nueva herramienta Diseño permite alternar fácilmente las superposiciones de cuadrícula y configurar la apariencia y el contenido de cada una.
Las características están activadas de forma predeterminada.
Actualización: esta característica se ha publicado y ya no es experimental.
Vea también:
Para obtener información sobre el historial, en el Chromium proyecto de código abierto, consulte el problema #1047356.
El equipo de Microsoft Edge DevTools está colaborando con el equipo de DevTools de Chrome y la comunidad de Chromium para agregar nuevas características de herramientas de flexbox a DevTools. Para obtener actualizaciones sobre las herramientas flexbox en el Chromium proyecto de código abierto, consulte el problema #1136394.
Personalizar accesos rápidos de teclado en Configuración
Ahora puede personalizar el método abreviado de teclado para cualquier acción en DevTools. A partir de Microsoft Edge versión 84, puede elegir entre los valores preestablecidos de Visual Studio Code y DevTools (predeterminados) para los métodos abreviados de teclado. A partir de la versión 87 de Microsoft Edge, puede personalizar aún más los métodos abreviados de teclado.
Actualización: esta característica se ha publicado y ya no es experimental.
Vea también:
- Editar el método abreviado de teclado para una acción de DevTools en Personalizar métodos abreviados de teclado.
Para obtener información sobre el historial, en el Chromium proyecto de código abierto, consulte el problema #174309.
Presentación de las herramientas de Microsoft Edge para la extensión de Visual Studio Code
Los elementos para las extensiones de Visual Studio Code y Red para Visual Studio Code ahora se combinan en la nueva extensión Herramientas de desarrollo de Microsoft Edge para Visual Studio Code. Use las DevTools de Microsoft Edge para las siguientes actividades sin salir de Microsoft Visual Studio Code.
- Depuración del DOM
- Editar CSS
- Inspeccionar el tráfico de red
Con la extensión, inicia Microsoft Edge, conéctate a una instancia existente del explorador o usa un explorador sin periféricos directamente desde el editor. Para empezar a contribuir y presentar problemas con sus comentarios sobre esta extensión, consulte el repositorio de Herramientas de desarrollo de Microsoft Edge para Visual Studio Code en GitHub.
Uso de la extensión en modo explorador completo:
Uso de la extensión en modo de equipo sin periféricos:
Para obtener más información, consulte la extensión Microsoft Edge DevTools para Visual Studio Code.
Anuncios del proyecto de Chromium
En las secciones siguientes se anuncian características adicionales disponibles en Microsoft Edge que han contribuido al proyecto de código abierto Chromium.
Nueva herramienta WebAuthn
En versiones anteriores de Microsoft Edge, no había compatibilidad nativa con la depuración de WebAuthn. Necesita autenticadores físicos para probar la aplicación web con la API de autenticación web. Con la nueva herramienta WebAuthn , puede hacer lo siguiente sin el uso de ningún autenticador físico:
- Emular a los autenticadores.
- Personalizar los atributos de los autenticadores.
- Inspeccionar los estados de los autenticadores.
Puede emular autenticadores y depurar la API de autenticación web con la nueva herramienta WebAuthn . Para abrir la herramienta WebAuthn, haga clic en el icono > de DevTools (...) de personalización y control Másherramientas>WebAuthn. Para obtener actualizaciones en tiempo real sobre esta característica en el Chromium proyecto de código abierto, consulte Problema #1034663.
Apertura de la herramienta WebAuthn :
La herramienta WebAuthn :
Para obtener más información, consulte Emular autenticadores y depurar WebAuthn.
Actualizaciones de la herramienta Elementos
Vea también:
Ver el panel de la barra lateral calculada en el panel Estilos
Alternar el panel Calculado en el panel Estilos . El panel Calculado del panel Estilos está contraído de forma predeterminada. Para mostrar u ocultar el panel Calculado dentro del panel Estilos , haga clic en el botón Mostrar barra lateral Estilos calculados (
).
Apertura del panel de la barra lateral calculado :
El panel de la barra lateral calculado :
Para obtener actualizaciones en tiempo real sobre esta característica en el Chromium proyecto de código abierto, consulte Problema #1073899.
Vea también:
- Ver solo el CSS que se aplica realmente a un elemento en la referencia de características de CSS
Agrupar propiedades CSS en el panel Calculado
Para ver el CSS aplicado con menos desplazamiento, agrupe las propiedades CSS por categorías en el panel Calculado . También puede centrarse selectivamente en un conjunto de propiedades relacionadas mientras inspecciona el CSS. En la herramienta Elementos , seleccione un elemento. Para agrupar (o desagrupar) las propiedades CSS, active la casilla Agrupar .
Para obtener actualizaciones en tiempo real sobre esta característica en el Chromium proyecto de código abierto, consulte Problemas #1096230, #1084673 y #1106251.
Vea también:
- Ver solo el CSS que se aplica realmente a un elemento en la referencia de características de CSS
Faro 6.4 en la herramienta Faro
La herramienta Lighthouse ahora ejecuta Lighthouse 6.4. Para obtener una lista completa de los cambios, consulte las notas de la versión de Lighthouse. Para obtener actualizaciones en tiempo real sobre esta característica en el Chromium proyecto de código abierto, consulte Problema #772558.
Vea también:
performance.mark() en la sección Intervalos
La sección Intervalos de una grabación de la herramienta Rendimiento ahora marca performance.mark()los eventos. Para probar esta característica y medir el rendimiento del código JavaScript, agregue performance.mark() eventos al código.
El código siguiente agrega start y end marca el rendimiento antes y después de un for bucle:
performance.mark('start');
for (var i = 0; i < 1000; i+=7;){
console.log(i);
}
performance.mark('end');
A continuación, abra la herramienta Rendimiento y vea la sección Intervalos para grabar el código JavaScript. Los performance.mark() eventos que agregó ahora se muestran en la grabación.
Nuevos filtros de tipo de recurso y url en la herramienta Red
Use las palabras clave nuevo resource-type y url de la herramienta Red para filtrar las solicitudes de red. Por ejemplo, utilice la opción resource-type:image para centrarse en las solicitudes de red que son imágenes:
Para descubrir más palabras clave especiales, como resource-type y url, consulta filtrar solicitudes por propiedades.
Para obtener actualizaciones en tiempo real sobre esta característica en el Chromium proyecto de código abierto, consulte Problemas #1121141 y #1104188.
Actualización de la vista de detalles del marco
En la herramienta Aplicación , en la lista de páginas de la izquierda, la página inferior es Marcos, que a menudo muestra un marco llamado superior.
Mostrar informes COEP y COOP en el punto de conexión
En la herramienta Aplicación , en la lista de páginas de la izquierda, la página inferior es Marcos, que a menudo muestra un marco llamado superior. Seleccione el marco para ver la vista de detalles del marco, que incluye la sección Seguridad & Aislamiento .
En la sección Seguridad & aislamiento de la página de detalles del marco, vea el extremo de la directiva de incrustación entre orígenes (COEP) y la directiva de apertura entre orígenes (COOP reporting to ). La API de informes define Report-To, que es un nuevo encabezado HTTP que le ofrece una manera de especificar los puntos de conexión del servidor para que el explorador envíe advertencias y errores.
Para obtener actualizaciones en tiempo real sobre esta característica en el proyecto Chromium de código abierto, consulte Problema #1051466.
Vea también:
- Mostrar detalles del marco de apertura para las ventanas abiertas en Novedades de DevTools (Microsoft Edge 88)
- La herramienta Aplicación, para administrar el almacenamiento
Mostrar el modo de solo informe COEP y COOP
En la herramienta Aplicación , en la lista de páginas de la izquierda, la página inferior es Marcos, que a menudo muestra un marco llamado superior. Seleccione el marco para ver la vista de detalles del marco, que incluye la sección Seguridad & Aislamiento .
La sección Aislamiento & seguridad de la página de detalles del marco ahora muestra la report-only etiqueta para los COEP y COOP que están establecidos en report-only modo.
Para obtener actualizaciones en tiempo real sobre esta característica en el proyecto Chromium de código abierto, consulte Problema #1051466.
Vea también:
- Mostrar detalles del marco de apertura para las ventanas abiertas en Novedades de DevTools (Microsoft Edge 88)
- La herramienta Aplicación, para administrar el almacenamiento
Ver y corregir problemas de contraste de color en la herramienta de información general de CSS
La herramienta de información general de CSS ahora muestra una lista de elementos en la página que tienen problemas de contraste de color.
Por ejemplo, la página de demostración de colores accesibles (https://css-overview-accessible-colors-demo.glitch.me) (404) de información general de CSS tiene un ejemplo de un problema de contraste de color. (Glitch.me el alojamiento del proyecto finalizó el 8 de julio de 2025. Este sitio de prueba podría trasladarse a https://github.com/MicrosoftEdge/Demos, incluido el hospedaje en github.io.)
Para ver una lista de los elementos que tienen un problema de contraste de color, en Problemas de contraste, haga clic en Texto. Para abrir el elemento en la herramienta Elementos , haga clic en un elemento de la lista.
Para ayudar a solucionar problemas de contraste, Microsoft Edge DevTools proporciona automáticamente sugerencias de color; consulte Sugerencia de color accesible en el panel Estilos en Novedades de DevTools (Microsoft Edge 86).
Actualización: esta característica se ha publicado y ya no es experimental.
Vea también:
Para obtener información sobre el historial, en el Chromium proyecto de código abierto, consulte el problema #1120316.
Nota:
Algunas partes de esta página son modificaciones que se basan en trabajo creado y compartido por Google y que se usan de acuerdo con los términos descritos en la Licencia internacional de Creative Commons Atribution 4.0. La página original se encuentra aquí y está escrita por Jecelyn Yeen.
Este trabajo está bajo una licencia Creative Commons Attribution 4.0 International.