Integração do Microsoft Edge IDE

  • Artigo

Vários recursos das ferramentas da Microsoft fornecem integração de 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.

Extensão DevTools do Microsoft Edge para Visual Studio Code

A extensão DevTools do Microsoft Edge para Visual Studio Code permite que você use a ferramenta Elementos e a ferramenta Rede do navegador Microsoft Edge de dentro de Visual Studio Code.

Sem sair Visual Studio Code, use o Microsoft Edge DevTools para anexar a uma instância ou iniciar uma instância do Microsoft Edge e, em seguida:

  • Exiba a estrutura HTML do runtime.
  • Altere o layout da página da Web.
  • Altere estilos CSS e corrija problemas de estilo.
  • Leia mensagens de console.
  • Exibir solicitações de rede.

Consulte a extensão DevTools do Microsoft Edge para obter Visual Studio Code.

Arquivos de código aberto no Visual Studio Code

Os arquivos de código-fonte aberto no experimento Visual Studio Code permitem que você use o Microsoft Edge DevTools, mas edite seus arquivos no Visual Studio Code em vez de no editor de código da ferramenta DevTools Sources.

Ao usar esse experimento, se você usar Visual Studio Code e usar DevTools para alterar as regras do CSS, não precisará mais usar o editor de código na ferramenta Fontes do DevTools. Você pode simplesmente usar o editor de código no Visual Studio Code. Quando você ativar esse experimento, os arquivos locais receberão um tratamento diferente.

Consulte Abrir arquivos de origem no Visual Studio Code.

Depurar o Microsoft Edge em Visual Studio Code

Visual Studio Code inclui um depurador interno para o Microsoft Edge, que pode iniciar o navegador ou anexar a um navegador já em execução.

Esse depurador interno permite depurar seu código JavaScript de front-end linha por linha e ver console.log() instruções diretamente de Visual Studio Code.

Consulte Depurar o Microsoft Edge no Visual Studio Code.

A extensão webhint para Visual Studio Code

Use o webhint, uma ferramenta de linting personalizável, para melhorar a funcionalidade do seu site, incluindo:

  • Acessibilidade.
  • Desempenho.
  • Compatibilidade entre navegadores.
  • Compatibilidade PWA.
  • Segurança.

webhint verifica seu código em busca de práticas recomendadas e erros comuns. Identifique e corrija problemas em seus arquivos, incluindo HTML, CSS, JavaScript e TypeScript. As dicas aparecem como sublinhados ondulados no editor de texto e são resumidas no painel Problemas .

Nota: A partir de abril de 2022, a extensão webhint para Visual Studio Code não está mais sendo mantida. Consulte a extensão DevTools do Microsoft Edge para obter Visual Studio Code.

Visual Studio para desenvolvimento web

O Microsoft Visual Studio é um IDE (ambiente de desenvolvimento integrado). Use-o para editar, depurar, compilar e publicar seus aplicativos Web. É um programa rico em recursos que pode ser usado para muitos aspectos do desenvolvimento da Web.

Além do editor padrão e do depurador que a maioria das IDEs fornece, o Visual Studio inclui recursos para facilitar seu processo de desenvolvimento, incluindo:

  • Compiladores.
  • Ferramentas de conclusão de código.
  • Designers gráficos.
  • E muitos outros recursos.

Consulte Visual Studio para desenvolvimento web.