Novedades de DevTools (Microsoft Edge 92)
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 .
Sugerencia
La conferencia Microsoft Build 2021 se celebró del 25 al 27 de mayo. Este es un vídeo de Compilación sobre las actualizaciones de DevTools: Microsoft Edge | Estado de la plataforma : Microsoft Edge ofrece una plataforma atractiva y coherente con herramientas para desarrolladores. A medida que nuestros exploradores heredados se agote el soporte técnico, Edge pronto será el único explorador compatible de Microsoft en Windows 10 o versiones posteriores. Únase a nosotros para obtener información sobre lo último en la plataforma edge, las herramientas y las aplicaciones web.
El botón Cerrar ya no está oculto cuando DevTools es estrecho
En microsoft Edge versión 91 o anterior, el botón Cerrar para cerrar DevTools no se muestra cuando la ventanilla de DevTools es estrecha. En la versión 92 de Microsoft Edge, el botón Cerrar de DevTools siempre está presente, independientemente del ancho de la ventanilla de DevTools.
Agregar herramientas rápidamente con el nuevo botón Más herramientas
Hay una nueva manera de abrir más herramientas en Microsoft Edge DevTools: el menú Más herramientas (+). El menú Más herramientas aparece en la barra de herramientas del panel principal y en la barra de herramientas del cajón (ahora panel Vista rápida ). Al seleccionar una herramienta en el menú Más herramientas , se agrega la herramienta a la barra de herramientas.
Para reordenar las pestañas en cualquiera de las barras de herramientas, seleccione y arrastre las pestañas.
El menú Más herramientas estaba disponible como experimento en la versión 89 de Microsoft Edge y ahora siempre está presente.
Vea también:
- Los menús Más herramientas de Acerca de la lista de herramientas
Mejoras para mantener el puntero, seleccionar y cerrar herramientas
Las pestañas de cada herramienta se han vuelto a formatear para reducir la posibilidad de cerrar accidentalmente una herramienta. En cada pestaña de la barra de herramientas principal y en la barra de herramientas del cajón (ahora panel Vista rápida ), se han agregado los siguientes elementos:
- Espaciado alrededor de la pestaña.
- Espaciado alrededor del botón cerrar (
x) en la pestaña. - Color de fondo al mantener el puntero sobre la pestaña.
- Información sobre herramientas para el botón cerrar (
x) de la pestaña. - Contraste más alto para el botón cerrar (
x) de la pestaña.
Por ejemplo, cuando se encuentra en la herramienta Rendimiento y mantiene el puntero sobre la pestaña de la herramienta Red , estas mejoras ayudan a evitar el cierre accidental de la herramienta Red .
Pestañas antes de volver a formatear:
Pestañas después de volver a formatear:
Estas mejoras son especialmente relevantes para los usuarios de DevTools localizadas, en las que las pestañas pueden ser más estrechas y fáciles de cerrar accidentalmente:
Ahora es más fácil volver a agregar una herramienta que ha cerrado: se ha agregado un menú Más herramientas a la barra de herramientas principal y a la barra de herramientas Cajón (ahora Vista rápida).
Vea también:
Mejor compatibilidad con los lectores de pantalla en la consola
Antes de la versión 92 de Microsoft Edge, en la consola, las tecnologías de asistencia, como los lectores de pantalla, no anunciaban sugerencias de autocompletar ni los resultados de las expresiones evaluadas. Esto se ha corregido ahora.
En la consola, los lectores de pantalla ahora anuncian la sugerencia de autocompletar seleccionada actualmente:
En la consola, los lectores de pantalla ahora anuncian el resultado de una expresión evaluada:
Vea también:
Visor de pedidos de origen
Ahora puede ver el orden de los elementos de origen superpuestos en la página web representada, para una mejor inspección de accesibilidad.
El orden del contenido de un documento HTML es importante para la optimización y accesibilidad del motor de búsqueda. CSS permite a los desarrolladores crear contenido que tenga un aspecto diferente en su orden en pantalla que el orden del documento de origen HTML. Se trata de un problema de accesibilidad, ya que los usuarios del lector de pantalla podrían obtener una experiencia confusa.
Consulte Prueba de compatibilidad con el teclado mediante el Visor de pedidos de origen.
Para ver el historial de esta característica en el proyecto de código abierto de Chromium, consulte Problema 1094406.
User-Agent sugerencias de cliente para dispositivos en la pestaña Condiciones de red
User-Agent sugerencias de cliente ahora se aplican a los dispositivos en el campo Agente de usuario de la herramienta Condiciones de red . User-Agent sugerencias de cliente son una nueva expansión a la API de sugerencias de cliente que le permite acceder a información sobre el explorador de un usuario de forma ergonómica que conserva la privacidad.
Consulte 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.
Herramientas de desarrollo de Microsoft Edge para Visual Studio Code versión 1.1.8
Microsoft Edge Developer Tools para Visual Studio Code versión 1.1.8 para Microsoft Visual Studio Code tiene los siguientes cambios desde la versión anterior. Microsoft Visual Studio Code actualiza automáticamente las extensiones. Para actualizar manualmente a la versión 1.1.8, 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.
Documentación en contexto e interfaz de usuario para facilitar el uso de la extensión DevTools
La versión 1.1.8 de la extensión Herramientas de desarrollo de Microsoft Edge para Visual Studio Code ahora ofrece una manera más sencilla de iniciar una nueva instancia de Microsoft Edge mediante la presentación de instrucciones, botones, vínculos y una página de documentación que le guiará.
Al seleccionar el botón Herramientas de Microsoft Edge en la barra de actividad de Visual Studio Code, el panel Herramientas de Microsoft Edge: Destinos ahora presenta texto explicativo, botones y vínculos que le guiarán, en lugar de un panel en blanco.
Al abrir una nueva instancia de Microsoft Edge desde dentro de Visual Studio Code, Microsoft Edge ahora muestra una página de inicio que explica cómo usar la extensión Herramientas de desarrollo, en lugar de una página en blanco.
El panel Herramientas de Microsoft Edge: Destinos ahora tiene un botón Generar launch.json e instrucciones para ayudar a iniciar el proyecto para la depuración en Microsoft Edge.
Vea también:
Anuncios del proyecto de Chromium
En las secciones siguientes se anuncian características adicionales disponibles en Microsoft Edge que se han contribuido al proyecto de Chromium de código abierto.
Editor de CSS Grid
Ahora puede obtener una vista previa y crear diseños de CSS Grid mediante el nuevo editor de CSS Grid.
Cuando un elemento HTML de la página tiene o display: inline-grid se le aplicadisplay: grid, se muestra un icono de cuadrícula junto a él en la pestaña Estilos. Haga clic en el icono de cuadrícula para mostrar u ocultar el editor de cuadrícula CSS. En el editor de cuadrícula CSS, seleccione cualquiera de los iconos (como justify-content: space-around) para obtener una vista previa del diseño en la página representada. El diseño flexible funciona de forma similar.
Para ver el historial de esta característica en el proyecto de código abierto de Chromium, consulte Problema 1203241.
Vea también:
Compatibilidad con las declaraciones de const en la consola
La consola ahora admite la declaración de const variables en scripts REPL independientes (por ejemplo, cuando se ejecuta una instrucción en la consola), además de las declaraciones existentes let y class las declaraciones. Esta compatibilidad permite experimentar con diferentes declaraciones para const variables sin actualizar la página. Anteriormente, DevTools generaba un error de sintaxis si se declaraba un const enlace.
Consulte el ejemplo siguiente.
const La declaración de redeclaration se admite en scripts REPL independientes (consulte la variable a). Tenga en cuenta que no se admiten los siguientes escenarios, por diseño:
-
constNo se permite volver a declarar los scripts de página en los scripts REPL. -
constNo se permite volver a declarar dentro del mismo script REPL (consulte la variableb).
Para obtener información sobre cómo ejecutar un único script REPL o un script REPL de varias líneas, consulte Ejecución de JavaScript en la consola.
Para obtener el historial de esta característica en el proyecto de código abierto de Chromium, consulte Problema 1076427.
Nuevo acceso directo para ver los detalles del iframe
Para ver iframe rápidamente los detalles, ahora puede hacer clic con el botón derecho en un iframe elemento de la herramienta Elementos y, a continuación, seleccionar Mostrar detalles de iframe.
Esto muestra los detalles sobre iframe en la herramienta Aplicación . En la herramienta Aplicación , puede examinar los detalles del documento, el estado de seguridad y aislamiento, la directiva de permisos, etc., para depurar posibles problemas.
Vea también:
- Herramienta de aplicación para administrar el almacenamiento
- Inspeccionar, editar y depurar HTML y CSS con la herramienta Elements
Para ver el historial de esta característica en el proyecto de código abierto de Chromium, consulte Problema 1192084.
Compatibilidad mejorada con la depuración de CORS
Los errores de uso compartido de recursos entre orígenes (CORS) ahora aparecen en la herramienta Problemas . Hay varias causas potenciales de errores de CORS. Haga clic en cada problema para expandirlo y ver posibles causas y soluciones.
Vea también:
- Notificar errores de CORS en la herramienta Red en Novedades de DevTools (Microsoft Edge 88)
- Búsqueda y corrección de problemas mediante la herramienta Problemas
Para ver el historial de esta característica en el proyecto de código abierto de Chromium, consulte Problema 1141824.
Se ha cambiado el nombre del filtro XHR a Fetch/XHR
En la herramienta Red , ahora se cambia el nombre del filtro XHR a Fetch/XHR. Este cambio hace que sea más claro que este filtro incluye solicitudes de red de XMLHttpRequest API y Fetch .
Vea también:
Para ver el historial de esta característica en el proyecto de código abierto de Chromium, consulte Problema 1201398.
Filtrar tipo de recurso Wasm en la herramienta Red
En la herramienta Red , ahora puede seleccionar el nuevo filtro Wasm para filtrar las solicitudes de red de WebAssembly.
Vea también:
- Filtrar recursos en Inspeccionar actividad de red
Para ver el historial de esta característica en el proyecto de código abierto de Chromium, consulte Problema 1103638.
Las intersecciones de proceso ahora se incluyen en la herramienta Rendimiento
En la herramienta Rendimiento , DevTools ahora muestra Intersecciones de proceso en el gráfico de llama. Estos cambios le ayudan a identificar eventos de observadores de intersección y a depurar la posible sobrecarga de rendimiento de los observadores de intersección.
Vea también:
- La confianza es buena, la observación es mejor: Intersection Observer v2
- Análisis de una grabación de rendimiento
Para ver el historial de esta característica en el proyecto de código abierto de Chromium, consulte Problema 1199137.
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.