Nota
O acesso a esta página requer autorização. Podes tentar iniciar sessão ou mudar de diretório.
O acesso a esta página requer autorização. Podes tentar mudar de diretório.
Você pode depurar JavaScript e código TypeScript usando o Visual Studio. Você pode atingir pontos de interrupção, anexar o depurador, inspecionar variáveis, exibir a pilha de chamadas e usar outros recursos de depuração.
Configurar depuração
Para projetos de .esproj no Visual Studio 2022, o Visual Studio Code usa um ficheiro launch.json para configurar e personalizar o depurador. launch.json é um arquivo de configuração do depurador.
O Visual Studio anexa o depurador somente ao código do usuário. Para projetos de .esproj, você pode configurar o código do usuário (também chamado Just My Code configurações) no Visual Studio usando a configuração skipFiles no launch.json. Isso funciona da mesma forma que as configurações de launch.json no VS Code. Para obter mais informações sobre skipFiles e outras opções de configuração do depurador, consulte Ignorando código desinteressante e Iniciar atributos de configuração.
Depurar script do lado do servidor
Com seu projeto aberto no Visual Studio, abra um arquivo JavaScript do lado do servidor (como server.js), clique na calha para definir um ponto de interrupção:
Os pontos de interrupção são o recurso mais básico e essencial da depuração confiável. Um ponto de interrupção indica onde o Visual Studio deve suspender seu código em execução, para que você possa examinar os valores das variáveis ou o comportamento da memória, ou se uma ramificação do código está sendo executada ou não.
Para executar seu aplicativo, pressione F5 (Debug>Start Debugging).
O depurador pausa no ponto de interrupção definido (o IDE destaca a instrução no fundo amarelo). Agora, você pode inspecionar o estado do seu aplicativo passando o mouse sobre as variáveis atualmente no escopo, usando janelas do depurador, como o Locals e janelas do Watch.
Pressione F5 para continuar o aplicativo.
Se pretender utilizar as Ferramentas de Programador do Chrome, prima F12 no navegador Chrome. Usando essas ferramentas, você pode examinar o DOM ou interagir com o aplicativo usando o Console JavaScript.
Depurar script do lado do cliente
O Visual Studio fornece suporte à depuração do lado do cliente apenas para o Chrome e o Microsoft Edge. Em alguns cenários, o depurador atinge automaticamente os pontos de interrupção no código JavaScript e TypeScript e scripts incorporados em arquivos HTML.
Para depurar um script do lado do cliente em aplicações ASP.NET, abra o painel de Ferramentas
Opções , expanda a secção Definições Gerais e Depuração Todas as Definições . Selecione a opção Ativar depuração JavaScript para ASP.NET (Chrome e Edge). Se preferir usar as Ferramentas de Desenvolvedor do Chrome ou as Ferramentas F12 para Microsoft Edge para depurar o script do lado do cliente, desative essa configuração.
Para obter informações mais detalhadas, consulte este post no blogue do Google Chrome. Para depurar o TypeScript no ASP.NET Core, consulte Adicionar TypeScript a um aplicativo ASP.NET Core existente.
Para depurar um script do lado do cliente em aplicações ASP.NET, abra a caixa de diálogo Ferramentas>Opções e expanda a secção Depuração>Geral. Selecione a opção Ativar depuração JavaScript para ASP.NET (Chrome, Edge e IE) e depois selecione OK.
Se preferir usar as Ferramentas de Desenvolvedor do Chrome ou as Ferramentas F12 para Microsoft Edge para depurar o script do lado do cliente, desative essa configuração.
Para obter informações mais detalhadas, consulte este post no blogue do Google Chrome. Para depurar o TypeScript no ASP.NET Core, consulte Adicionar TypeScript a um aplicativo ASP.NET Core existente.
- Para projetos .esproj no Visual Studio 2022, você pode depurar o script do lado do cliente usando métodos de depuração padrão para atingir pontos de interrupção. Para configurar a depuração, você pode modificar launch.json configurações, que funcionam da mesma forma que no VS Code. Para obter mais informações sobre as opções de configuração do depurador, consulte Atributos de configuração de inicialização.
Note
Para ASP.NET e ASP.NET Core, a depuração de scripts embutidos em .CSHTML ficheiros não é suportada. O código JavaScript deve estar em arquivos separados para permitir a depuração.
Preparar seu aplicativo para depuração
Se o seu código-fonte for minificado ou criado por um transpiler como o TypeScript ou o Babel, use mapas de fonte para a melhor experiência de depuração. Você pode até mesmo anexar o depurador a um script do lado cliente que está a correr sem os mapas de origem. No entanto, talvez só consigas definir e atingir pontos de interrupção no ficheiro minificado ou transpilado, não no ficheiro fonte. Por exemplo, em um aplicativo Vue.js, o script minificado é passado como uma cadeia de caracteres para uma instrução eval, e não há como percorrer esse código efetivamente usando o depurador do Visual Studio, a menos que você use mapas de origem. Em cenários complexos de depuração, poderá querer considerar utilizar as Ferramentas de Desenvolvedor do Chrome ou as Ferramentas F12 para o Microsoft Edge.
Configurar manualmente o navegador para depuração
No Visual Studio 2022, o procedimento descrito nesta seção está disponível apenas em aplicativos ASP.NET e ASP.NET Core. Só é obrigatório em cenários pouco comuns em que precisas de personalizar as definições do navegador. Em projetos .esproj , o navegador é configurado para depuração por padrão.
Para esse cenário, use o Microsoft Edge ou o Chrome.
Feche todas as janelas do navegador de destino, instâncias do Microsoft Edge ou do Chrome.
Outras instâncias do navegador podem impedir que o navegador abra com a depuração ativada. (As extensões do navegador podem estar a correr e intercetar o modo de depuração completo, por isso pode ser necessário abrir o Gestor de Tarefas para encontrar e fechar instâncias inesperadas do Chrome ou do Edge.)
Para obter melhores resultados, encerre todas as instâncias do Chrome, mesmo que esteja a trabalhar com o Microsoft Edge. Ambos os navegadores usam a mesma base de código de cromo.
Inicie o navegador com a depuração ativada.
A partir do Visual Studio 2019, pode-se definir o sinalizador
--remote-debugging-port=9222na inicialização do navegador selecionando Procurar com...> a partir da barra de ferramentas Depurar .
Se não vir o comando Procurar com... na barra de ferramentas Depurar, tente selecionar um navegador diferente e tente novamente.
Na caixa de diálogo Procurar com, escolha Adicionare, em seguida, configure o sinalizador no campo Argumentos. Use um nome amigável diferente para o navegador, como Edge Debug Mode ou Chrome Debug Mode. Para obter detalhes, consulte as Notas de versão .
Selecione Explorar para iniciar a sua aplicação com o navegador no modo de depuração.
Como alternativa, abra o comando Executar no botão Iniciar do Windows (clique com o botão direito do mouse e escolha Executar) e digite o seguinte comando:
msedge --remote-debugging-port=9222or,
chrome.exe --remote-debugging-port=9222Isso inicia o seu navegador com a funcionalidade de depuração ativada.
O aplicativo ainda não está em execução, então você recebe uma página vazia do navegador. (Se você iniciar o navegador usando o comando Executar, precisará colar a URL correta para a instância do aplicativo.)
Anexar o depurador ao script do lado do cliente
Em alguns cenários, pode ser necessário ligar o depurador a uma aplicação em execução.
Para anexar o depurador do Visual Studio e atingir pontos de interrupção no código do lado do cliente, ele precisa de ajuda para identificar o processo correto. Aqui está uma maneira de habilitá-lo.
Verifique se seu aplicativo está sendo executado no navegador no modo de depuração, conforme descrito na seção anterior.
Se criaste uma configuração de navegador com um nome amigável, escolhe-o como teu alvo de depuração e pressiona Ctrl+F5 (Debug>Start Without Debugging) para executar a aplicação no navegador.
Alterne para o Visual Studio e defina um ponto de interrupção no código-fonte, que pode ser um arquivo JavaScript, um arquivo TypeScript ou um arquivo JSX. (Defina o ponto de interrupção em uma linha de código que permita pontos de interrupção, como uma instrução return ou uma declaração var.)
Para encontrar o código específico em um arquivo transpilado, use Ctrl+F (Edit>Find and Replace>Quick Find).
Para código do lado do cliente, atingir um ponto de interrupção em um arquivo TypeScript, arquivo .vue ou arquivo JSX normalmente requer o uso de mapas de origem . Um mapa de origem deve ser configurado corretamente para dar suporte à depuração no Visual Studio.
Escolha Depurar>Anexar ao processo.
Tip
A partir do Visual Studio 2017, após ligares ao processo pela primeira vez seguindo estes passos, podes rapidamente voltar a ligar ao mesmo processo escolhendo Depurar>Ligar novamente ao Processo.
Na caixa de diálogo Anexar ao Processo, selecione JavaScript e TypeScript (Chrome Dev Tools/V8 Inspetor) como o Tipo de Conexão.
O destino do depurador, tal como http://localhost:9222, deve aparecer no campo Destino da Conexão .
Na lista de instâncias do navegador, selecione o processo do navegador com a porta de host correta (
https://localhost:7184/neste exemplo) e selecione Anexar.A porta (por exemplo, 7184) pode também aparecer no campo Título para ajudar a selecionar a instância correta do navegador.
O exemplo a seguir mostra como isso parece para o navegador Microsoft Edge.
Tip
Se o depurador não se ligar e vir a mensagem "Falha ao iniciar o adaptador de depuração" ou "Não é possível anexar ao processo. Uma operação não é legal no estado atual.", use o Gestor de Tarefas do Windows para fechar todas as instâncias do navegador de destino antes de iniciar o navegador em modo de depuração. As extensões do navegador podem estar a correr e a impedir o modo de depuração total.
O código com o ponto de interrupção pode já ter sido executado, atualize a página do seu navegador. Se necessário, tome medidas para fazer com que o código com o ponto de interrupção seja executado.
Enquanto pausado no depurador, você pode examinar o estado do aplicativo passando o mouse sobre variáveis e usando janelas do depurador. Você pode avançar o depurador passando pelo código (F5, F10e F11). Para obter mais informações sobre recursos básicos de depuração, consulte Primeira Olhada no Depurador.
Pode atingir o limite num ficheiro transpilado
.jsou num ficheiro fonte, dependendo do tipo de aplicação, dos passos que seguiu anteriormente e de outros fatores como o estado do navegador. De qualquer forma, você pode percorrer o código e examinar variáveis.Se você precisar quebrar o código em um arquivo TypeScript, JSX ou
.vuede origem e não conseguir fazê-lo, certifique-se de que seu ambiente esteja configurado corretamente, conforme descrito na seção Mapas de origem da documentação do VS Code.Se precisar de quebrar o código num ficheiro JavaScript transpilado (por exemplo, app-bundle.js) e não o conseguir fazer, remova o ficheiro de mapa de origem, filename.js.map.
Depurar JavaScript em arquivos dinâmicos usando o Razor (ASP.NET)
No Visual Studio 2022, você pode depurar páginas Razor usando pontos de interrupção. Para obter mais informações, consulte Usando ferramentas de depuração no Visual Studio.