React Native DevTools

Depurar um app React Native sempre exigiu escolher entre ferramentas espalhadas: o Flipper para inspecionar a árvore de componentes, o chrome://inspect para colocar breakpoints no código JavaScript, e logs perdidos no terminal do Metro. A partir do React Native 0.76, essas ferramentas foram substituídas por uma única experiência integrada: o React Native DevTools, um depurador completo construído sobre o protocolo do Chrome DevTools e conectado diretamente ao runtime Hermes do app.

O que ele substitui

Antes do React Native DevTools, depurar JavaScript significava abrir chrome://inspect e conectar manualmente a uma aba remota, inspecionar componentes exigia instalar e configurar o Flipper como processo separado, e breakpoints frequentemente não paravam no lugar certo por causa da forma como o Hermes expunha o código fonte. O React Native DevTools resolve os três problemas de uma vez, abrindo em uma janela própria já conectada ao app em execução.

Como abrir

Com o app rodando em modo de desenvolvimento, basta pressionar j no terminal onde o Metro está sendo executado:

npx react-native start
# com o Metro rodando, pressione "j" no terminal
# (ou "npx expo start" e "j", em projetos Expo)

Isso abre uma janela separada do navegador, já carregada com o estado atual do app — sem precisar configurar URL, porta ou extensão nenhuma.

Painel Components: inspecionando a árvore em produção... de desenvolvimento

A aba Components funciona como o React DevTools clássico: mostra a árvore de componentes renderizada, com props, state e hooks de cada um, e permite editar esses valores em tempo real para testar variações de UI sem recompilar:

function CartaoProduto({ nome, preco, favorito }) {
    const [expandido, setExpandido] = useState(false);

    // Selecionando este componente no painel Components,
    // "favorito" e "expandido" aparecem editáveis no painel lateral
    return (
        <Pressable onPress={() => setExpandido(e => !e)}>
            <Text>{nome} — R$ {preco}</Text>
        </Pressable>
    );
}

No console do próprio DevTools, o componente selecionado fica disponível na variável $r, permitindo inspecionar suas props diretamente via código:

// No console do React Native DevTools, após selecionar um componente
console.log($r.props);
// { nome: 'Caneca', preco: 29.9, favorito: true }

Breakpoints reais no Sources

A aba Sources lista os arquivos JavaScript do bundle e permite colocar breakpoints clicando na margem, exatamente como no Chrome DevTools para a web — incluindo breakpoints condicionais e logpoints, que imprimem uma expressão no console sem pausar a execução:

function calcularDesconto(preco, cupom) {
    debugger; // pausa a execução aqui quando o DevTools está aberto
    if (cupom === 'PROMO10') {
        return preco * 0.9;
    }
    return preco;
}

Diferente das versões anteriores baseadas no runtime JSC, os breakpoints no Hermes agora respeitam corretamente os source maps, parando na linha exata do código-fonte em vez de no bundle minificado.

Memory e Performance

As abas Memory e Performance trazem para o React Native os mesmos recursos que já existiam no Chrome DevTools para web: snapshots de heap agrupados por construtor, úteis para caçar vazamentos de memória, e gravações de performance para identificar funções que consomem tempo de CPU durante uma interação:

// Marca manual de performance, visível na aba Performance
performance.mark('inicio-lista-produtos');
renderizarListaProdutos(produtos);
performance.mark('fim-lista-produtos');
performance.measure('lista-produtos', 'inicio-lista-produtos', 'fim-lista-produtos');

Casos de uso

• Investigar por que um componente renderiza com props inesperadas, editando valores em tempo real na aba Components.
• Colocar breakpoints condicionais em funções chamadas centenas de vezes, parando só quando uma condição específica ocorre.
• Rastrear vazamentos de memória em telas que acumulam listeners ou assinaturas não limpas.
• Inspecionar chamadas de rede feitas pelo app diretamente no painel Network, sem precisar de um proxy externo.

Cuidados

O React Native DevTools só funciona com o motor Hermes — apps ainda usando JSC como engine JavaScript não conseguem se conectar a ele. A conexão antiga via chrome://inspect deixou de funcionar a partir da adoção do DevTools, então scripts ou documentação que ainda orientam esse caminho estão desatualizados. Para depurar código nativo (Kotlin, Swift, Objective-C), o React Native DevTools não serve — continue usando Android Studio ou Xcode normalmente.

Compatibilidade

O React Native DevTools foi lançado como experiência padrão de depuração no React Native 0.76 (outubro de 2024), exigindo Hermes habilitado no projeto. O painel Network, para inspecionar requisições HTTP, foi adicionado posteriormente, a partir do React Native 0.83. Funciona tanto com a Nova Arquitetura quanto com a arquitetura clássica, desde que o Hermes esteja ativo.

documentação oficial

Conclusão

O React Native DevTools consolida em um só lugar o que antes exigia Flipper, extensões do Chrome e configuração manual de depurador remoto. Para quem desenvolve apps React Native, a mudança mais prática é simples: pressionar j no terminal do Metro já abre um depurador completo, com breakpoints confiáveis, inspeção de componentes e, desde a 0.83, visibilidade total sobre as chamadas de rede.