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, .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 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.

Diagrama de um aplicativo com áreas nativas da interface do usuário no canto esquerdo e superior esquerdo e áreas da interface do usuário do WebView2 na parte superior direita e inferior

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

O espectro de aplicativos, do alcance máximo, mas menos energia, a uma mistura híbrida ideal, até a potência máxima, mas menos alcance

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:

  1. Clique com o botão direito do mouse na imagem e selecione Abrir imagem na 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 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:

A caixa de texto

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

Se a palavra título ou termo de índice não for encontrado, uma opção será fornecida para pesquisar em texto completo 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:

A página de pesquisa de texto completo pesquisa inicialmente toda a documentação do Microsoft Edge ou você pode clicar no link 'Exibir todos os resultados' para obter 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:

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 .