Como depurar apps React Native em dispositivos físicos Android e iOS

Depurar aplicativos React Native em dispositivos físicos é uma etapa essencial no desenvolvimento mobile. Diferente do simulador, o hardware real expõe problemas de performance, conectividade e funcionalidades nativas que não aparecem em ambientes controlados. Este artigo aborda as principais técnicas e ferramentas para depuração em dispositivos Android e iOS, seguindo o contexto da série Temas — Lista Final (1200 temas).

1. Preparação do ambiente de depuração

Antes de conectar o dispositivo, é necessário configurar os modos de desenvolvimento.

Android:
- Acesse "Configurações" > "Sobre o telefone" e toque 7 vezes em "Número da build" para ativar as "Opções do desenvolvedor".
- Em "Opções do desenvolvedor", ative "Depuração USB".
- Conecte o dispositivo via cabo USB e autorize a depuração quando solicitado.

iOS:
- Conecte o iPhone ao Mac e abra o Xcode.
- Vá em "Window" > "Devices and Simulators", selecione o dispositivo e ative "Enable Developer Mode".
- No dispositivo, vá em "Ajustes" > "Geral" > "VPN & Gerenciamento de Dispositivo" e confie no certificado do desenvolvedor.

Verifique os drivers USB no Windows ou Linux para Android. No macOS, o iOS reconhece automaticamente via cabo.

2. Conexão do dispositivo físico ao metro bundler

O Metro bundler é o servidor de desenvolvimento do React Native.

Execute no terminal:

npx react-native start

Android:
- Conecte o dispositivo via USB.
- Execute:
text adb reverse tcp:8081 tcp:8081
- No dispositivo, abra o app e escaneie o QR Code exibido no terminal (se estiver usando Expo) ou pressione "Reload" no menu de desenvolvedor.

iOS:
- Certifique-se de que o dispositivo e o Mac estão na mesma rede Wi-Fi.
- No Safari do Mac, acesse http://<IP_DO_MAC>:8081/index.bundle?platform=ios para verificar a conexão.
- No app, configure o IP manualmente no menu de desenvolvedor.

Verifique os logs no terminal para confirmar a conexão:

[React Native] Running application "MyApp" with appParams: {"rootTag":1}

3. Uso do React Native DevTools (Flipper)

O Flipper é a ferramenta oficial de depuração do React Native.

Instalação:
- Baixe o Flipper em fbflipper.com e instale.
- No projeto, adicione as dependências:
text npm install --save-dev react-native-flipper
- Para iOS, execute pod install no diretório ios.

Conexão:
- Abra o Flipper e selecione o dispositivo conectado.
- As abas principais incluem:
- Logs: Visualiza console.log e erros.
- Network: Inspeciona requisições HTTP.
- Layout Inspector: Examina a árvore de componentes.
- React DevTools: Depura estado e props de componentes.

Exemplo de depuração de rede no Flipper:

// No código
fetch('https://api.exemplo.com/dados')
  .then(response => response.json())
  .then(data => console.log('Dados recebidos:', data));

No Flipper, a requisição aparece com status, headers e corpo da resposta.

4. Depuração via Chrome DevTools (Android)

O Chrome DevTools permite depuração remota apenas no Android.

Ativação:
- Agite o dispositivo ou execute:
text adb shell input keyevent 82
- Selecione "Debug JS Remotely" no menu de desenvolvedor.
- O Chrome abre automaticamente em http://localhost:8081/debugger-ui.

Uso:
- Abra o DevTools (F12) e vá para a aba "Sources".
- Adicione breakpoints no código-fonte:
text function calcularTotal(itens) { debugger; // Pausa aqui return itens.reduce((acc, item) => acc + item.preco, 0); }
- Inspecione variáveis no console e no painel "Scope".

Limitações: Não funciona no iOS nativamente. Para iOS, use Safari Web Inspector.

5. Depuração nativa no iOS com Safari Web Inspector

O Safari oferece depuração direta em dispositivos iOS.

Configuração:
- No Mac, vá em Safari > "Preferências" > "Avançado" e marque "Mostrar menu Desenvolver".
- Conecte o iPhone via cabo USB.
- No menu "Desenvolver" do Safari, selecione o dispositivo e o nome do app.

Recursos:
- Console: Visualiza logs e erros JS.
- Elements: Inspeciona o DOM renderizado.
- Network: Monitora requisições de rede.

Exemplo de inspeção de elemento:

// No console do Safari
document.querySelector('.botao-principal').style.backgroundColor = 'red';

Isso altera a cor do botão em tempo real no dispositivo.

Diferença: A depuração nativa é mais rápida e acessa APIs nativas diretamente, ao contrário da remota que usa um WebSocket.

6. Logs e monitoramento de erros no dispositivo

O uso de logs é fundamental para rastrear problemas.

No código:

console.log('Usuário logado:', usuario.id);
console.warn('Cache expirado, recarregando dados...');

Visualização no Metro:
- Os logs aparecem no terminal com o prefixo [React Native].
- Filtre por nível:
text npx react-native start | grep "\[React Native\]"

Ferramentas nativas:
- Android: adb logcat | grep ReactNativeJS
text adb logcat -s ReactNativeJS:V
- iOS: Console do Xcode (Window > Devices and Simulators > selecione o dispositivo > abra o console).

Crash reporting:
Configure o Sentry no projeto:

npm install @sentry/react-native

import * as Sentry from '@sentry/react-native';
Sentry.init({ dsn: 'https://...' });
Sentry.captureException(new Error('Erro no pagamento'));

7. Depuração de problemas específicos de dispositivos físicos

Dispositivos reais revelam problemas que simuladores escondem.

Performance:
- Use o Flipper com a aba "Performance" ou instale react-native-performance:
text npm install react-native-performance
text import { perf } from 'react-native-performance'; perf.measure('inicio', 'fim');

Layout:
- Teste em dispositivos com diferentes resoluções. Use o Layout Inspector do Flipper para identificar elementos fora do lugar.

Funcionalidades nativas:
- Para depurar a câmera, adicione logs nos callbacks:
text const handleTakePhoto = async () => { const photo = await camera.takePicture(); console.log('Foto capturada:', photo.uri); };

Erros comuns:
- "Unable to load script": Verifique a conexão com o Metro e execute adb reverse tcp:8081 tcp:8081.
- "Red screen of death": Leia a mensagem de erro no dispositivo e verifique logs no terminal.
- Conflitos de versão: Limpe o cache com npx react-native start --reset-cache.

8. Dicas avançadas e boas práticas

React DevTools standalone:
- Instale globalmente:
text npm install -g react-devtools
- Execute react-devtools e conecte ao app em modo debug.

react-native-debugger:
- Alternativa que integra Chrome DevTools e React DevTools em uma única interface.
- Baixe em github.com/jhen0409/react-native-debugger.

Automação de testes:
- Use Detox para testes end-to-end em dispositivos físicos:
text npm install detox --save-dev
- Configure no arquivo .detoxrc.js e execute detox test.

Checklist final:
1. Verifique a conexão USB ou Wi-Fi.
2. Reinicie o Metro bundler se houver lentidão.
3. Limpe o cache com npx react-native start --reset-cache.
4. Teste em pelo menos dois dispositivos físicos (Android e iOS).

Depurar em dispositivos físicos é uma prática que economiza horas de retrabalho. Com as ferramentas certas — Flipper, Chrome DevTools, Safari Web Inspector e logs nativos — você consegue identificar e corrigir problemas com precisão, garantindo apps estáveis e performáticos.

Referências