Compartilhar via

Desenvolver para a Web com o Microsoft Edge

  • Artigo

Desenvolva para a Web com o Microsoft Edge com o Microsoft Edge DevTools, extensões do Microsoft Edge, Aplicativos Web Progressivas, automatização do WebDriver, WebView2 e muito mais.

Microsoft Edge DevTools

O browser Microsoft Edge inclui ferramentas de desenvolvimento Web incorporadas, denominadas Microsoft Edge DevTools. DevTools é um conjunto de ferramentas de desenvolvimento Web que aparece junto a uma página Web composta no browser. O DevTools fornece uma forma avançada de inspecionar e depurar páginas Web e aplicações Web. Pode até editar ficheiros de origem e criar projetos de site, tudo no ambiente DevTools.

Com o DevTools, pode fazer o seguinte:

  • Inspecione, ajuste e altere os estilos dos elementos na página Web com ferramentas dinâmicas com uma interface visual. Inspecione onde o browser armazenou conteúdo para construir a página Web, incluindo .htmlos formatos de ficheiro , .css, .jse .png .

  • Emula o comportamento da sua página Web em diferentes dispositivos e simula um ambiente móvel, com condições de rede diferentes. Inspecione o tráfego de rede e veja a localização dos problemas.

  • Depure o JavaScript com a depuração de pontos de interrupção e com a consola dinâmica. Encontre problemas de memória e problemas de composição com as suas aplicações Web.

  • Encontre problemas de acessibilidade, desempenho, compatibilidade e segurança nos seus produtos e utilize DevTools para corrigir os problemas de acessibilidade encontrados.

  • Utilize um ambiente de desenvolvimento para sincronizar as alterações no DevTools com o sistema de ficheiros e a partir da Web.

Veja Descrição geral das DevTools.

Extensões Microsoft Edge

Crie uma extensão para o Microsoft Edge, para adicionar ou modificar as funcionalidades do browser. As extensões melhoram a experiência do browser, para fornecer uma função especializada que é importante para um público-alvo.

Pode criar uma extensão do Microsoft Edge se tiver uma ideia ou um produto baseado num browser específico ou melhorias nas funcionalidades de páginas Web específicas. Exemplos de experiências complementares incluem bloqueadores de anúncios e gestores de palavras-passe.

Uma extensão do Microsoft Edge é estruturada de forma semelhante a uma aplicação Web normal e, normalmente, inclui:

  • Um ficheiro JSON de manifesto de aplicação que contém informações básicas da plataforma.
  • Um ficheiro JavaScript que define o comportamento da extensão do browser.
  • Ficheiros HTML e CSS que definem a interface de utilizador.

Veja Descrição geral das extensões do Microsoft Edge.

Aplicativos Web Progressivas

Os Aplicativos Web progressivas utilizam tecnologias Web abertas para proporcionar interoperabilidade entre plataformas. Funcionam como aplicações nativas em plataformas de suporte e como sites normais noutros browsers.

Os Aplicativos Web progressivas combinam o melhor da Web e das aplicações compiladas, para proporcionar aos utilizadores uma experiência semelhante a uma aplicação, personalizada para os respetivos dispositivos. Uma Aplicação Web Progressiva é um site progressivamente melhorado para funcionar como aplicações nativas instaladas em plataformas de suporte, ao mesmo tempo que funciona como sites normais noutros browsers.

As Aplicativos Web progressivas têm um custo de desenvolvimento para várias plataformas muito mais baixo do que as aplicações compiladas que requerem 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 operativo de ambiente de trabalho.

Veja Descrição geral da Aplicativos Web Progressiva (PWAs).

WebView2

O controlo WebView2 é alimentado pelo Microsoft Edge e permite-lhe incorporar tecnologias Web (HTML, CSS e JavaScript) nas suas aplicações nativas. Combine a ubiquidade da plataforma Web com todas as capacidades das plataformas nativas.

Diagrama de uma aplicação com áreas de IU nativas à esquerda e superior esquerda e áreas de IU webView2 no canto superior direito e inferior

O diagrama seguinte mostra o espetro das aplicações, desde o alcance máximo até à potência máxima:

O espectro de aplicações, desde o alcance máximo, mas menos potência, até uma mistura híbrida ideal, até à potência máxima, mas menos alcance

As aplicações híbridas, no meio deste espetro, permitem-lhe desfrutar do melhor dos dois mundos: a ubiquidade e a força da plataforma Web, combinadas com a potência e as capacidades completas da plataforma nativa.

Consulte Introdução ao Microsoft Edge WebView2.

Teste e automatização

Seguem-se ferramentas para automatizar os testes no Microsoft Edge:

  • O Protocolo DevTools é utilizado para instrumentar, inspecionar, depurar e criar perfis.
  • Utilize As Avaliações de Origem para experimentar APIs experimentais.
  • O Playwright fornece automatização entre browsers através de uma única API.
  • A API do Puppeteer controla o Microsoft Edge através do Protocolo DevTools.
  • O WebDriver simula a interação do utilizador com o Microsoft Edge.
  • O linting webhint verifica o código quanto a erros e melhores práticas.

Veja Testar e automatizar no Microsoft Edge.

Sugestões de desenvolvimento para o Microsoft Edge

Existem muitas sugestões e truques a ter em conta ao criar sites ou aplicações Web que funcionam no Microsoft Edge, incluindo:

  • Teste as próximas alterações que podem afetar a compatibilidade do seu site com o Microsoft Edge.
  • Mover utilizadores para o Microsoft Edge a partir da Internet Explorer.
  • Configurar a prevenção de controlo no Microsoft Edge.
  • Detetar o Microsoft Edge a partir do seu site.
  • Personalizar o botão Revelar Palavra-passe.
  • Detetar Windows 11 com sugestões de cliente User-Agent.

Consulte Sugestões de desenvolvimento para o Microsoft Edge.

Integração do IDE do Microsoft Edge

Várias funcionalidades das ferramentas da Microsoft fornecem integração de desenvolvimento com o Microsoft Edge, Visual Studio Code e Visual Studio, para desenvolver os seus produtos, páginas Web e aplicações Web que utilizam e trabalham com integração total no Microsoft Edge.

Veja Integração do IDE do Microsoft Edge.

Acessibilidade no Microsoft Edge

O desenvolvimento das suas páginas Web, aplicações Web e produtos preparados para a Web é suportado de forma robusta através das extensas funcionalidades de Acessibilidade no Microsoft Edge e no respetivo ecossistema de ferramentas.

Veja Acessibilidade no Microsoft Edge.

Como utilizar esta documentação

As secções seguintes são sugestões para utilizar o site do Microsoft Learn.

Ampliar uma imagem num artigo

Para ver os detalhes de uma captura de ecrã ou diagrama:

  1. Clique com o botão direito do rato na imagem e, em seguida, selecione Abrir imagem no novo separador.

  2. Feche o separador da imagem para voltar ao artigo.

Procurar palavras-chave e termos na caixa de texto "Filtrar por título"

A caixa de texto Filtrar por título multiusos suporta:

  • Navegar no índice.
  • Pesquisa de termos de índice de palavras-chave.
  • Pesquisa em texto completo da documentação.

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

A caixa de texto

Se o artigo pretendido não for encontrado, selecione Procurar "search-term" em toda a documentação do Microsoft Edge:

Se a palavra de título ou o termo de índice não for encontrado, é fornecida uma opção para procurar em texto completo toda a documentação do Microsoft Edge

A página de pesquisa em texto completo pesquisa inicialmente toda a documentação do Microsoft Edge . Em alternativa, clique na ligação Ver todos os resultados para uma pesquisa mais abrangente:

A página de pesquisa em texto completo pesquisa inicialmente toda a documentação do Microsoft Edge ou pode clicar na ligação

Fornecer comentários ou comunicar problemas na documentação do Programador do Microsoft Edge

Para fornecer comentários ou introduzir problemas:

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