Depurar um aplicativo JavaScript ou TypeScript no Visual Studio

Você pode depurar código JavaScript e TypeScript usando o Visual Studio. Atinja os pontos de interrupção, anexe o depurador, inspecione as variáveis, exiba a pilha de chamadas e use outras funcionalidades de depuração.

Tip

Se você ainda não instalou o Visual Studio, acesse a página downloads do Visual Studio para instalá-lo gratuitamente.

Configurar a depuração

Para os projetos .esproj no Visual Studio 2022, o Visual Studio Code usa um arquivo 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 .esproj, você pode configurar o código do usuário (também chamado de configurações "Just My Code" ) no Visual Studio usando a opção de configuração skipFiles em 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, confira Ignorar Código Desinteressante e Atributos de configuração de inicialização.

Depurar um script do servidor

1. Com o projeto aberto no Visual Studio, abra um arquivo JavaScript do lado do servidor (como server.js), clique na sarjeta para definir um ponto de interrupção:

   

   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 o código em execução, para que você possa examinar os valores das variáveis, o comportamento da memória ou se um ramo de código está sendo executado.

2. Para executar seu aplicativo, pressione F5 (Depurar>Iniciar Depuração).

   O depurador pausa no ponto de interrupção definido (o IDE realça a instrução no plano de fundo amarelo). Agora, você pode inspecionar o estado do aplicativo passando o mouse sobre as variáveis no escopo no momento, usando as janelas do depurador, como Locais e Inspecionar.

   

3. Pressione F5 para continuar o aplicativo.

4. Se você quiser usar as Ferramentas de Desenvolvedor do Chrome, pressione F12 no navegador Chrome. Usando essas ferramentas, você pode examinar o DOM ou interagir com o aplicativo usando o Console JavaScript.

Depurar um script do lado do cliente

O Visual Studio fornece suporte à depuração do lado do cliente somente para o Chrome e o Microsoft Edge. Em alguns cenários, o depurador atinge automaticamente pontos de interrupção em código JavaScript e TypeScript e scripts inseridos em arquivos HTML.

• Para depurar um script do lado do cliente em aplicativos ASP.NET, abra o painel Ferramentas>Opções e expanda a seção Todas as Configurações>Depuração>Geral. Selecione a opção Habilitar depuração do JavaScript para ASP.NET (Chrome e Edge).

  Se você preferir usar ferramentas de desenvolvedor do Chrome ou ferramentas F12 para Microsoft Edge para depurar o script do lado do cliente, desabilite essa configuração.

  Para obter informações mais detalhadas, consulte esta postagem no blog sobre o Google Chrome. Para depurar o TypeScript no ASP.NET Core, consulte Adicionar TypeScript a um app ASP.NET Core já 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 Os atributos de configuração de inicialização.

Note

Para ASP.NET e ASP.NET Core, a depuração de scripts inseridos em arquivos .CSHTML não é suportada. O código JavaScript deve estar em arquivos separados para habilitar a depuração.

Prepare seu aplicativo para depuração

Se a origem for reduzida ou se tiver sido criada por um transpilador como o TypeScript ou o Babel, use os mapas de origem para proporcionar a melhor experiência de depuração. Você pode até mesmo anexar o depurador a um script em execução no lado do cliente sem os mapas de origem. No entanto, você só poderá definir e atingir pontos de interrupção no arquivo minificado ou transpilado, não no arquivo de origem. 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. Para cenários complexos de depuração, você pode querer usar as Ferramentas de Desenvolvedor do Chrome ou as Ferramentas F12 do Microsoft Edge.

Para obter ajuda com a geração de mapas de origem, consulte Gerar mapas de origem para depuração.

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. Ele é necessário apenas em cenários incomuns em que você precisa personalizar as configuraçõ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.

1. Feche todas as janelas do navegador de destino, no Microsoft Edge ou nas instâncias do Chrome.

   Outras instâncias do navegador podem impedir que ele seja aberto com a depuração habilitada. (As extensões do navegador podem estar em execução e interceptar o modo de depuração completo, portanto, talvez seja necessário abrir o Gerenciador de Tarefas para localizar e fechar instâncias inesperadas do Chrome ou do Edge.)

   Para obter melhores resultados, desligue todas as instâncias do Chrome, mesmo que você esteja trabalhando com o Microsoft Edge. Ambos os navegadores usam a mesma base de código chromium.

2. Inicie o navegador com a depuração habilitada.

   A partir do Visual Studio 2019, você pode definir o sinalizador --remote-debugging-port=9222 na inicialização do navegador, selecionando Procurar Com...> na barra de ferramentas Depurar.

   

   Se você não vir o comando Procurar com... na barra de ferramentas Depurar, selecione um navegador diferente e tente novamente.

   Na caixa de diálogo Procurar com, escolha Adicionar e, em seguida, defina o sinalizador no campo Argumentos. Use um nome amigável diferente para o navegador, como Modo de Depuração do Edge ou Modo de Depuração do Chrome. Para obter detalhes, confira Notas sobre a versão.

   

   Selecione Navegar para iniciar seu aplicativo 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 insira o seguinte comando:

   msedge --remote-debugging-port=9222

   or,

   chrome.exe --remote-debugging-port=9222

   Isso inicia o navegador com a depuração habilitada.

   O aplicativo ainda não está em execução, portanto, você obtém uma página vazia do navegador. (Se você iniciar o navegador usando o comando Executar, precisará colar a URL correta da instância do aplicativo.)

Anexar o depurador ao script do lado do cliente

Em alguns cenários, talvez seja necessário anexar o depurador a um aplicativo em execução.

Para anexar o depurador por meio 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.

1. Verifique se o aplicativo está em execução no navegador no modo de depuração, conforme descrito na seção anterior.

   Se você criou uma configuração de navegador com um nome amigável, escolha-a como destino de depuração e pressione Ctrl+ F5 (Depurar>Iniciar sem Depuração) para executar o aplicativo no navegador.

2. 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 permite pontos de interrupção, como uma instrução return ou uma declaração var.)

   

   Para localizar o código específico em um arquivo transcompilado, use Ctrl+F (Editar>Localizar e Substituir>Localização Rápida).

   No código do lado do cliente, para atingir um ponto de interrupção em um arquivo TypeScript, .vue ou JSX, normalmente é necessário o uso de mapas de origem. Um mapa de origem deve ser configurado corretamente para dar suporte à depuração no Visual Studio.

3. Escolha Depurar>Anexar ao Processo.

   Tip

   A partir do Visual Studio 2017, após anexar ao processo pela primeira vez seguindo estas etapas, você pode rapidamente anexar novamente ao mesmo processo escolhendo Depurar>Reanexar ao Processo.

4. No diálogo Anexar ao Processo, selecione JavaScript e TypeScript (Chrome Dev Tools/V8 Inspector) como o Tipo de Conexão.

   O destino do depurador, como http://localhost:9222, deve aparecer no campo Destino da Conexão.

5. 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) também pode aparecer no campo Título para ajudá-lo 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 for anexado e você 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 Gerenciador de Tarefas do Windows para fechar todas as instâncias do navegador de destino antes de iniciar o navegador no modo de depuração. As extensões do navegador podem estar em execução e impedindo o modo de depuração completo.

6. O código com o ponto de interrupção pode já ter sido executado, atualize a página do navegador. Se necessário, execute uma ação para fazer com que o código com o ponto de interrupção seja executado.

   Durante a pausa 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 percorrendo o código (F5, F10e F11). Para obter mais informações sobre recursos básicos de depuração, consulte Primeira olhada no depurador.

   Você pode atingir o ponto de interrupção em um arquivo transpilado .js ou arquivo de origem, dependendo do tipo de aplicativo, quais etapas você seguiu anteriormente e outros fatores, como o estado do navegador. De qualquer forma, você pode percorrer o código e examinar variáveis.

   • Caso precise dividir o código em um arquivo de origem TypeScript, JSX ou .vue e não conseguir fazer isso, verifique se o ambiente está configurado corretamente, conforme descrito na seção Source maps da documentação do VS Code.

   • Se você precisar invadir o código em um arquivo JavaScript transpilado (por exemplo, app-bundle.js) e não conseguir fazer isso, remova o arquivo de mapa de origem filename.js.map.

Depurar JavaScript em arquivos dinâmicos usando Razor (ASP.NET)

No Visual Studio 2022, você pode depurar páginas do Razor usando pontos de interrupção. Para obter mais informações, consulte Usando ferramentas de depuração no Visual Studio.

Conteúdo relacionado

Propriedades, React, Angular e Vue