Descubra y obtenga información sobre las nuevas tecnologías y productos de desarrollo web de Microsoft Edge, como DevTools, api y características de plataforma web, Web Apps progresivas y WebView2.
Esta página contiene vínculos a vídeos breves, cada uno centrado en una sola característica e incluyendo una demostración.
Microsoft publica vídeos nuevos de forma periódica en el canal de YouTube de Microsoft Edge y también se enumeran a continuación.
Haga clic en una miniatura de la lista siguiente para watch el vídeo correspondiente en YouTube.
Explicar los errores de la consola de DevTools mediante Copilot en Edge
8 de febrero de 2024
Las herramientas de consola y orígenes de Microsoft Edge DevTools ahora se integran con Copilot en Microsoft Edge para ayudarle a comprender los errores y el código fuente. Use esta característica para obtener ayuda con la depuración del código.
El visor JSON da formato y resalta automáticamente las respuestas JSON y los archivos en las pestañas del explorador. Cuando el servidor web responde a solicitudes HTTP con datos codificados como JSON, estos datos no siempre son fáciles de leer y, a veces, se devuelven como una línea de texto. El visor JSON cambia los datos devueltos para facilitar la lectura. La sintaxis JSON se resalta con colores diferentes, las propiedades del objeto se muestran en sus propias líneas y se aplica sangría, y los objetos se pueden contraer o expandir.
Este vídeo ligeramente anterior (septiembre de 2022) muestra la interfaz de usuario heredada para DevTools:
En lugar de la barra de actividad, el vídeo muestra la barra de herramientas principal.
En lugar del panel Vista rápida , el vídeo muestra el cajón en la parte inferior de DevTools.
Cubre:
La estructura de la interfaz de usuario de DevTools, con la barra de herramientas principal y el panel en la parte superior, y la barra de herramientas y el panel del cajón en la parte inferior.
Cómo se organiza la interfaz de usuario de Microsoft Edge DevTools.
Qué hacen las partes principales de la interfaz de DevTools.
Qué herramientas están disponibles.
Herramienta Inspeccionar .
Modo de emulación de dispositivo.
Herramientas en la barra de herramientas principal o en el cajón.
Botón Más pestañas .
El botón Más herramientas para ver las más de 30 herramientas.
Herramientas de cierre.
Reordenación de herramientas en la barra de herramientas principal.
Cajón y su barra de herramientas.
Mover herramientas entre la barra de herramientas principal y la barra de herramientas cajón .
La herramienta Vista 3D de Microsoft Edge DevTools proporciona una representación tridimensional de la página web que está inspeccionando. Use la herramienta vista 3D para depurar problemas comunes de desarrollo web, como:
Estilo completo de la parte desplegable de un HTML <select> con el nuevo <selectmenu> elemento
31 de mayo de 2022
Los elementos de estilo <select> han sido desafiantes. El elemento experimental <selectmenu> (o <selectlist>) promete superar las limitaciones restantes al permitir a los desarrolladores web aplicar estilo a todas las partes del elemento.
Actualización de junio de 2024: este nuevo elemento sigue siendo experimental. Se <selectmenu> cambió el nombre del elemento a <selectlist> en 2023.
Problemas avanzados de filtrado en Edge DevTools y VSCode
20 de mayo de 2022
Cada producto web tiene problemas. La herramienta Microsoft Edge DevTools Issues analiza la página web actual e informa de problemas agrupados por tipo, como accesibilidad, compatibilidad, rendimiento, etc.
La extensión Microsoft Edge DevTools para Visual Studio Code hace que los problemas estén disponibles directamente en el código fuente.
Los productos publicados pueden tener problemas. En función de sus comentarios, hemos agregado formas útiles de filtrar los problemas. Puede deshabilitar los problemas procedentes de bibliotecas de terceros y elegir los exploradores sobre los que ver los problemas.
Creación de una animación vinculada a desplazamiento sin JavaScript
12 de mayo de 2022
Obtenga información sobre la característica de animaciones vinculadas a desplazamiento CSS y cómo se puede usar para crear un indicador de progreso de lectura en una página web, sin usar JavaScript. Esta es una característica de la plataforma web en su conjunto, no solo Microsoft Edge.
A partir del 21 de julio de 2023, esta característica ya no es experimental y ahora se admite en Microsoft Edge sin marca. Descripción de 2022: las animaciones vinculadas a desplazamiento CSS son una característica experimental en Microsoft Edge; Para probar esta característica, vaya a y, a edge://flags continuación, habilite la configuración características de plataforma web experimental .
Resaltar texto en la web con la API de resaltado personalizado de CSS
28 de abril de 2022
Aplicar estilos a rangos de texto en la web es muy útil, pero históricamente ha sido algo complicado de hacer.
La API de resaltado personalizado de CSS es el futuro del resaltado de intervalos de texto en la Web. Esta API proporciona a los desarrolladores web características de JavaScript y CSS que facilitan y hacen más eficaz el estilo de cualquier rango de texto.
Repositorio de Herramientas de desarrollo de Microsoft Edge para enviar comentarios e ideas.
Se han agregado idiomas checo y vietnamita para la interfaz de usuario de DevTools.
En la herramienta Memoria , filtre las instantáneas del montón por tipo de nodo.
La herramienta Red tiene una columna Completado por , que muestra el trabajo del servicio o la memoria caché.
Los vínculos de un perfil de rendimiento importado usan mapas de origen del servidor de símbolos de Azure Artifacts para volver a asignar al código fuente original conocido.
Descripciones automáticas de imágenes en Microsoft Edge
17 de marzo de 2022
Microsoft Edge proporciona texto alternativo generado automáticamente para las imágenes que no lo incluyen. El texto alternativo generado automáticamente ayuda a los usuarios de tecnología de asistencia, como los lectores de pantalla, a descubrir el significado o la intención de una imagen en la web.
Muchas personas ciegas o con poca visión experimentan la web principalmente a través de un lector de pantalla: una tecnología de asistencia que lee el contenido de cada página en voz alta. Los lectores de pantalla dependen de tener etiquetas de imagen (texto alternativo o "texto alternativo") siempre que les permita describir contenido visual (como imágenes y gráficos) para que el usuario pueda comprender todo el contenido de la página. El texto alternativo es fundamental para que la web sea accesible, pero a menudo se pasa por alto. A más de la mitad de las imágenes procesadas por los lectores de pantalla les falta texto alternativo.
Depuración de pérdidas de memoria con la herramienta Elementos desasociados de Microsoft Edge
9 de diciembre de 2021
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 .
La herramienta Detached Elements le ayuda a investigar y resolver pérdidas de memoria DOM.
Las pérdidas de memoria se producen cuando el código JavaScript de una aplicación conserva cada vez más objetos en la memoria en lugar de liberarlos para que el explorador recopile elementos no utilizados. Hemos creado la herramienta Detached Elements con los desarrolladores de Microsoft Teams y ya nos ha ayudado a encontrar y corregir fugas de memoria en muchos de nuestros propios sitios web y aplicaciones.
El equipo de Microsoft Edge especificó e implementó la nueva API EyeDropper en colaboración con el proyecto de código abierto Chromium. Proporcionar comentarios en Problemas: WICG/cuentagotas | github.com.
Muchas aplicaciones creativas permiten a los usuarios elegir colores de partes de una ventana de aplicación o incluso de toda la pantalla, normalmente usando una metáfora de cuentagotas. La API EyeDropper permite a los autores usar un cuentagotas proporcionado por el explorador en la construcción de selectores de colores personalizados en la web.
Los iconos de punto de interrupción se muestran al usar temas de Visual Studio Code.
La extensión DevTools para Visual Studio Code incluye las herramientas más recientes, compatibilidad con temas y vínculos útiles. Conexión del depurador de JavaScript a áreas de trabajo remotas.
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:
Microsoft Edge ofrece una plataforma y herramientas atractivas y coherentes para los 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. Obtenga información sobre lo último en la plataforma Edge, las herramientas y las aplicaciones web.
Cubre:
Seguimientos de lápiz delegados.
Nuevas funcionalidades web para desarrolladores.
Ejecute en el inicio de sesión del sistema operativo.
Ignite | Marzo de 2021 | Encendiendo la historia Web Apps
2 de marzo de 2021
Las Web Apps progresivas (PWA) se admiten en Microsoft Edge y representan una oportunidad para mejorar la detectabilidad y la interacción con la aplicación. Nuevas funcionalidades de la plataforma web. Cómo se integran estas aplicaciones web modernas sin problemas con Microsoft Windows.
Cubre:
La capacidad de modernizar.
Esfuerzos conjuntos para potenciar la plataforma web.
Microsoft Edge y el motor del explorador Chromium.
Funcionalidades de Microsoft Edge y web (Project Fugu).
Ignite | Septiembre de 2020 | Lo último en herramientas para desarrolladores
22 de septiembre de 2020
Las herramientas para desarrolladores de Microsoft Edge ayudan a facilitar el desarrollo web, las pruebas y la automatización. Obtenga información sobre cómo priorizamos la accesibilidad en nuestras herramientas y aplicaciones, y cómo ayudamos a los demás a hacer lo mismo.
Cubre:
Extensión DevTools para VS Code.
Automatización y pruebas entre exploradores. Selenium, WebDriver, Puppeteer, Playwright y CI/CD a través de contenedores de Docker.
Colaboración en el motor del explorador Chromium. Cómo contribuir.
Interfaz de usuario localizada en las herramientas de desarrollo.
En este módulo, se tratan varios conceptos sobre el tema de accesibilidad y cómo agregarla a las aplicaciones web durante el desarrollo web. Aprenderá la importancia de usar etiquetas HTML correctamente para describir la información y diversas mejoras que puede realizar en sus sitios.