À medida que sua aplicação web cresce em complexidade, torna-se essencial dominar a arte da depuração. Depurar JavaScript de forma eficaz envolve mais do que apenas corrigir erros. É necessário entender como seu código funciona internamente para garantir que sua aplicação funcione sem problemas e ofereça a melhor experiência ao usuário.

O código minificado, que é a versão do seu código que chega aos usuários em produção, é otimizado para desempenho, mas pode ser um pesadelo para depurar. Com as ferramentas certas, a depuração de JavaScript pode se tornar muito mais fácil. Este artigo explora como usar mapas de origem para depurar código minificado e outras técnicas usando o Chrome DevTools para identificar e resolver problemas de forma eficiente em sua aplicação web.

Aplicativo de exemplo

Vamos trabalhar em um aplicativo simples que incrementa uma contagem e a registra no console. Este app demonstra como o código minificado pode tornar a depuração complicada e como os mapas de origem podem ajudar a simplificar o processo.

No arquivo package.json, adicione os pacotes webpack e execute npm i para instalá-los. Usaremos o webpack como parte do processo de build para gerar código minificado para produção:

  "devDependencies": {
    "webpack": "^5.96.1",
    "webpack-cli": "^5.1.4"
  }

Para habilitar a minificação do código, adicione um arquivo webpack.config.js com o seguinte snippet. Definir o modo como production informa ao webpack para aplicar otimizações como minificação:

 const path = require('path');
    module.exports = {
        mode: 'production',
        entry: './src/index.js',
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: 'bundle.js',
        },
    };

Agora execute npx webpack para empacotar e minificar seu código. O arquivo dist/bundle.js é gerado com o conteúdo conforme mostrado abaixo. A minificação obscurece nomes de variáveis e funções, removendo caracteres desnecessários como espaços em branco, comentários e código não utilizado, tornando o arquivo de saída menor e mais rápido de carregar.

Finalmente, execute o app e verifique o console após clicar no botão. Para pré-visualizar o app localmente, você pode usar a extensão Live Server no VS Code.

8 estratégias de depuração JavaScript para apps web

Vamos demonstrar oito métodos para ajudar a tornar a depuração de JavaScript um pouco mais fácil:

1. Mapas de origem

Os mapas de origem são arquivos que mapeiam seu código minificado de volta para o código-fonte original. Eles facilitam a depuração e ajudam a investigar problemas em produção.

2. Breakpoints

Breakpoints permitem pausar a execução do código em linhas específicas, ajudando a inspecionar variáveis, avaliar expressões e entender o fluxo do código.

3. Painel de escopo

O painel de escopo pode ser eficaz para a depuração de JavaScript, pois permite ver variáveis do código-fonte original.

4. Percorrendo o código (step into, step over, step out)

Percorrer seu código envolve navegar pelo programa de diferentes maneiras durante a depuração de JavaScript.

5. A pilha de chamadas

A pilha de chamadas mostra a sequência de chamadas de função que levaram ao ponto atual no código.

6. Ignorando scripts

Durante a depuração, pode ser desejável ignorar certos scripts durante seu fluxo de trabalho.

7. Expressões de observação

Expressões de observação permitem rastrear variáveis ou expressões específicas à medida que seu código é executado, ajudando a monitorar mudanças em tempo real.

8. Depuração de snippets de código

Para tentar corrigir o bug com a contagem total, você pode executar snippets de código no console para entender o erro lógico.

Conclusão

Este tutorial explorou a depuração de código minificado usando mapas de origem e Chrome DevTools. Gerando mapas de origem, mapeamos o código minificado de volta para sua fonte original, facilitando a depuração de nossa aplicação web. O Chrome DevTools aprimorou ainda mais o processo de depuração de JavaScript com métodos como breakpoints, percorrendo o código, expressões de observação e mais.