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:
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:
Abra o Visual Studio 2019 e selecione Criar um novo projeto.
Na caixa de pesquisa no ecrã seguinte, introduza reagir.
Selecione ASP.NET Core com React.js na lista de modelos e, em seguida, Seguinte.
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:
Abra ClientApp/src/components/Counter.js.
Selecione a lista pendente junto ao botão verde Reproduzir e IIS Express.
Selecione Depuração> deScripts Ativada.
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 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.
Continue com os passos abaixo.
Depurar código JavaScript em execução no Microsoft Edge
Regresse ao Visual Studio para definir um ponto de interrupção.
Em Counter.js, defina um ponto de interrupção na Linha 13 ao selecionar a medianiz junto à linha.
Regresse à instância do Microsoft Edge que o Visual Studio iniciou.
Selecione Contador no menu de navegação na parte superior da página Web e, em seguida, selecione Incrementar.
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.
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:
Confirme que não existem instâncias em execução do Microsoft Edge.
Na linha de comandos, execute o seguinte comando:
start msedge --remote-debugging-port=9222
No Visual Studio, selecione Depurar Anexar>ao Processo ou Ctrl+Alt+P.
Na caixa de diálogo Anexar ao Processo , defina Tipo de ligação como Websocket do protocolo devtools do Chrome (sem autenticação).
Na caixa de texto Ligar destino , escreva e, em seguida, http://localhost:9222/ prima Enter.
Reveja a lista de separadores abertos que tem no Microsoft Edge listados na secção Processos disponíveis .
Selecione o separador que pretende depurar na lista e, em seguida, selecione Anexar.
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:
Certifique-se de que o Visual Studio 2022 e a carga de trabalho ASP.NET estão instalados.
Configure o Web Live Preview como o Web Forms Designer predefinido, conforme descrito na página acima.
Abra um projeto ASP.NET.
Abra uma página Web do projeto na janela Estrutura .
No canto superior esquerdo da janela Estrutura , clique no botão Abrir As DevTools do Edge ():
O Edge DevTools para Visual Studio é aberto, com a ferramenta Elementos selecionada:
A ferramenta Rede também está aberta por predefinição:
A ferramenta Inspecionar () e o screencast Ativar/Desativar () estão disponíveis e o menu Mais Ferramentas () oferece a ferramenta Problemas, a ferramenta Condições de rede e a ferramenta de bloqueio de pedidos de rede:
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.