Desenvolver para a Web com o Microsoft Edge
Desenvolva para a Web com o Microsoft Edge usando o Microsoft Edge DevTools, extensões do Microsoft Edge, Aplicativos Web Progressivo, automação do WebDriver, WebView2 e muito mais.
Microsoft Edge DevTools
O navegador Microsoft Edge vem com ferramentas internas de desenvolvimento da Web, chamadas Microsoft Edge DevTools. DevTools é um conjunto de ferramentas de desenvolvimento da Web que aparece ao lado de uma página da Web renderizada no navegador. O DevTools fornece uma maneira poderosa de inspecionar e depurar páginas da Web e aplicativos Web. Você pode até editar arquivos de origem e criar projetos de site, tudo dentro do ambiente DevTools.
Com o DevTools, você pode fazer o seguinte:
Inspecione, ajuste e altere os estilos de elementos na página da Web usando ferramentas ao vivo com uma interface visual. Inspecione onde o navegador armazenava conteúdo para construir a página da Web, incluindo
.html
,.css
,.js
e.png
formatos de arquivo.Emule como sua página da Web se comporta em diferentes dispositivos e simule um ambiente móvel, completo com diferentes condições de rede. Inspecione o tráfego de rede e veja o local dos problemas.
Depure seu JavaScript usando a depuração do ponto de interrupção e com o console ao vivo. Encontre problemas de memória e problemas de renderização com seus aplicativos Web.
Encontre problemas de acessibilidade, desempenho, compatibilidade e segurança em seus produtos e use o DevTools para corrigir os problemas de acessibilidade encontrados.
Use um ambiente de desenvolvimento para sincronizar alterações no DevTools com o sistema de arquivos e da Web.
Consulte Visão geral do DevTools.
Extensões Microsoft Edge
Crie uma extensão para o Microsoft Edge, para adicionar ou modificar os recursos do navegador. As extensões melhoram a experiência do navegador, para fornecer uma função especializada que é importante para um público-alvo.
Você pode criar uma extensão do Microsoft Edge se tiver uma ideia ou produto baseado em um navegador da Web específico ou aprimoramentos em recursos de páginas da Web específicas. Exemplos de experiências complementares incluem bloqueadores de anúncios e gerenciadores de senhas.
Uma extensão do Microsoft Edge é estruturada de forma semelhante a um aplicativo Web regular e geralmente inclui:
- Um arquivo JSON de manifesto de aplicativo que contém informações básicas da plataforma.
- Um arquivo JavaScript que define o comportamento da extensão do navegador.
- Arquivos HTML e CSS que definem a interface do usuário.
Consulte Visão geral das extensões do Microsoft Edge.
Aplicativos Web progressivo
Os Aplicativos Web progressivos usam tecnologias web abertas para fornecer interoperabilidade entre plataformas. Eles funcionam como aplicativos nativos em plataformas de suporte e como sites regulares em outros navegadores.
Os Aplicativos Web progressivos combinam o melhor dos aplicativos web e compilados, para fornecer aos usuários uma experiência semelhante a um aplicativo, personalizada para seus dispositivos. Um Aplicativo Web Progressivo é um site que é progressivamente aprimorado para funcionar como aplicativos nativos instalados em plataformas de suporte, enquanto funciona como sites regulares em outros navegadores.
Os Aplicativos Web progressivos têm um custo de desenvolvimento entre plataformas muito menor do que os aplicativos compilados que exigem uma base de código específica para cada plataforma, como uma base de código separada para Android, para iOS e para cada sistema operacional desktop.
Consulte Visão geral do APLICATIVOS WEB Progressivo (PWAs).
WebView2
O controle WebView2 é alimentado pelo Microsoft Edge e permite que você insira tecnologias Web (HTML, CSS e JavaScript) em seus aplicativos nativos. Combine a ubiquidade da plataforma Web com as funcionalidades completas das plataformas nativas.
O diagrama a seguir mostra o espectro de aplicativos, do alcance máximo até a potência máxima:
Os aplicativos híbridos, no meio desse espectro, permitem que você aproveite o melhor dos dois mundos: a ubiquidade e a força da plataforma Web, combinadas com a potência e as funcionalidades completas da plataforma nativa.
Consulte Introdução ao Microsoft Edge WebView2.
Teste e automação
Veja a seguir as ferramentas para automatizar testes no Microsoft Edge:
- O Protocolo DevTools é usado para instrumentar, inspecionar, depurar e navegadores de perfil.
- Use avaliações de origem para experimentar APIs experimentais.
- O dramaturgo fornece automação entre navegadores por meio de uma única API.
- A API do Puppeteer controla o Microsoft Edge por meio do Protocolo DevTools.
- O WebDriver simula a interação do usuário com o Microsoft Edge.
- webhint linting verifica código para erros e práticas recomendadas.
Consulte Teste e automação no Microsoft Edge.
Dicas de desenvolvimento para o Microsoft Edge
Há muitas dicas e truques para estar ciente ao criar sites ou aplicativos Web que funcionam no Microsoft Edge, incluindo:
- Teste para as próximas alterações que podem afetar a compatibilidade do seu site com o Microsoft Edge.
- Mover usuários para o Microsoft Edge da Internet Explorer.
- Configurando a prevenção de rastreamento no Microsoft Edge.
- Detectando o Microsoft Edge em seu site.
- Personalizando o botão Revelação de Senha.
- Detectando Windows 11 usando dicas de cliente User-Agent.
Confira Dicas de desenvolvimento para o Microsoft Edge.
Integração do Microsoft Edge IDE
Vários recursos das ferramentas da Microsoft fornecem integração do desenvolvimento usando o Microsoft Edge, Visual Studio Code e Visual Studio, para desenvolver seus produtos, páginas da Web e aplicativos Web que usam e funcionam com integração completa no Microsoft Edge.
Consulte Integração do IDE do Microsoft Edge.
Acessibilidade no Microsoft Edge
O desenvolvimento de suas páginas da Web, aplicativos Web e produtos habilitados para a Web tem suporte robusto por meio dos extensos recursos de acessibilidade no Microsoft Edge e seu ecossistema de ferramentas.
Consulte Acessibilidade no Microsoft Edge.
Como usar essa documentação
As seções a seguir são dicas para usar o site do Microsoft Learn.
Ampliar uma imagem em um artigo
Para ver detalhes de uma captura de tela ou diagrama:
Clique com o botão direito do mouse na imagem e selecione Abrir imagem na nova guia.
Feche a guia imagem para retornar ao artigo.
Procure palavras-chave e termos na caixa de texto "Filtrar por título"
A caixa de texto Filtrar por título de várias finalidades dá suporte a:
- Navegando na tabela de conteúdo (TOC).
- Pesquisa de termo de índice de palavras-chave.
- Pesquisa de texto completo da documentação.
Na caixa Filtrar por título no canto superior esquerdo, insira um termo ou palavra-chave para localizar:
Se o artigo desejado não for encontrado, selecione Pesquisar por "termo de pesquisa" em toda a documentação do Microsoft Edge:
A página de pesquisa de texto completo pesquisa inicialmente toda a documentação do Microsoft Edge . Ou clique no link Exibir todos os resultados para uma pesquisa mais ampla:
Fornecer comentários ou problemas de relatório na documentação do Desenvolvedor do Microsoft Edge
Para fornecer comentários ou inserir problemas:
- Entre em contato com a equipe do Microsoft Edge DevTools
- Entrar em contato com o suporte a extensões do Microsoft Edge
- Entre em contato com a equipe do WebView2
Para enviar e exibir comentários para uma página específica da documentação, na parte inferior da página, clique no botão Esta página .