Como você faz debug em aplicações React Native?

Question

Accepted Answer

Fazer debug em React Native envolve ferramentas e técnicas para diagnosticar problemas — o **React Native debugger/DevTools**, console logging, **Flipper**, mensagens de erro e debugging específico da plataforma. Fazer debug efetivamente é uma habilidade prática essencial.

## Ferramentas de debug principais

```text
✓ CONSOLE.LOG → log values/flow (basic but effective; shows in the Metro terminal/debugger)
✓ DEV MENU (shake device / Cmd+D / Cmd+M) → reload, debug, performance monitor, inspector
✓ REACT DEVTOOLS → inspect the component tree, props, state, hooks
✓ DEBUGGER → set breakpoints, step through JS (Chrome DevTools / Hermes debugger / IDE)
✓ ELEMENT INSPECTOR → inspect/tap UI elements to see their styles/hierarchy
```

## Flipper e outras ferramentas

```text
→ FLIPPER → a desktop debugging platform: inspect network requests, logs, layout, state,
  databases, performance (a rich debugging tool for RN)
→ Network debugging → inspect API requests/responses (Flipper, or React Query devtools)
→ Error/red screens → React Native shows errors with stack traces; read them carefully
→ Hermes (the JS engine) debugging tools
```

## Problemas comuns e abordagens

```text
✓ Read ERROR MESSAGES carefully (red screen stack traces point to the problem)
✓ Isolate the issue (comment out / simplify to find the cause)
✓ Check the JS thread (logs), network (requests), and native logs (Xcode/Android Studio
  Logcat for native-side issues)
✓ Platform-specific bugs → test/debug on BOTH iOS and Android
✓ Performance issues → use the performance monitor / profiler
```

## Por que isso importa

Entender como fazer debug em aplicações React Native é uma habilidade prática essencial porque **problemas inevitavelmente surgem** (bugs, erros, comportamentos inesperados) que devem ser diagnosticados, então conhecer as ferramentas e técnicas é necessário para desenvolvimento produtivo.

O desenvolvimento em React Native inevitavelmente envolve debugging, e entender as ferramentas disponíveis é fundamental.

As **ferramentas principais** — `console.log` (logging básico mas efetivo), o **menu dev** (reload, opções de debugging, inspector), **React DevTools** (inspecionando a árvore de componentes, props, state e hooks — essencial para entender o comportamento dos componentes), o **debugger** (breakpoints e stepping através do JS) e o **element inspector** (examinando elementos da UI e estilos) — cobrem as necessidades fundamentais de debugging.

Entender **Flipper** (uma plataforma desktop rich de debugging para inspecionar requisições de rede, logs, layout, state e performance) e debugging de rede é valioso para diagnosticar problemas de API e dados comuns em apps.

Entender **problemas comuns e abordagens** — ler mensagens de erro e stack traces da tela vermelha cuidadosamente (eles apontam para o problema), isolar problemas por simplificação, verificar a thread JS, rede e **logs nativos** (Xcode/Android Studio Logcat para problemas no lado nativo — importante porque React Native tem lado JS e nativo), fazer debug de **bugs específicos de plataforma em ambas as plataformas** e usar o performance monitor para problemas de performance — reflete debugging efetivo e sistemático.

A natureza dual JS/nativo do React Native e seu aspecto cross-platform tornam o debugging necessário de conhecimento específico (verificar ambos os lados, ambas as plataformas).

Como problemas inevitavelmente surgem no desenvolvimento em React Native e fazer debug efetivo (usando as ferramentas certas — DevTools, Flipper, logs, logs nativos — e abordagens sistemáticas, incluindo verificar ambas as plataformas e tanto o lado JS quanto nativo) é necessário para diagnosticar e resolver eles, entender como fazer debug em aplicações React Native é essencial, habilidade prática frequentemente aplicada — uma competência central para desenvolvimento produtivo em React Native que transforma bugs inevitáveis em problemas solucionáveis, necessário para qualquer trabalho real com React Native.