Aprenda de forma definitiva a como debugar sua aplicação React

Depurar uma aplicação React é essencialmente identificar e resolver problemas que inevitavelmente surgem durante o processo de desenvolvimento de software. Como uma aplicação React é, no fundo, um pacote JavaScript, podemos aproveitar diversas técnicas e ferramentas para tornar a depuração mais eficiente, ajudando-nos a chegar à raiz do problema mais rapidamente para corrigi-lo.

No entanto, é importante notar que nem todas as aplicações React são renderizadas no lado do cliente. Em casos como Server Side Rendering (SSR), como com frameworks do tipo Next.js, você pode contar com a documentação oficial e detalhada fornecida pelo próprio framework para orientá-lo na depuração.

Alguns erros comuns que você pode encontrar em uma aplicação React:

Erros de lógica: São problemas internos na aplicação, geralmente causados por regras de negócio que não se comportam como esperado.
Erros de rede: Acontecem quando há uma falha inesperada em uma requisição, por exemplo, recebendo dados inconsistentes ou nenhum dado.
Erros visuais/UI: É comum usar componentes de terceiros para implementar comportamentos visuais específicos. Bibliotecas como ShadCN, MUI, entre outras, podem gerar problemas inesperados se não configuradas corretamente. Identificar esses bugs pode ser um verdadeiro desafio 🙂.

💡 Pré-requisitos: Para depurar uma aplicação React, assumimos que você tem um navegador web e um editor de texto como VSCode instalados, e que está usando Node.js como runtime (junto com seus gerenciadores de pacotes).

Ferramentas mais usadas para depuração

Chrome DevTools

O Chrome DevTools é um conjunto de ferramentas de desenvolvimento embutido no navegador Google Chrome (ou qualquer navegador baseado em Chromium, como Opera ou Brave). Ao clicar com o botão direito em qualquer parte da página e selecionar Inspecionar, você terá acesso a recursos que facilitam a depuração do código e solução de problemas. Para um entendimento mais técnico do Chrome DevTools, consulte a documentação oficial.

Na prática, os principais painéis usados em aplicações React são:

Aba Sources → Contém todo o código servido localmente e empacotado pela ferramenta de build, mostrando a estrutura completa da aplicação. É aqui que você pode definir breakpoints ou usar a declaração debugger para pausar a execução e inspecionar os dados no fluxo da aplicação.
Aba Console → É o console tradicional do JavaScript, permitindo visualizar mensagens inseridas no código via console.log(), console.warn(), console.error(), console.info(), entre outros.
Aba Network → Permite visualizar todas as transações de dados de rede feitas pela aplicação, incluindo requisições síncronas e conexões WebSocket. Nela, você pode inspecionar cabeçalhos, detalhes das requisições e respostas, payloads, tempos de resposta e o tamanho de cada recurso transferido. Como esse é um tema extenso, principalmente quando falamos de APIs REST ou GraphQL, será tratado em mais detalhes em outro artigo 🚀.

React Developer Tools

O React Developer Tools fornece uma visão mais detalhada dos componentes React, ajudando os desenvolvedores a identificar problemas e analisar desempenho. Ele é instalado como extensão de navegador e suporta Chrome (e outros navegadores baseados em Chromium), Firefox e Edge.

💡 Safari: Para instalar no Safari (por exemplo, para usuários de Mac), é necessário instalar como um pacote NPM, seguindo o guia de instalação específico.

💡 O React Developer Tools não substitui o Chrome DevTools, mas sim o complementa. Usando ambos em conjunto, podemos inspecionar a aplicação desde a árvore de componentes até a lógica de negócio.

Principais abas do React Developer Tools:

Aba Components → Permite acessar a árvore e hierarquia de componentes da aplicação React. Vale lembrar que os nomes dos componentes podem variar de acordo com o tipo de bundle em execução (em desenvolvimento local, os nomes são geralmente mais claros que em builds de produção). Além disso, você pode ver informações úteis como props, classes e estado de cada componente.
Aba Profiler → Dá acesso a dados de desempenho da aplicação. Ao clicar em Record, a ferramenta começa a rastrear as transações dos componentes, mostrando tempos de renderização e se alguma tarefa está demorando mais do que o esperado. Assim, fica mais fácil identificar componentes que podem impactar negativamente a aplicação por excesso de renders ou tempo elevado de execução.

Extensão no Visual Studio Code (JS Debugger)

No VSCode, é possível usar ferramentas para auxiliar o fluxo diário de desenvolvimento. Para depurar uma aplicação React, vamos usar a extensão JavaScript Debugger.

No painel de extensões do VSCode, pesquise por JavaScript Debugger e instale a extensão oficial da Microsoft (mantida pela própria equipe do VSCode).

Depois de instalada, clique no ícone de Depuração (representado por um inseto) na Activity Bar. Em seguida, clique em Run and Debug e selecione Web App (Chrome) para o Google Chrome ou Web App (Edge) para usuários do Edge.

Isso criará automaticamente um arquivo launch.json na pasta do seu projeto React. Um exemplo de configuração seria:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "msedge",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:5173",
            "webRoot": "${workspaceFolder}"
        }
    ]
}