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.

Extensão DevTools do Microsoft Edge para Visual Studio Code

A extensão DevTools do Microsoft Edge para Visual Studio Code permite-lhe utilizar a ferramenta Elementos e a Ferramenta de rede do browser Microsoft Edge a partir de Visual Studio Code.

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

• Veja a estrutura HTML do runtime.
• Alterar o esquema da página Web.
• Altere os estilos CSS e corrija problemas de estilo.
• Ler mensagens da consola.
• Ver pedidos de rede.

Consulte Extensão DevTools do Microsoft Edge para Visual Studio Code.

Ficheiros open source no Visual Studio Code

A experimentação Ficheiros Open source no Visual Studio Code permite-lhe utilizar o Microsoft Edge DevTools, mas, em seguida, editar os seus ficheiros no Visual Studio Code em vez de no editor de código da ferramenta DevTools Sources.

Quando utiliza esta experimentação, se utilizar Visual Studio Code e utilizar DevTools para alterar as regras do CSS, já não tem de utilizar o editor de código na ferramenta Origens das DevTools. Pode simplesmente utilizar o editor de código no Visual Studio Code. Quando ativa esta experimentação, os ficheiros locais receberão um tratamento diferente.

Veja Abrir ficheiros de origem no Visual Studio Code.

Depurar o Microsoft Edge no Visual Studio Code

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

Este depurador incorporado permite-lhe depurar o código JavaScript de front-end linha a linha e ver console.log() instruções diretamente do Visual Studio Code.

Veja Depurar o Microsoft Edge no Visual Studio Code.

A extensão webhint para Visual Studio Code

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

• Acessibilidade.
• Desempenho.
• Compatibilidade entre browsers.
• Compatibilidade do PWA.
• Segurança.

O webhint verifica o seu código quanto a melhores práticas e erros comuns. Identifique e corrija problemas nos seus ficheiros, incluindo HTML, CSS, JavaScript e TypeScript. As sugestões 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 já não está a ser mantida. Consulte Extensão DevTools do Microsoft Edge para Visual Studio Code.

Visual Studio para desenvolvimento Web

O Microsoft Visual Studio é um ambiente de desenvolvimento integrado (IDE). Utilize-a para editar, depurar, compilar e publicar as suas aplicações Web. É um programa rico em funcionalidades que pode ser utilizado para muitos aspetos do seu desenvolvimento Web.

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

• Compiladores.
• Ferramentas de conclusão de código.
• Designers gráficos.
• E muitas mais funcionalidades.

Veja Visual Studio para desenvolvimento Web.