Desenvolver para a Web com Microsoft Edge

Desenvolva para a Web com o Microsoft Edge usando recursos de plataforma Web baseados em padrões, Microsoft Edge DevTools, extensões do Microsoft Edge, Aplicativos Web Progressivos, automação WebDriver, WebView2 e muito mais.

Para obter a documentação do usuário final sobre como usar o Microsoft Edge, consulte:

• Conheça o Microsoft Edge
• Ajuda & aprendizado do Microsoft Edge

Notas de versão

Para se manter atualizado com as alterações de recursos da plataforma da Web no Microsoft Edge e no projeto de código aberto do Chromium, consulte:

• Notas de versão para a plataforma Web do Microsoft Edge
• Compatibilidade do site - alterações que afetam o Microsoft Edge

APIs experimentais para Microsoft Edge

Use as avaliações de origem para experimentar APIs e recursos experimentais em seu site ativo por um período limitado. Ao usar avaliações de origem, os usuários do Microsoft Edge que visitam seu site podem executar um código que usa APIs e recursos experimentais.

Confira:

• Testar APIs e recursos experimentais usando avaliações de origem

Microsoft Edge DevTools

O navegador Microsoft Edge vem com ferramentas internas de desenvolvimento na Web, chamadas Microsoft Edge DevTools. O DevTools é um conjunto de ferramentas de desenvolvimento na 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 dos elementos na página da web usando ferramentas dinâmicas com interface visual. Inspecione onde o navegador armazenou o conteúdo para construir a página da Web, incluindo .html, .css, .jse .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 a localização dos problemas.

• Depure seu JavaScript usando a depuração de ponto de interrupção e com o console ao vivo. Encontre problemas de memória e 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 em melhorias nos 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 comum e geralmente inclui:

• Um arquivo JSON de manifesto do 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 progressivos

Os Aplicativos Web progressivos usam tecnologias da Web abertas para fornecer interoperabilidade entre plataformas. Eles funcionam como aplicativos nativos em plataformas de suporte e como sites comuns em outros navegadores.

Os Aplicativos Web Progressivos combinam o melhor da Web e aplicativos compilados para fornecer aos usuários uma experiência semelhante a um aplicativo, personalizada para seus dispositivos. Um Progressive Web App é um site que é aprimorado progressivamente para funcionar como aplicativos nativos instalados em plataformas de suporte, enquanto funciona como sites normais em outros navegadores.

Os progressivos Aplicativos Web têm um custo de desenvolvimento multiplataforma 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 de desktop.

Consulte Visão geral dos PWAs (Aplicativos Web Progressivos).

WebView2

O controle WebView2 é da plataforma Microsoft Edge e permite que você insira tecnologias da Web (HTML, CSS e JavaScript) nos seus aplicativos nativos. Combine a onipresença da plataforma Web com todos os recursos das plataformas nativas.

O diagrama a seguir mostra o espectro de aplicativos, do alcance máximo a potência máxima:

Aplicativos híbridos, no meio desse espectro, permitem que você aproveite o melhor dos dois mundos: a onipresença e a força da plataforma Web, combinadas com a potência e os recursos completos da plataforma nativa.

Consulte Introdução ao Microsoft Edge WebView2.

Teste e automação

A seguir estão as ferramentas para automatizar os testes no Microsoft Edge:

• O protocolo DevTools é usado para instrumentar, inspecionar, depurar e criar perfis de navegadores.
• Use avaliações de origem para experimentar APIs experimentais.
• A Playwright 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 o código em busca de erros e práticas recomendadas.

Confira Teste e automação no Microsoft Edge.

Dicas de desenvolvimento para a Web específicas do Edge

O Microsoft Edge implementa APIs e recursos da Web baseados em padrões, que você pode usar para desenvolver sites que funcionam em todos os mecanismos do navegador. Além disso, o Microsoft Edge oferece alguns recursos de desenvolvimento na Web específicos do Edge.

Consulte Dicas de desenvolvimento para a Web específicas do Edge.

Integração com Microsoft Edge IDE

Vários recursos de ferramentas da Microsoft fornecem integração de desenvolvimento usando 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 total no Microsoft Edge.

Confira a integração do Microsoft Edge IDE.

Acessibilidade no Microsoft Edge

O desenvolvimento de suas páginas da Web, aplicativos Web e produtos habilitados para Web tem suporte robusto por meio dos amplos recursos de Acessibilidade no Microsoft Edge e seu ecossistema de ferramentas.

Confira Acessibilidade no Microsoft Edge.

Como usar esta documentação

As seções a seguir são dicas para usar o site do Microsoft Learn.

Exibir documentos do usuário final sobre o Microsoft Edge

O presente site (learn.microsoft.com) é para documentação do desenvolvedor. Para obter documentos do usuário final do Microsoft Edge, consulte:

• Ajuda do Microsoft Edge & aprendizado - support.microsoft.com.
• Faça mais com o Edge - Centro de aprendizagem em Microsoft.com.

Veja também:

• Documentação do usuário sobre extensões do Microsoft Edge
• Usar PWAs (Aplicativos Web Progressivos) no Microsoft Edge
• Perguntas frequentes sobre o usuário final do WebView2

Ampliar uma imagem em um artigo

Para ver os detalhes de uma captura de tela ou diagrama:

1. Clique com o botão direito do mouse na imagem e selecione Abrir imagem em uma nova guia.

2. 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 multifuncional Filtrar por título dá suporte a:

• Navegando no sumário (TOC).
• Pesquisa de termos de índice de palavras-chave.
• Pesquisa de texto completo da documentação.

Na caixa Filtrar por título , no canto superior esquerdo, digite um termo ou uma palavra-chave para localizar:

Se o artigo desejado não for encontrado, selecione Pesquisar "termo de pesquisa" em toda a documentação do Microsoft Edge:

Inicialmente, a página de pesquisa de texto completo pesquisa toda a documentação do Microsoft Edge . Ou, clique no link Exibir todos os resultados para uma pesquisa mais ampla:

Fornecer comentários ou relatar problemas na documentação do desenvolvedor do Microsoft Edge

Para fornecer comentários ou inserir problemas:

• Entre em contato com a equipe de DevTools do Microsoft Edge
• Entre em contato com a equipe de extensões do Microsoft Edge
• Entrar em contato com a equipe do WebView2

Para enviar e exibir comentários de uma página específica da documentação, na parte inferior da página, clique no botão Esta página .