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.
Vídeo: Microsoft Edge | Novedades de DevTools 93
Aplicar temas de Visual Studio Code a DevTools
Actualización: A partir de Microsoft Edge 131, se quita la característica de temas de Visual Studio Code y estos temas vuelven a los temas predeterminados:
- Luz+
- Oscuro+
Además de los temas claros y oscuros existentes, Microsoft Edge DevTools ahora admite algunos de los temas de color más populares de Visual Studio Code. Para seleccionar un tema de color, haga clic en el botón Configuración de DevTools (
) y, a continuación, seleccione un tema de la lista desplegable Tema .
Los temas compatibles de Visual Studio Code son:
Temas ligeros:
- Luz solarizada
- Luz silenciosa
Temas oscuros:
- Abismo
- Kimbie Dark
- Monokai
- Monokai atenuado
- Solarized Dark
- Rojo
- Mañana Noche Azul
Depurar pérdidas de memoria del nodo DOM con la nueva herramienta Elementos desasociados
Actualización de marzo de 2025: se ha eliminado la herramienta Elementos separados . Para depurar las pérdidas de memoria DOM, utilice el tipo de generación de perfiles de elementos desasociados de la herramienta Memoria .
Un nodo del DOM se considera "desasociado" cuando ya no está asociado a ningún elemento del DOM, pero Microsoft Edge lo sigue conservando en la memoria. El explorador no puede recopilar elementos no utilizados o no deseado porque JavaScript sigue haciendo referencia al elemento aunque ya no esté en la página o sea parte del DOM.
El tipo de generación de perfiles Elementos desasociados de la herramienta Memoria busca todos los elementos desasociados en la página y los muestra. Puede expandir y contraer un elemento desasociado para ver los nodos primarios y secundarios que también se conservan. Para desencadenar la recolección de elementos no utilizados del explorador, seleccione Recopilar elementos no utilizados y valide que tiene una pérdida de memoria cuando un elemento desasociado no se puede recolectar como elemento no deseado. Finalmente, puede saltar a JavaScript que hace referencia al elemento desasociado tomando una instantánea de montón con el botón Analizar .
Actualización: esta característica se ha publicado y ya no es experimental.
Vea también:
El depurador de Visual Studio Code ahora se integra con la extensión DevTools
Si usa la depuración de JavaScript en Visual Studio Code, ahora puede iniciar la extensión Herramientas de desarrollo de Microsoft Edge para Visual Studio Code seleccionando el botón Inspeccionar.
Esta característica integra la depuración de DOM y CSS con la depuración de JavaScript en Visual Studio Code. Si no tiene instalada la extensión de DevTools, al seleccionar el botón Inspeccionar, Visual Studio Code le pide que instale la extensión.
Otras características nuevas son:
- Las herramientas se actualizan automáticamente al cambiar entre diferentes destinos de depuración.
- Varias correcciones de errores.
- Documentación más detallada de la extensión.
Para obtener más información sobre las mejoras y correcciones, compruebe el archivo de registro de cambios en el vscode-edge-devtools repositorio.
Vea también:
Obtenga las herramientas de desarrollo de Microsoft Edge para la extensión de Visual Studio Code. Microsoft Visual Studio Code actualiza las extensiones automáticamente; para actualizar esta extensión manualmente en su lugar, consulte Actualizar una extensión manualmente.
Puede archivar problemas y contribuir a la extensión en el repositorio de GitHub vscode-edge-devtools.
Nuevos iconos de interfaz de usuario de Fluent para DevTools
Microsoft Edge DevTools ha adoptado la interfaz de usuario Fluent, lo que proporciona a los botones y menús un aspecto más moderno que se alinea mejor con el resto del explorador Microsoft Edge.
Cambiar el idioma de visualización de DevTools directamente desde Configuración
Anteriormente, para cambiar el idioma de visualización en DevTools, tenía que cambiar el idioma del explorador. Ahora puede cambiar fácilmente el idioma para mostrar en la configuración de DevTools, sin tener que cambiar la configuración del explorador. Para ello, abra Configuración y, a continuación, en Preferencias, seleccione un idioma de la lista desplegable Idioma .
De forma predeterminada, DevTools coincide con el idioma de visualización del explorador. Consulte Cambiar la configuración de idioma de DevTools.
Para revisar el historial de esta característica en el proyecto Chromium de código abierto, vea el asunto 2882756.
Copiar una declaración en el panel Estilos para bibliotecas CSS-in-JS
Anteriormente, al usar bibliotecas CSS-in-JS, no podía copiar declaraciones CSS (una propiedad y un valor CSS) formateadas para JavaScript. Tendría que editar el CSS copiado para que coincida con la sintaxis de JavaScript.
Ahora, en Microsoft Edge versión 93, puede copiar una sola declaración CSS o todas las declaraciones de una regla de estilo y pegarlas directamente en un archivo JavaScript sin problemas de sintaxis. Para probar esta característica:
En el panel Estilos de la herramienta Elementos , haga clic con el botón derecho en una declaración de una regla de estilo.
Seleccione Copiar declaración como JS o Copiar todas las declaraciones como JS.
Pegue el CSS copiado en un archivo JavaScript en el editor de texto, como Visual Studio Code. Por ejemplo:
'--more-link': 'lime'.
Para obtener más información sobre cómo ver y cambiar CSS, consulte la referencia de características de CSS.
Personalización más sencilla de sugerencias de cliente de User-Agent
User-Agent Sugerencias de cliente hace que la información del explorador sea más accesible que una cadena de User-Agent delimitada por puntos y coma y mejora la compatibilidad del sitio. Al principio, las pruebas y la depuración de User-Agent sugerencias de cliente consumían mucho tiempo. Había menos control sobre las sugerencias del cliente, y las sugerencias del cliente tenían que completarse correctamente para que el formulario funcionara.
En esta versión, hemos rediseñado la experiencia de depuración para que puedas modificar fácilmente User-Agent sugerencias de cliente a través de una interfaz de usuario con varios campos y controles independientes. Además, ahora puedes probar tus sugerencias de cliente de User-Agent personalizadas y una cadena de User-Agent simultáneamente. Ahora puedes definir sugerencias de cliente de User-Agent para un dispositivo personalizado en Configuración o en la herramienta Condiciones de red .
Para obtener más información sobre cómo definir sugerencias en Configuración, consulte Establecer sugerencias de cliente de agente de usuario.
También puede reemplazar User-Agent sugerencias de cliente para la página actual mediante la herramienta Condiciones de red .
Para obtener más información sobre cómo definir sugerencias en la herramienta Condiciones de red , consulte Establecer sugerencias de cliente de agente de usuario.
Para revisar el historial de esta característica en el proyecto Chromium de código abierto, vea el asunto 1174299.
Los lectores de pantalla ahora anuncian errores, advertencias y problemas en la barra de herramientas y la consola
Anteriormente, los usuarios de lectores de pantalla solo escucharían el número de errores, advertencias o problemas anunciados en la barra de herramientas de DevTools. No se incluyó la información adicional del tipo de notificación que se estaba anunciando, como "Error", "Advertencia" o "Problema". Por ejemplo, si DevTools notificaba 3 errores, los lectores de pantalla simplemente anunciaban "3".
Ahora, en Microsoft Edge versión 93, los lectores de pantalla anuncian correctamente el tipo y el número de notificaciones; errores, advertencias o problemas. Por ejemplo, si DevTools notifica 3 errores y 5 advertencias, los lectores de pantalla ahora anuncian "3 errores, 5 advertencias". Esta corrección se ha aplicado tanto a las notificaciones de la barra de herramientas de DevTools como a las de la consola.
Para obtener información sobre cómo depurar errores de la consola, consulta Solucionar errores de JavaScript que se notifican en la consola. Para obtener información sobre los problemas detectados por DevTools y las mejoras que puede realizar en una página web, consulte Buscar y corregir problemas con la herramienta Problemas.
Para revisar el historial de esta característica en el proyecto Chromium de código abierto, vea el asunto 1223208.
Copiar como PowerShell en la herramienta Red ahora incluye cookies
Anteriormente, en la herramienta Red , la opción del menú contextual Copiar>como PowerShell no incluía cookies al generar un comando de PowerShell para una solicitud de red determinada en el registro de actividad de red. Esto significaba que el comando de PowerShell generado no podía realizar correctamente la misma solicitud de red si se requerían cookies.
Ahora, en Microsoft Edge versión 93, la opción del menú contextual Copiar como PowerShell establece correctamente la cadena de User-Agent y las cookies que observó DevTools. El comando de PowerShell generado ahora puede realizar correctamente la misma solicitud de red que observó DevTools, incluso a los servidores que dependen de las cookies.
Para obtener más información sobre el registro de actividad de red, consulte Referencia de características de red.
Para obtener el historial de esta característica, consulte el problema 932971.
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.