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 seu desenvolvimento na Web.

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

  • Compiladores.
  • Ferramentas de auto-completar 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 de JavaScript no Microsoft Edge para seus aplicativos ASP.NET Framework e ASP.NET Core. Para usar o Visual Studio para depurar o Microsoft Edge, execute as etapas a seguir.

Inicie o Microsoft Edge

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

  • Crie seu ASP.NET e ASP.NET Core aplicativo.
  • 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 IDE.

Criar um novo aplicativo Web do ASP.NET Core

Primeiro, crie um novo aplicativo Web do 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.

Criar um novo aplicativo Web ASP.NET Core com React.js

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

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

Iniciar o Microsoft Edge no Visual Studio

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

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

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

    A lista suspensa ao lado do botão verde Play e do IIS Express

  3. Selecione Depuração de> ScriptHabilitada.

    Ativar a depuração de script no Visual Studio

  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.

    Selecione o canal de visualização do Microsoft Edge que você deseja que o Visual Studio inicie

    Para baixar um canal de visualização do Microsoft Edge (Beta, Dev ou Canary), acesse Torne-se um Microsoft Edge Insider.

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

    O Microsoft Edge é iniciado a partir do Visual Studio

Continue com as etapas abaixo.

Depurar o código JavaScript que está sendo executado no Microsoft Edge

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

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

    Selecione a medianiz ao lado da Linha 13 no Counter.js para definir um ponto de interrupção no Visual Studio

  3. Volte para a instância do Microsoft Edge em que o Visual Studio foi iniciado.

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

    A página Contador em nosso aplicativo Web do ASP.NET Core

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

Visual Studio pausa a execução do JavaScript no Microsoft Edge

Na abordagem acima, você iniciou o Microsoft Edge a partir do Visual Studio. Como alternativa, você pode anexar o depurador do Visual Studio a uma instância do Microsoft Edge que já esteja 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, consulte 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á esteja 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.

    Selecionando 'Depurar > Anexar ao Processo' no Visual Studio

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

  5. Na caixa de texto Destino de conexão , 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 .

    Configuração da caixa de diálogo

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

  8. Na caixa de diálogo Selecionar Tipo de Código, selecione JavaScript (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 do Edge DevTools para Visual Studio

Depure seus projetos de 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 dinâmicos. Baixe o Microsoft Edge Developers Tools para Visual Studio (PREVIEW) no Visual Studio Marketplace.

Para usar a extensão:

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

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

  3. Abra um projeto 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 Abrir DevTools do Edge (ícone do DevTools do Abrir Edge):

Um projeto ASP.NET, abrindo o Edge DevTools

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

Microsoft Edge Ferramentas de Desenvolvedor para Visual Studio: Ferramenta Elementos do DevTools

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

Microsoft Edge Developer Tools para Visual Studio: ferramenta de rede do DevTools

A ferramenta Inspecionar (ícone da ferramenta Inspecionar) e Alternar screencast (Alternar ícone de screencast) estão disponíveis, e o menu Mais Ferramentas (ícone Mais Ferramentas) oferece a ferramenta Problemas , a ferramenta Condições de rede e a ferramenta Bloqueio de solicitação de rede :

A janela Edge DevTools do Visual Studio, desencaixada

Consulte também:

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 JavaScript no Visual Studio. Para enviar seus comentários, selecione o ícone Enviar Comentários no Visual Studio ou tweet @VisualStudio and @EdgeDevTools.

O ícone Enviar Feedback no Visual Studio

Consulte também

Externo:

  • Last updated on