Compartilhar via

Visual Studio para desenvolvimento na Web

  • Artigo

O Microsoft Visual Studio é um ambiente de desenvolvimento integrado (IDE). Utilize-a para editar, depurar, compilar e publicar as suas aplicações Web. O Visual Studio é 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.

Se ainda não estiver a utilizar o Visual Studio, aceda a Transferir o Visual Studio para o transferir.

Atualmente, o Visual Studio 2019 suporta a depuração de JavaScript no Microsoft Edge para as suas aplicações ASP.NET Framework e ASP.NET Core. Para utilizar o Visual Studio para depurar o Microsoft Edge, siga os seguintes passos.

Iniciar o Microsoft Edge

Siga os passos nesta secção para utilizar o Visual Studio para fazer o seguinte:

  • Crie a sua aplicação ASP.NET e ASP.NET Core.
  • Inicie um servidor Web.
  • Inicie o Microsoft Edge.
  • Ligue o depurador do Visual Studio com um único botão.

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

Criar uma nova aplicação Web ASP.NET Core

Em primeiro lugar, crie uma nova aplicação Web ASP.NET Core, da seguinte forma:

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

  2. Na caixa de pesquisa no ecrã seguinte, introduza reagir.

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

Criar uma nova aplicação Web ASP.NET Core com React.js

Este modelo deReact.js especifica como integrar React.js numa aplicação ASP.NET Core.

Criou agora um projeto para uma aplicação Web ASP.NET Core.

Iniciar o Microsoft Edge a partir do Visual Studio

Em seguida, execute e depure o projeto ASP.NET Core aplicação Web no Visual Studio, da seguinte forma:

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

  2. Selecione a lista pendente junto ao botão verde Reproduzir e IIS Express.

    A lista pendente junto ao botão verde Reproduzir e IIS Express

  3. Selecione Depuração> deScripts Ativada.

    Ativar a depuração de scripts no Visual Studio

  4. Na mesma lista pendente, selecione Browser> o canal de pré-visualização do Microsoft Edge que pretende que o Visual Studio inicie, como o Microsoft Edge Canary, Dev ou Beta. Se ainda não estiver a utilizar um dos canais de pré-visualização do Microsoft Edge, aceda a Tornar-se um Microsoft Edge Insider para transferir um.

    Selecione o canal de pré-visualização do Microsoft Edge que pretende que o Visual Studio inicie

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

    O Microsoft Edge é iniciado a partir do Visual Studio

Continue com os passos abaixo.

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

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

  2. Em Counter.js, defina um ponto de interrupção na Linha 13 ao selecionar a medianiz junto à linha.

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

  3. Regresse à instância do Microsoft Edge que o Visual Studio iniciou.

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

    A página Contador na nossa aplicação Web ASP.NET Core

  5. O depurador javaScript no Visual Studio atinge o ponto de interrupção que definiu em Counter.js. Agora, o Visual Studio coloca em pausa o runtime do JavaScript em execução no Microsoft Edge e pode percorrer o script linha a linha.

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

Na abordagem acima, iniciou o Microsoft Edge a partir do Visual Studio. Em alternativa, 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, 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á está em execução:

  1. Confirme que não existem instâncias em execução do Microsoft Edge.

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

    start msedge --remote-debugging-port=9222

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

    Selecionar

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

  5. Na caixa de texto Ligar destino , escreva e, em seguida, http://localhost:9222/ prima Enter.

  6. Reveja a lista de separadores abertos que tem no Microsoft Edge listados na secção Processos disponíveis .

    Configurar a caixa de diálogo

  7. Selecione o separador que pretende depurar na lista e, em seguida, 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 está agora anexado ao Microsoft Edge. Pode colocar em pausa a execução de JavaScript, definir pontos de interrupção e ver console.log() instruções diretamente na janela Depurar Saída no Visual Studio.

Extensão DevTools do Edge para Visual Studio

Depure os seus projetos de ASP.NET no Visual Studio com as Ferramentas de Programação do Edge. Pode incorporar as Ferramentas de Programação do Microsoft Edge no Microsoft Visual Studio para depurar os seus projetos ASP.NET em direto. Transfira as Ferramentas para Programadores do Microsoft Edge para Visual Studio (PRÉ-VISUALIZAÇÃO) a partir do Visual Studio Marketplace.

Para utilizar a extensão:

  1. Certifique-se de que 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 predefinido, conforme descrito na página acima.

  3. Abra um projeto ASP.NET.

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

  5. No canto superior esquerdo da janela Estrutura , clique no botão Abrir As DevTools do Edge (abrir o ícone DevTools do Edge):

Um projeto ASP.NET, abrindo o Edge DevTools

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

Ferramentas de Programação do Microsoft Edge para Visual Studio: Ferramenta de elementos das DevTools

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

Ferramentas de Programador do Microsoft Edge para Visual Studio: Ferramenta de rede de DevTools

A ferramenta Inspecionar (ícone da ferramenta Inspecionar) e o screencast Ativar/Desativar (ícone alternar 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 de bloqueio de pedidos de rede:

A janela DevTools do Edge do Visual Studio, desancorada

Consulte também:

Entrar em contacto com a equipa do Microsoft Visual Studio

As equipas do Microsoft Visual Studio e do Microsoft Edge querem saber mais sobre como trabalha com o JavaScript no Visual Studio. Para enviar o seu feedback, selecione o ícone Enviar Comentários no Visual Studio ou tweet @VisualStudio and @EdgeDevTools.

O ícone Enviar Comentários no Visual Studio

Consulte também

Externo: