Novedades de DevTools (Microsoft Edge 96)
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 96
Nueva interfaz de usuario de DevTools disponible (en versión preliminar)
El equipo de Microsoft Edge DevTools está experimentando con una nueva interfaz de usuario de DevTools: Modo de enfoque. El modo de enfoque reduce las distracciones y el desorden con un diseño más moderno y simplificado. La nueva barra de actividad le permite anclar sus herramientas favoritas en una barra de herramientas horizontal o vertical para usar el espacio de pantalla de forma más eficaz.
Para probar esta nueva interfaz de usuario en La versión 96 de Microsoft Edge, seleccione Configuración (
) >Modo de enfoqueexperimentos>.
A partir de la versión 96 de Microsoft Edge, la casilla del experimento está etiquetada como Modo de enfoque en lugar de Modo de enfoque y Información sobre herramientas de DevTools.
Esta interfaz de usuario todavía está en desarrollo y puede cambiar en versiones futuras de Microsoft Edge. Estamos deseosos de escuchar sus comentarios sobre esta nueva interfaz de usuario de DevTools. Envíenos sus comentarios mediante tweets @EdgeDevTools. O bien, con el experimento Modo de enfoque activado, en la parte inferior de la barra de actividad, seleccione Ayuda (
) >Comentarios para mostrar la ventana Enviar comentarios.
Vea también:
-
DevTools: interfaz de usuario del modo de enfoque en el
MSEdgeExplainersrepositorio.
La consola puede aparecer de nuevo en los paneles superior e inferior
Desde la versión 87 de Microsoft Edge, ha podido mover cualquier herramienta entre los paneles superior e inferior, incluida la herramienta Consola. Sin embargo, los desarrolladores nos han dicho que mover la herramienta de consola repetidamente era complicado. A partir de la versión 96 de Microsoft Edge, se ha restaurado la experiencia predeterminada de la herramienta Consola, lo que le permite cambiar rápidamente entre una vista de pantalla completa de la consola (en el panel superior) y una vista de pantalla dividida (con la consola mostrada en el panel inferior), sin mover la herramienta Consola.
La consola se puede abrir en el cajón (ahora Vista rápida) en la parte inferior de DevTools, junto con otra herramienta:
Cuando se selecciona Consola en el panel superior, el panel inferior se minimiza automáticamente si el panel inferior muestra la consola:
Si solo desea permitir que la herramienta Consola se abra en un solo lugar, puede configurar el comportamiento de la consola:
En la barra de herramientas principal o en la barra de herramientas Cajón , haga clic con el botón derecho en la pestaña Consola y, a continuación, seleccione Configurar consola. Se muestrala página Preferenciasde configuración>.
En la sección Consola , desactive la casilla Mostrar la pestaña Mostrar consola en el panel principal y el cajón y, a continuación, haga clic en Cerrar (x).
Vea también:
- Herramientas de barra de actividad frente a herramientas de vista rápida en Acerca de la lista de herramientas
- Mueva las herramientas entre los paneles superior e inferior en Novedades de DevTools (Microsoft Edge 87).
Microsoft Edge DevTools Visual Studio Code extensión
Para obtener información general sobre esta extensión, vea Extensión Microsoft Edge DevTools para Visual Studio Code.
Mostrar el proyecto web dentro del editor y simular diferentes dispositivos
La extensión Microsoft Edge DevTools para Visual Studio Code ahora incluye un screencast acoplable y una emulación de dispositivo:
Puede ver el proyecto web en una pestaña dedicada dentro de Visual Studio Code y también simular varios dispositivos:
Para obtener más información sobre la emulación de dispositivos, consulte Emulación de dispositivo y estado.
Informes de problemas en directo e insertados
La extensión también ahora incluye informes de problemas en línea en directo. En lugar de averiguar los problemas de una herramienta independiente, Visual Studio Code resalta los problemas en el código fuente e informa de que están activos mientras escribe el código:
Para obtener más información, consulte Análisis de problemas en línea y en directo.
La herramienta Orígenes ahora le notifica cuándo no se pueden cargar los mapas de origen.
En la versión 96 de Microsoft Edge, la herramienta Orígenes ahora proporciona varias indicaciones en la interfaz de usuario cuando DevTools no puede cargar los mapas de origen. En la pestaña Página del panel Navegador de la herramienta Orígenes , los archivos que DevTools no puede cargar para los mapas de origen tienen un icono de advertencia en lugar del icono de archivo.
Al seleccionar un archivo con el icono de advertencia, se abre el archivo en la herramienta Orígenes con una barra de información que indica que DevTools no pudo capturar el mapa de origen correctamente desde el servidor o no pudo analizar el mapa de origen correctamente:
En la barra de información, puede obtener más información sobre el problema seleccionando el botón Abrir en problemas . A continuación, la herramienta Problemas se abre en el cajón (ahora panel Vista rápida ) en la parte inferior de DevTools y proporciona información sobre cómo resolver el problema y obtener el mapa de origen cargado correctamente en DevTools:
Para evitar que la barra de información sobre los mapas de origen abarrote la herramienta Orígenes , seleccione el botón No volver a mostrar . Para evitar que los problemas relacionados con los mapas de origen abarrotes la herramienta Problemas , desactive la casilla Incluir problemas de terceros en la herramienta Problemas .
Vea también:
La apertura de archivos de origen en Visual Studio Code ahora se integra mejor con la herramienta Orígenes
En versiones anteriores de Microsoft Edge, activar los archivos de código abierto en Visual Studio Code experimento tenía un comportamiento inesperado cuando ya había usado la herramienta Orígenes en DevTools. Establecer puntos de interrupción le dirigiría a Visual Studio Code o a la documentación para configurar el experimento correctamente.
En la versión 96 de Microsoft Edge, los archivos de código abierto de Visual Studio Code experimento ahora se integran mejor con la herramienta Orígenes.
Si la herramienta Orígenes está abierta y, a continuación, activa los archivos de código abierto en Visual Studio Code experimento, al establecer puntos de interrupción o abrir archivos ahora se abre la herramienta Orígenes, en lugar de dirigirle a Visual Studio Code o a la documentación para configurar el experimento correctamente.
Al igual que con las versiones anteriores de Microsoft Edge, si la herramienta Orígenes no está abierta en DevTools y, a continuación, activa los archivos de código abierto en Visual Studio Code experimento, estableciendo puntos de interrupción o abriendo archivos desde herramientas distintas de la herramienta Orígenes abre el archivo en Visual Studio Code.
Vea también:
- Apertura de archivos de origen en Visual Studio Code: cómo Se integra DevTools con Visual Studio Code.
Al seleccionar el icono de triángulo desplegable en la interfaz de usuario de DevTools, ahora se abre el menú.
En versiones anteriores de Microsoft Edge DevTools, al seleccionar el icono de triángulo junto a un menú desplegable no se mostraba el menú desplegable. Para abrir el menú desplegable, tenía que hacer clic en el elemento de menú seleccionado actualmente a la izquierda del icono del triángulo, como Sin limitación:
En la versión 96 de Microsoft Edge, este problema se ha corregido. Al seleccionar el icono de triángulo para cualquier menú desplegable en DevTools, ahora se abre el menú desplegable:
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 de los anuncios del proyecto Chromium es Novedades de DevTools (Chrome 96) y está creada por Jecelyn Yeen.
Esta obra está licenciada bajo una Licencia Internacional Creative Commons Attribution 4.0.