Visual Studio para desenvolvimento na Web

O Microsoft Visual Studio é um IDE (ambiente de desenvolvimento integrado). Use-o para editar, depurar, compilar e publicar seus aplicativos Web. O Visual Studio é 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.

Se você ainda não estiver usando o Visual Studio, acesse Baixar o Visual Studio para baixá-lo.

Atualmente, o Visual Studio 2019 dá suporte à depuração do JavaScript no Microsoft Edge para seus aplicativos ASP.NET Framework e ASP.NET Core. Para usar o Visual Studio para depurar o Microsoft Edge, siga as etapas a seguir.

Iniciar o Microsoft Edge

Siga as etapas desta seção para usar o Visual Studio para fazer o seguinte:

• Crie seu aplicativo ASP.NET e ASP.NET Core.
• Inicie um servidor Web.
• Inicie o Microsoft Edge.
• Conecte o depurador do Visual Studio com um único botão.

O fluxo de trabalho simplificado permite depurar o JavaScript que é executado no Microsoft Edge diretamente do seu IDE.

Criar um novo aplicativo Web ASP.NET Core

Primeiro, crie um novo aplicativo Web ASP.NET Core, da seguinte maneira:

1. Abra o Visual Studio 2019 e selecione Criar um novo projeto.

2. Na caixa de pesquisa na próxima tela, insira react.

3. Selecione ASP.NET Core com React.js na lista de modelos e, em seguida, Avançar.

Este modeloReact.js especifica como integrar React.js a um aplicativo ASP.NET Core.

Agora você criou um projeto para um aplicativo Web ASP.NET Core.

Iniciar o Microsoft Edge no Visual Studio

Em seguida, execute e depure o ASP.NET Core projeto de aplicativo Web no Visual Studio, da seguinte maneira:

1. Abra ClientApp/src/components/Counter.js.

2. Selecione a lista suspensa ao lado do botão Play verde e IIS Express.

   

3. Selecione Depuração> de ScriptHabilitada.

   

4. Na mesma lista suspensa, selecione Navegador> da Web o canal de visualização do Microsoft Edge que você deseja que o Visual Studio inicie, como Microsoft Edge Canary, Dev ou Beta. Se você ainda não estiver usando um dos canais de visualização do Microsoft Edge, acesse Baixar canais do Microsoft Edge Insider para baixar um.

   

5. Selecione o botão Reproduzir verde. O Visual Studio cria seu aplicativo, inicia o servidor Web, inicia o Microsoft Edge e navega até https://localhost:44362/ ou qualquer porta especificada em launchSettings.json.

   

Continue com as etapas abaixo.

Depurar código JavaScript que está em execução no Microsoft Edge

1. Volte para o Visual Studio para definir um ponto de interrupção.

2. Em Counter.js, defina um ponto de interrupção na Linha 13 selecionando a sarjeta ao lado da linha.

   

3. Volte para a instância do Microsoft Edge que o Visual Studio lançou.

4. Selecione Contador no menu de navegação na parte superior da página da Web e selecione Incrementar.

   

5. O depurador JavaScript no Visual Studio atinge o ponto de interrupção definido em Counter.js. O Visual Studio agora pausa o runtime do JavaScript em execução no Microsoft Edge e você pode passar pela linha de script por linha.

Na abordagem acima, você lançou o Microsoft Edge do Visual Studio. Como alternativa, você pode anexar o depurador do Visual Studio a uma instância do Microsoft Edge que já está em execução, conforme descrito abaixo.

O exemplo foi apenas uma pequena demonstração da funcionalidade disponível no Visual Studio. Para obter mais informações sobre a funcionalidade no Visual Studio 2019, confira a documentação do Visual Studio.

Anexar o depurador do Visual Studio a uma instância em execução do Microsoft Edge

Para anexar o depurador do Visual Studio a uma instância do Microsoft Edge que já está em execução:

1. Verifique se não há instâncias em execução do Microsoft Edge.

2. Na linha de comando, execute o seguinte comando:

   start msedge --remote-debugging-port=9222
   

3. No Visual Studio, selecione Depurar Anexar>ao Processo ou Ctrl+Alt+P.

   

4. Na caixa de diálogo Anexar ao Processo , defina Tipo de conexão como Websocket de protocolo do Chrome devtools (sem autenticação).

5. Na caixa de texto Conectar o destino , digite http://localhost:9222/ e pressione Enter.

6. Examine a lista de guias abertas que você tem no Microsoft Edge listadas na seção Processos disponíveis .

   

7. Selecione a guia que você deseja depurar na lista e selecione Anexar.

8. Na caixa de diálogo Selecionar Tipo de Código, selecioneJavaScript (Microsoft Edge – Chromium) e selecione OK.

O depurador do Visual Studio agora está anexado ao Microsoft Edge. Você pode pausar a execução do JavaScript, definir pontos de interrupção e exibir console.log() instruções diretamente na janela Saída de Depuração no Visual Studio.

Extensão DevTools do Edge para Visual Studio

Depure seus projetos ASP.NET no Visual Studio com as Ferramentas de Desenvolvedor do Edge. Você pode inserir as Ferramentas de Desenvolvedor do Microsoft Edge no Microsoft Visual Studio para depurar seus projetos ASP.NET ao vivo. Baixe as Ferramentas de Desenvolvedor do Microsoft Edge para Visual Studio.

Para usar a extensão:

1. Verifique se o Visual Studio 2022 e a carga de trabalho ASP.NET estão instalados.

2. Configure o Web Live Preview como o Web Forms Designer padrão, conforme descrito na página acima.

3. Abra um projeto de ASP.NET.

4. Abra uma página da Web do projeto na janela Design .

5. No canto superior esquerdo da janela Design , clique no botão Open Edge DevTools ():

O Edge DevTools para Visual Studio é aberto, com a ferramenta Elementos selecionada:

A ferramenta Rede também está aberta por padrão:

A ferramenta Inspecionar () e o screencast de alternância () estão disponíveis, e o menu Mais Ferramentas () oferece as ferramentas de bloqueio problemas, condições de rede e solicitação de rede :

Confira também:

• Ferramentas de Desenvolvedor do Edge para Visual Studio, no Visual Studio DevBlogs.

Entrar em contato com a equipe do Microsoft Visual Studio

As equipes do Microsoft Visual Studio e do Microsoft Edge querem saber mais sobre como você trabalha com o JavaScript no Visual Studio. Para enviar seus comentários, selecione o ícone Enviar Comentários no Visual Studio ou twitte @VisualStudio and @EdgeDevTools.