Depurar um aplicativo JavaScript ou TypeScript no Visual Studio

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.

Depurar script do lado do servidor

1. 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.

2. 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.

   

3. Pressione F5 para continuar o aplicativo.

4. 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 scripts do lado do cliente em aplicações ASP.NET, escolha Ferramentas>Opções>Depuraçãoe, em seguida, selecione Ativar depuração JavaScript para ASP.NET (Chrome, Edge e IE).

  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 aplicativos Node.js e outros projetos JavaScript, siga as etapas descritas neste artigo.

Preparar seu aplicativo para depuração

Se a sua fonte for minificada ou criada por um transpiler como TypeScript ou Babel, use mapas de origem para obter 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, você só poderá definir e atingir pontos de interrupção no arquivo reduzido 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 de depuração complexos, convém usar as Ferramentas de Desenvolvedor do Chrome ou as Ferramentas F12 para Microsoft Edge.

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

Preparar o navegador para debug

Para esse cenário, use o Microsoft Edge ou o Chrome.

1. 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 em execução e intercetar o modo de depuração completa, 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, 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.

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

   A partir do Visual Studio 2019, pode-se definir o sinalizador --remote-debugging-port=9222 na 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=9222

   ou,

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

   Isso 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

Solução de problemas de pontos de interrupção e mapas de origem

Se precisar interromper o código em um arquivo de origem TypeScript ou JSX e não conseguir fazê-lo, use Attach to Process, conforme descrito na seção anterior, para anexar o depurador. Certifique-se de que seu ambiente está configurado corretamente:

• Feche todas as instâncias do navegador, incluindo as extensões do Chrome (utilizando o Gestor de Tarefas), para que possa executar o navegador no modo de depuração.

• Certifique-se de iniciar o navegador no modo de depuração.

• Verifique se o arquivo de mapa de origem inclui o caminho relativo correto para o arquivo de origem e se ele não inclui prefixos sem suporte, como webpack:///, o que impede que o depurador do Visual Studio localize um arquivo de origem. Por exemplo, uma referência como webpack:///.app.tsx pode ser corrigida para ./app.tsx. Você pode fazer isso manualmente no arquivo de mapa de origem (o que é útil para testes) ou por meio de uma configuração de compilação personalizada. Para obter mais informações, consulte Geração de mapas de origem para depuração.

Como alternativa, se você precisar quebrar o código em um arquivo de origem (por exemplo, app.tsx) e não conseguir fazê-lo, tente usar a instrução debugger; no arquivo de origem ou defina pontos de interrupção nas Ferramentas de Desenvolvedor do Chrome (ou F12 Tools for Microsoft Edge).

Gerar mapas de origem para depuração

O Visual Studio tem a capacidade de usar e gerar mapas de origem em arquivos de origem JavaScript. Isso geralmente é necessário se sua fonte for minificada ou criada por um transpiler como TypeScript ou Babel. As opções disponíveis dependem do tipo de projeto.

• Um projeto TypeScript no Visual Studio gera mapas de origem para você por padrão. Para obter mais informações, consulte Configurar mapas de origem usando um arquivo tsconfig.json.

• Em um projeto JavaScript, você pode gerar mapas de origem usando um bundler como webpack e um compilador como o compilador TypeScript (ou Babel), que você pode adicionar ao seu projeto. Para o compilador TypeScript, você também deve adicionar um arquivo tsconfig.json e definir a opção sourceMap compilador. Para obter um exemplo que mostra como fazer isso usando uma configuração básica de webpack, consulte Criar um aplicativo Node.js com o React.

Para definir configurações avançadas para mapas de origem, use um tsconfig.json ou as configurações do projeto em um projeto TypeScript, mas não ambos.

Para habilitar a depuração usando o Visual Studio, você precisa certificar-se de que a(s) referência(s) ao seu arquivo de origem no mapa de origem gerado estão corretas (isso pode exigir teste). Por exemplo, se você estiver usando o webpack, as referências no arquivo de mapa de origem incluirão o prefixo webpack:///, que impede que o Visual Studio encontre um arquivo de origem TypeScript ou JSX. Especificamente, quando você corrige isso para fins de depuração, a referência ao arquivo de origem (como app.tsx), deve ser alterada de algo como webpack:///./app.tsx para algo como ./app.tsx, que permite a depuração (o caminho é relativo ao seu arquivo de origem). O exemplo a seguir mostra como você pode configurar mapas de origem no webpack, que é um dos bundlers mais comuns, para que eles funcionem com o Visual Studio.

(Apenas Webpack) Se você estiver definindo o ponto de interrupção em um TypeScript de arquivo JSX (em vez de um arquivo JavaScript transpilado), precisará atualizar a configuração do webpack. Por exemplo, no webpack-config.js, talvez seja necessário substituir o seguinte código:

  output: {
    filename: "./app-bundle.js", // This is an example of the filename in your project
  },

com este código:

  output: {
    filename: "./app-bundle.js", // Replace with the filename in your project
    devtoolModuleFilenameTemplate: '[absolute-resource-path]'  // Removes the webpack:/// prefix
  },

Esta é uma configuração somente de desenvolvimento para habilitar a depuração de código do lado do cliente no Visual Studio.

Para cenários complicados, as ferramentas do navegador (F12) às vezes funcionam melhor para depuração, porque não exigem alterações nos prefixos personalizados.

Configurar mapas de origem usando um arquivo tsconfig.json

Se você adicionar um arquivo tsconfig.json ao seu projeto, o Visual Studio tratará a raiz do diretório como um projeto TypeScript. Para adicionar o arquivo, clique com o botão direito do mouse em seu projeto no Gerenciador de Soluções e escolha Adicionar > Novo Item > Arquivo de Configuração JSON TypeScript. Um arquivo tsconfig.json como o seguinte é adicionado ao seu projeto.

{
  "compilerOptions": {
    "noImplicitAny": false,
    "module": "commonjs",
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5"
  },
  "exclude": [
    "node_modules"
  ]
}

Opções do compilador para tsconfig.json arquivo

• inlineSourceMap: Emita um único arquivo com mapas de origem em vez de criar um mapa de origem separado para cada arquivo de origem.
• inlineSources: Emite a fonte juntamente com os mapas de origem num único ficheiro; requer que inlineSourceMap ou sourceMap sejam definidos.
• mapRoot: Especifica o local onde o depurador deve encontrar os arquivos de mapa de origem (.map) em vez do local padrão. Use esse sinalizador se os arquivos de .map em tempo de execução precisarem estar em um local diferente dos arquivos .js. O local especificado é incorporado no mapa de origem para direcionar o depurador para o local dos arquivos .map.
• sourceMap: Gera um arquivo .map correspondente.
• sourceRoot: Especifica o local onde o depurador deve encontrar arquivos TypeScript em vez dos locais de origem. Use esse sinalizador se as fontes de tempo de execução precisarem estar em um local diferente do local em tempo de design. O local especificado é incorporado no mapa de origem para direcionar o depurador para onde os arquivos de origem estão localizados.

Para obter mais detalhes sobre as opções do compilador, verifique a página Opções do compilador no Manual do TypeScript.

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

Conteúdo relacionado

Propriedades, React, Angular, Vue