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.
Anuncios del equipo de Microsoft Edge DevTools
Usar DevTools en el modo de contraste alto de Windows
Microsoft Edge DevTools ahora se muestra en modo de contraste alto cuando Windows está en modo de contraste alto.
Sigue las instrucciones para activar el modo de contraste alto en Windows. Para abrir DevTools en Microsoft Edge, seleccione F12 o Ctrl+Mayús+I. DevTools se muestra en el modo de contraste alto.
Nota: DevTools admite actualmente el modo de contraste alto en Windows, pero no en macOS.
Chromium problema #1048378
Vea también:
Hacer coincidir los métodos abreviados de teclado de DevTools con Visual Studio Code
A partir de sus comentarios y del seguimiento de problemas públicos de Chromium, el equipo de Microsoft Edge DevTools aprendió que quería poder personalizar los métodos abreviados de teclado en DevTools. En Microsoft Edge 84, ahora puede hacer coincidir los métodos abreviados de teclado de DevTools con Visual Studio Code, que es solo una de las características en las que trabaja el equipo para la personalización de métodos abreviados.
Para probar el experimento:
En DevTools, abra Configuración presionando ? o haciendo clic en el icono Configuración (
) en DevTools.En la sección Experimentos, seleccione la casilla Habilitar configuración de métodos abreviados de teclado personalizados (requiere recargar).
Volver a cargar DevTools.
Vuelva a abrir Configuración y seleccione la sección Accesos directos .
Haga clic en la lista desplegable Coincidir con accesos directos preestablecidos, seleccione DevTools (predeterminado) y, a continuación, seleccione Visual Studio Code.
Los métodos abreviados de teclado de DevTools ahora coinciden con los métodos abreviados de acciones equivalentes en Visual Studio Code.
Por ejemplo, el método abreviado de teclado para pausar o continuar ejecutando un script en Visual Studio Code es F5. Con el valor preestablecido DevTools (predeterminado), el mismo método abreviado en DevTools es F8, pero con el método preestablecido de Visual Studio Code, ese método abreviado ahora también es F5.
La característica está disponible actualmente en Microsoft Edge 84 como experimento, así que comparta sus comentarios con el equipo.
Chromium problema #174309
Vea también:
Depuración remota de emuladores de Surface Duo
Ahora puede depurar de forma remota el contenido web que se ejecuta en el emulador de Surface Duo con toda la eficacia de Microsoft Edge DevTools.
Con el emulador de Surface Duo, puede probar cómo se representa el contenido web en una nueva clase de dispositivos plegables y de pantalla doble. El emulador ejecuta el sistema operativo Android y proporciona la aplicación Microsoft Edge para Android. Cargue el contenido web en la aplicación Microsoft Edge y depúrelo con DevTools:
La edge://inspect página de una instancia de escritorio de Microsoft Edge muestra SurfaceDuoEmulator con una lista de las pestañas abiertas o PWA que se ejecutan en el emulador de Surface Duo:
Haga clic en Inspeccionar para la pestaña o PWA que desea depurar para abrir DevTools. Siga la guía paso a paso para depurar de forma remota el contenido web en el emulador de Surface Duo: Depurar de forma remota emuladores de Surface Duo.
Cambiar el tamaño del panel Vista rápida de DevTools más fácilmente
En Microsoft Edge 83 o versiones anteriores, cambiaba el tamaño del cajón (ahora panel Vista rápida ) manteniendo el puntero dentro de la barra de herramientas del cajón. El cajón se comportó de forma diferente a los demás controles de cambio de tamaño para los paneles de DevTools, en los que se pasa el cursor sobre el borde del panel para cambiar su tamaño. La imagen siguiente muestra cómo funcionaba el cambio de tamaño del cajón en la versión 83 o anterior de Microsoft Edge:
A partir de Microsoft Edge 84, puede cambiar el tamaño del cajón manteniendo el puntero sobre el borde. Este cambio alinea el comportamiento para cambiar el tamaño del cajón con otros paneles en DevTools. La siguiente imagen muestra cómo funciona el cambio de tamaño del cajón en Microsoft Edge 84 o posterior:
Chromium problema #1076112
Botones de navegación de screencasting: mostrar el foco
Al depurar de forma remota un dispositivo Android, un dispositivo con Windows 10 o posterior, o un emulador de Surface Duo, puede alternar la transmisión de pantalla con el icono 
en la esquina superior izquierda de DevTools. Con la difusión de pantalla habilitada, puede navegar por la pestaña de Microsoft Edge en el dispositivo remoto desde la ventana DevTools.
En Microsoft Edge 84, estos botones de navegación ahora también son accesibles con el teclado. Por ejemplo, al presionar Mayús+Tab desde la barra de URL transmitida en pantalla, se pone el foco en el botón Actualizar :
Chromium problema #1081486
Ahora se puede acceder al panel de detalles del panel Red
En Microsoft Edge 84, el panel Detalles de la herramienta Red ahora tiene el foco cuando lo abre para un recurso del registro de red. Este cambio permite a los lectores de pantalla leer e interactuar con el contenido del panel de Detalles .
Chromium problema #963183
Anuncios del proyecto de Chromium
En las secciones siguientes se anuncian características adicionales disponibles en Microsoft Edge 84 que han contribuido al proyecto código abierto Chromium.
Solucionar problemas del sitio con la nueva herramienta Problemas en el cajón de DevTools
La nueva herramienta Problemas en el cajón (ahora panel Vista rápida ) en la parte inferior de DevTools reduce la fatiga de notificaciones y el desorden de la consola. Actualmente, la Consola es el lugar central para que los desarrolladores de sitios web, bibliotecas, marcos y Microsoft Edge registren mensajes, advertencias y errores. La herramienta Problemas agrega advertencias del explorador de una manera estructurada, agregada y procesable. La herramienta Problemas vincula a los recursos afectados dentro de DevTools y proporciona instrucciones sobre cómo corregir los problemas.
Con el tiempo, aparecerán más advertencias en la herramienta Problemas en lugar de en la Consola, para simplificar los mensajes de la Consola .
Para empezar, consulte Buscar y corregir problemas con la herramienta Problemas.
Chromium problema #1068116
Ver información de accesibilidad en la información sobre herramientas del modo de inspección
La información sobre herramientas del modo Inspeccionar ahora indica si el elemento tiene un nombre y un rol accesibles y si se puede enfocar con el teclado.
Chromium problema #1040025
Vea también:
- Analizar páginas con la herramienta Inspeccionar
- Axe: Nombre del rol Valor : sobre el nombre y el rol accesibles, en webhint.io.
- Hacha: Teclado : sobre el teclado, centrado en el teclado, en webhint.io.
Actualizaciones del panel de rendimiento
Vea también:
Ver la información del tiempo total de bloqueo en el pie de página
Después de registrar el rendimiento de la carga, la herramienta Rendimiento ahora muestra la información del tiempo total de bloqueo (TBT) en el pie de página. TBT es una métrica de rendimiento de carga que ayuda a cuantificar cuánto tiempo tarda una página en ser utilizable. TBT esencialmente mide la longitud de una página que solo parece ser utilizable (porque el contenido se presenta a la pantalla); pero la página no es realmente utilizable, porque JavaScript está bloqueando el subproceso principal y, por lo tanto, la página no responde a la entrada del usuario. TBT es la métrica principal para aproximar el retraso de la primera entrada.
Para obtener información sobre el tiempo total de bloqueo, no use el flujo de trabajo del icono de página 
para registrar el rendimiento de carga de la página.
En su lugar, seleccione el
, vuelva a cargar manualmente la página, espere a que se cargue la página y, a continuación, detenga la grabación.
Si Total Blocking Time: Unavailable se muestra, Microsoft Edge DevTools no obtuvo la información necesaria de los datos de generación de perfiles internos en Microsoft Edge.
Chromium problema #1054381
Vea también:
Eventos de cambio de diseño en la nueva sección Experiencia
La nueva sección Experiencia de la herramienta Rendimiento le ayuda a detectar cambios en el diseño. Cumulative Layout Shift (CLS) es una métrica que ayuda a cuantificar la inestabilidad visual no deseada.
Haga clic en el evento Cambio de diseño para mostrar los detalles del cambio de diseño en el panel Resumen . Mantenga el puntero en los campos Movido desde y Movido a para visualizar dónde se produjo el cambio de diseño.
Vea también:
Terminología de promesas más precisa en la Consola
Al registrar un Promise, la consola proporcionó PromiseStatus incorrectamente el valor establecido en resolved.
La Consola usa ahora el término fulfilled, que se ajusta a la Promise especificación. Para obtener más información sobre la Promise especificación, consulte States and Fates en GitHub.
V8 problema #6751
Vea también:
Actualizaciones del panel Estilos
Actualización de agosto de 2026: Se han eliminado el artículo "Editar estilos y configuraciones de fuente CSS en el panel Estilos" y su casilla de experimento.
Compatibilidad con la palabra clave revert
La interfaz de usuario de autocompletar del panel Estilos ahora detecta la palabra clave CSS revert , que revierte el valor en cascada de una propiedad al valor anterior aplicado al estilo del elemento.
Chromium problema #1075437
Vistas previas de imágenes
Mantenga el puntero sobre un background-image valor del panel Estilos para mostrar una vista previa de la imagen en una información sobre herramientas.
Chromium problema #1040019
El Selector de colores ahora usa la notación de color funcional separada por espacios
El módulo de color CSS de nivel 4 especifica que las funciones de color, como rgb(), deben admitir argumentos separados por espacios. Por ejemplo, rgb(0, 0, 0) equivale a rbg(0 0 0).
Al seleccionar colores con el Selector de colores o alternar entre representaciones de colores en el panel Estilos manteniendo presionada la tecla Mayús y seleccionando el valor de color de fondo , se muestra la sintaxis de argumento separado por espacios.
También debe mostrar la sintaxis en el panel Calculado y en la información sobre herramientas del Modo de inspección .
Microsoft Edge DevTools está usando la nueva sintaxis porque las próximas características de CSS como color() no admitirán la sintaxis de argumentos separados por comas obsoleta.
La sintaxis de los argumentos separados por espacios se admite en la mayoría de los exploradores desde hace tiempo. Consulte ¿Puedo usar: notaciones de color funcionales separadas por espacios?
Chromium problema #1072952
Obsolescencia del panel Propiedades en el panel Elementos
El panel Propiedades de la herramienta Elementos está obsoleto. En su lugar, ejecuta console.dir($0) en la consola .
Referencia
Compatibilidad con accesos directos de aplicaciones en el panel Manifiesto
En la herramienta Aplicación , la página Manifiesto ahora muestra accesos directos de aplicaciones. Los accesos directos de aplicación ayudan a los usuarios a iniciar rápidamente tareas comunes o recomendadas dentro de una aplicación web. El menú de accesos directos de aplicación solo se muestra para las Web Apps progresivas instaladas en el escritorio o dispositivo móvil del usuario.
Vea también:
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 Kayce Basques.
Este trabajo está bajo una licencia Creative Commons Attribution 4.0 International.