Desarrollo para la web con Microsoft Edge
Desarrolle para la web con Microsoft Edge mediante Microsoft Edge DevTools, extensiones de Microsoft Edge, Web Apps progresiva, automatización de WebDriver, WebView2 y mucho más.
Microsoft Edge DevTools
El explorador Microsoft Edge incluye herramientas de desarrollo web integradas, denominadas Microsoft Edge DevTools. DevTools es un conjunto de herramientas de desarrollo web que aparece junto a una página web representada en el explorador. DevTools proporciona una manera eficaz de inspeccionar y depurar páginas web y aplicaciones web. Incluso puede editar archivos de origen y crear proyectos de sitio web, todo dentro del entorno de DevTools.
Con DevTools, puede hacer lo siguiente:
Inspeccione, ajuste y cambie los estilos de los elementos de la página web mediante herramientas dinámicas con una interfaz visual. Inspeccione dónde almacenó el contenido del explorador para construir la página web, incluidos
.htmllos formatos de archivo ,.css,.jsy.png.Emula cómo se comporta la página web en distintos dispositivos y simula un entorno móvil, completo con diferentes condiciones de red. Inspeccione el tráfico de red y vea la ubicación de los problemas.
Depuración de JavaScript mediante la depuración de puntos de interrupción y con la consola en directo. Busque problemas de memoria y problemas de representación con las aplicaciones web.
Busque problemas de accesibilidad, rendimiento, compatibilidad y seguridad en sus productos y use DevTools para corregir los problemas de accesibilidad que se encuentran.
Use un entorno de desarrollo para sincronizar los cambios en DevTools con el sistema de archivos y desde la web.
Consulte Información general de DevTools.
Extensiones de Microsoft Edge
Cree una extensión para Microsoft Edge para agregar o modificar las características del explorador. Las extensiones mejoran la experiencia del explorador para proporcionar una función especializada que sea importante para un público de destino.
Puede crear una extensión de Microsoft Edge si tiene una idea o un producto que se basa en un explorador web específico o en mejoras en las características de páginas web específicas. Algunos ejemplos de experiencias complementarias son los bloqueadores de anuncios y los administradores de contraseñas.
Una extensión de Microsoft Edge se estructura de forma similar a una aplicación web normal y normalmente incluye:
- Un archivo JSON de manifiesto de aplicación que contiene información básica de la plataforma.
- Un archivo JavaScript que define el comportamiento de la extensión del explorador.
- Archivos HTML y CSS que definen la interfaz de usuario.
Consulte Introducción a las extensiones de Microsoft Edge.
Web Apps progresiva
Las Web Apps progresivas usan tecnologías web abiertas para proporcionar interoperabilidad multiplataforma. Funcionan como aplicaciones nativas en plataformas auxiliares y como sitios web normales en otros exploradores.
Las Web Apps progresivas combinan lo mejor de la web y las aplicaciones compiladas para proporcionar a los usuarios una experiencia similar a la de la aplicación, personalizada para sus dispositivos. Una aplicación web progresiva es un sitio web que se ha mejorado progresivamente para funcionar como aplicaciones nativas instaladas en plataformas auxiliares, mientras funciona como sitios web normales en otros exploradores.
Las Web Apps progresivas tienen un costo de desarrollo multiplataforma mucho menor que las aplicaciones compiladas que requieren un código base específico para cada plataforma, como un código base independiente para Android, para iOS y para cada sistema operativo de escritorio.
Consulte Introducción a la Web Apps progresiva (PPA).
WebView2
El control WebView2 tiene tecnología de Microsoft Edge y le permite insertar tecnologías web (HTML, CSS y JavaScript) en las aplicaciones nativas. Combine la ubicuidad de la plataforma web con las funcionalidades completas de las plataformas nativas.
En el diagrama siguiente se muestra el espectro de aplicaciones, desde el alcance máximo hasta la potencia máxima:
Las aplicaciones híbridas, en medio de este espectro, le permiten disfrutar de lo mejor de ambos mundos: la ubicuidad y la fuerza de la plataforma web, combinadas con la potencia y las capacidades completas de la plataforma nativa.
Consulte Introducción a Microsoft Edge WebView2.
Pruebas y automatización
Las siguientes son herramientas para automatizar las pruebas en Microsoft Edge:
- El protocolo DevTools se usa para instrumentar, inspeccionar, depurar y generar perfiles de exploradores.
- Use las pruebas de origen para probar las API experimentales.
- Playwright proporciona automatización entre exploradores a través de una única API.
- La API de Puppeteer controla Microsoft Edge a través del protocolo DevTools.
- WebDriver simula la interacción del usuario con Microsoft Edge.
- webhint linting comprueba si hay errores y procedimientos recomendados en el código.
Consulte Prueba y automatización en Microsoft Edge.
Sugerencias de desarrollo para Microsoft Edge
Hay muchos consejos y trucos que debe tener en cuenta al crear sitios web o aplicaciones web que funcionan en Microsoft Edge, entre los que se incluyen:
- Prueba de los próximos cambios que podrían afectar a la compatibilidad de su sitio web con Microsoft Edge.
- Mover usuarios a Microsoft Edge desde Internet Explorer.
- Configuración de la prevención de seguimiento en Microsoft Edge.
- Detección de Microsoft Edge desde su sitio web.
- Personalizar el botón Mostrar contraseña.
- Detección de Windows 11 mediante sugerencias de cliente de User-Agent.
Consulte Sugerencias de desarrollo para Microsoft Edge.
Integración del IDE de Microsoft Edge
Varias características de las herramientas de Microsoft proporcionan la integración del desarrollo mediante Microsoft Edge, Visual Studio Code y Visual Studio, para desarrollar sus productos, páginas web y aplicaciones web que usan y funcionan con integración completa en Microsoft Edge.
Consulte Integración del IDE de Microsoft Edge.
Accesibilidad en Microsoft Edge
El desarrollo de páginas web, aplicaciones web y productos habilitados para la web se admite de forma sólida a través de las amplias características de accesibilidad de Microsoft Edge y su ecosistema de herramientas.
Consulte Accesibilidad en Microsoft Edge.
Uso de esta documentación
Las secciones siguientes son sugerencias para usar el sitio web de Microsoft Learn.
Zoom de una imagen en un artículo
Para ver los detalles de una captura de pantalla o diagrama:
Haga clic con el botón derecho en la imagen y, a continuación, seleccione Abrir imagen en la nueva pestaña.
Cierre la pestaña de imagen para volver al artículo.
Buscar palabras clave y términos en el cuadro de texto "Filtrar por título"
El cuadro de texto Filtro por título multiuso admite:
- Navegar por la tabla de contenido (TOC).
- Búsqueda de términos de índice de palabras clave.
- Búsqueda de texto completo de la documentación.
En el cuadro Filtrar por título de la esquina superior izquierda, escriba un término o una palabra clave para buscar:
Si no se encuentra el artículo deseado, seleccione Buscar "término de búsqueda" en toda la documentación de Microsoft Edge:
La página de búsqueda de texto completo busca inicialmente toda la documentación de Microsoft Edge . O bien, haga clic en el vínculo Ver todos los resultados para una búsqueda más amplia:
Proporcionar comentarios o notificar problemas en la documentación para desarrolladores de Microsoft Edge
Para proporcionar comentarios o escribir problemas:
- Póngase en contacto con el equipo de Microsoft Edge DevTools
- Póngase en contacto con el equipo de extensiones de Microsoft Edge
- Póngase en contacto con el equipo de WebView2
Para enviar y ver los comentarios de una página específica de la documentación, en la parte inferior de la página, haga clic en el botón Esta página .