Novedades de DevTools (Microsoft Edge 93)
Para consultar las características más recientes de Microsoft Edge DevTools y la extensión Microsoft Edge DevTools para Microsoft Visual Studio Code y Visual Studio, lea estos anuncios.
Para mantenerse al día y obtener las últimas características de DevTools, descargue una versión preliminar de Insiders de Microsoft Edge. Tanto si está en Windows, Linux o macOS, considere la posibilidad de usar Canary (u otro canal de versión preliminar) como explorador de desarrollo predeterminado. Las versiones Beta, Dev y Canary de Microsoft Edge se ejecutan como aplicaciones independientes, en paralelo con la versión estable y publicada de Microsoft Edge. Consulte Canales de Microsoft Edge Insider.
Para ver los anuncios más recientes, siga al equipo de Microsoft Edge en Twitter. Para notificar un problema con DevTools o solicitar una nueva característica, escriba un problema en el repositorio MicrosoftEdge/DevTools .
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 Visual Studio Code y estos temas se 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 en la lista desplegable Tema .
Los temas de Visual Studio Code admitidos son:
Temas claros:
- Luz solarizada
- Luz silenciosa
Temas oscuros:
- Abismo
- Kimbie Oscuro
- Monokai
- Monokai atenuado
- Oscuro solarizado
- Rojo
- Azul de mañana por la noche
Depuración de pérdidas de memoria del nodo DOM con la nueva herramienta Detached Elements
Actualización de octubre de 2024: para depurar pérdidas de memoria DOM, use:
- Herramienta Elementos desasociados . Los nodos desasociados tienen un vínculo al código JavaScript asociado.
- Tipo de generación de perfiles de elementos desasociados en la herramienta Memoria .
Un nodo DOM se considera "desasociado" cuando ya no está conectado a ningún elemento del DOM, pero Microsoft Edge sigue conservando en memoria. El explorador no puede recopilar el elemento porque algunos JavaScript siguen haciendo referencia al elemento aunque ya no esté en la página o en una parte del DOM.
El tipo de generación de perfiles Elementos desasociados de la herramienta Memoria busca todos los elementos desasociados de 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 recopilar como elemento no utilizado. Por último, puede saltar a JavaScript que hace referencia al elemento desasociado tomando una instantánea del 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 microsoft Edge Developer Tools para Visual Studio Code extensión seleccionando el botón Inspeccionar.
Esta característica integra la depuración DOM y CSS con la depuración de JavaScript en Visual Studio Code. Si no tiene instalada la extensión DevTools, al seleccionar el botón Inspeccionar, Visual Studio Code le pedirá 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, consulte el archivo changelog en el vscode-edge-devtools repositorio.
Vea también:
Obtenga la extensión Herramientas de desarrollo de Microsoft Edge para Visual Studio Code. Microsoft Visual Studio Code actualiza automáticamente las extensiones; para actualizar esta extensión manualmente, consulte Actualización manual de una extensión.
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 de 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 para mostrar de DevTools directamente desde Configuración
Anteriormente, para cambiar el idioma de presentación en DevTools, tenía que cambiar el idioma del explorador. Ahora puede cambiar fácilmente el idioma de visualización en 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 en la lista desplegable Idioma .
De forma predeterminada, DevTools coincide con el idioma para mostrar del explorador. Consulte Cambiar la configuración del idioma de DevTools.
Para ver el historial de esta característica en el proyecto de código abierto de Chromium, consulte Problema 2882756.
Copia de una declaración en el panel Estilos para bibliotecas CSS en JS
Anteriormente, al usar bibliotecas CSS en JS, no se podían copiar declaraciones CSS (una propiedad CSS y un valor) con formato para JavaScript. Tendría que editar el CSS copiado para que coincida con la sintaxis de JavaScript.
Ahora, en la versión 93 de Microsoft Edge, 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 Referencia de características css.
Personalización más sencilla de User-Agent sugerencias de cliente
User-Agent sugerencias de cliente hace que la información del explorador sea más accesible que una cadena de User-Agent delimitada por punto y coma y mejora la compatibilidad del sitio. Inicialmente, User-Agent sugerencias de cliente tardaban mucho en probarse y depurarse. Había menos control sobre las sugerencias de cliente y las sugerencias de cliente tenían que rellenarse correctamente para que el formulario funcionara.
En esta versión, hemos rediseñado la experiencia de depuración para que pueda 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 puede probar las sugerencias de cliente de User-Agent personalizadas y una cadena de User-Agent simultáneamente. Ahora puede definir User-Agent sugerencias de cliente 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, vea Establecer sugerencias de cliente del agente de usuario.
También puede invalidar 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 , vea Establecer sugerencias de cliente del agente de usuario.
Para ver el historial de esta característica en el proyecto de código abierto de Chromium, consulte Problema 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 escuchaban 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 anunciaba, como "Error", "Advertencia" o "Problema". Por ejemplo, si DevTools notificaba 3 errores, los lectores de pantalla simplemente anunciarían "3".
Ahora, en la versión 93 de Microsoft Edge, 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 la consola.
Para obtener información sobre la depuración de errores de consola, consulte Corrección de errores de JavaScript que se notifican en la consola. Para obtener información sobre los problemas encontrados por DevTools y las mejoras que puede realizar en una página web, consulte Buscar y corregir problemas mediante la herramienta Problemas.
Para ver el historial de esta característica en el proyecto de código abierto de Chromium, consulte Problema 1223208.
Copiar como PowerShell en la herramienta Red ahora incluye cookies
Anteriormente, en la herramienta Red, la> opción copiar copiar como menú contextual dePowerShell no incluyeba 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 la versión 93 de Microsoft Edge, la opción copiar como menú contextual de PowerShell establece correctamente la cadena de User-Agent y las cookies observadas por DevTools. El comando de PowerShell generado ahora puede realizar correctamente la misma solicitud de red observada por DevTools, incluso en servidores que dependen de cookies.
Para obtener más información sobre el registro de actividad de red, consulte Referencia de características de red.
Para ver el historial de esta característica, consulte Problema 932971.
Nota:
Las partes de esta página son modificaciones basadas en el trabajo creado y compartido por Google y usadas según los términos descritos en la licencia internacional creative Commons Attribution 4.0. La página original se encuentra aquí y está creada por Jecelyn Yeen.
Esta obra está licenciada bajo una Licencia Internacional Creative Commons Attribution 4.0.