React Native DevTools

React Native DevTools é o depurador integrado para Expo SDK 57 / React Native 0.86 - um aplicativo desktop baseado no Chrome DevTools conectado ao Hermes no seu aplicativo em execução. Use-o para o inspetor de elementos, breakpoints, rastreamentos de rede, gravações de desempenho e (novo em 0.86) emulação de aparência claro/escuro sem alterar as configurações do dispositivo.

Receita

Cartão de receita de referência rápida - pronto para copiar e colar.

# Inicie o Metro, depois anexe o DevTools ao aplicativo em execução
npx expo start
# Pressione j no terminal - ou agite o dispositivo → Open DevTools

// Coloque em App.tsx - dá ao painel Components algo para inspecionar
import { useColorScheme, Pressable, StyleSheet, Text, View } from "react-native";
 
export default function App() {
  const scheme = useColorScheme() ?? "light";
  const theme = scheme === "dark" ? styles.dark : styles.light;
 
  return (
    <View style={[styles.screen, theme.screen]}>
      <Text style={[styles.title, theme.text]} accessibilityRole="header">
        Sonda DevTools
      </Text>
      <Pressable
        accessibilityRole="button"
        accessibilityLabel="Increment counter"
        style={[styles.button, theme.button]}
        onPress={() => console.log("pressed", Date.now())}
      >
        <Text style={theme.text}>Toque em mim - observe o Console</Text>
      </Pressable>
    </View>
  );
}
 
const styles = StyleSheet.create({
  screen: { flex: 1, justifyContent: "center", alignItems: "center", gap: 16, padding: 24 },
  title: { fontSize: 22, fontWeight: "700" },
  button: { paddingHorizontal: 20, paddingVertical: 12, borderRadius: 10 },
  light: { screen: { backgroundColor: "#f8fafc" }, text: { color: "#0f172a" }, button: { backgroundColor: "#e2e8f0" } },
  dark: { screen: { backgroundColor: "#0f172a" }, text: { color: "#f8fafc" }, button: { backgroundColor: "#334155" } },
});

Quando usar isso:

• Você precisa inspecionar a árvore React, destacar elementos no dispositivo ou ajustar props em tempo de execução.
• Breakpoints e saída de console.log devem refletir a execução do Hermes - não uma aba do Chrome desconectada.
• Você está perfilando commits JS, chamadas de rede ou trabalho de renderização React durante a navegação ou rolagem.
• Você deseja verificar o comportamento do modo escuro com a emulação de aparência do DevTools do RN 0.86.
• Tutoriais do Flipper não correspondem mais à sua pilha SDK 57 - DevTools é o caminho suportado.

Exemplo de Trabalho

// screens/DevToolsLab.tsx - monte a partir de App.tsx para exercitar APIs de inspetor + desempenho
 
import { useEffect, useState } from "react";
import { useColorScheme, Button, StyleSheet, Text, View } from "react-native";
 
export default function DevToolsLab() {
  const scheme = useColorScheme() ?? "light";
  const [count, setCount] = useState(0);
 
  useEffect(() => {
    performance.mark("devtools-lab-mounted");
    return () => {
      performance.clearMarks("devtools-lab-mounted");
    };
  }, []);
 
  const bump = () => {
    performance.mark("bump-start");
    setCount((c) => c + 1);
    performance.mark("bump-end");
    performance.measure("bump", "bump-start", "bump-end");
    console.log("count", count + 1, "scheme", scheme);
  };
 
  return (
    <View style={[styles.root, scheme === "dark" && styles.rootDark]}>
      <Text style={styles.heading}>Laboratório DevTools</Text>
      <Text style={styles.meta}>Esquema ativo: {scheme}</Text>
      <Text style={styles.meta}>Contador: {count}</Text>
      <Button title="Incrementar" onPress={bump} />
      <Text style={styles.hint}>
        Abra o DevTools (Metro `j`) → Components para selecionar esta árvore; Performance para gravar um rastreamento;
        Command Palette (⌘/Ctrl+Shift+P) → emule claro/escuro no RN 0.86+.
      </Text>
    </View>
  );
}
 
const styles = StyleSheet.create({
  root: { flex: 1, padding: 24, gap: 10, backgroundColor: "#ffffff" },
  rootDark: { backgroundColor: "#0f172a" },
  heading: { fontSize: 20, fontWeight: "700", color: "#0f172a" },
  meta: { fontSize: 15, color: "#475569" },
  hint: { marginTop: 16, fontSize: 13, lineHeight: 20, color: "#64748b" },
});

O que isso demonstra:

• Um componente de função com useState - O Fast Refresh preserva o estado do contador enquanto você edita estilos.
• useColorScheme - re-renderiza quando o DevTools do RN 0.86 emula claro/escuro via Emulation.setEmulatedMedia.
• performance.mark / performance.measure - entradas aparecem no painel Performance (RN 0.83+).
• console.log - roteia para o Console do DevTools quando conectado.

Análise Profunda

Como Funciona

• O Metro serve seu bundle JS; o aplicativo abre um socket Chrome DevTools Protocol (CDP) para o packager.
• Pressionar j (ou Open DevTools no menu de desenvolvimento) lança o aplicativo desktop React Native DevTools, que se conecta via CDP ao runtime Hermes no dispositivo/simulador selecionado.
• DevTools é apenas para Hermes - substituiu o depurador JS do Flipper, o depurador experimental e a depuração remota do Chrome (removido no RN 0.79).
• Desde o RN 0.85, múltiplos clientes CDP podem se conectar simultaneamente (DevTools + extensões VS Code + outras ferramentas) sem se desconectarem.
• DevTools é desabilitado em builds de produção - o mesmo que LogBox e o menu de desenvolvimento.

Abrindo o DevTools

Painéis em Resumo

Inspetor de Elementos (Painel Components)

1. Abra o DevTools → Components.
2. Clique em Select element (canto superior esquerdo), depois toque em uma view no dispositivo - DevTools foca o fiber correspondente.
3. Edite props ou estado de hooks na gaveta direita para sondar a UI sem recompilar.
4. Habilite Highlight updates when components render (⚙︎) para identificar re-renderizações evitáveis.

Componentes otimizados pelo React Compiler mostram um selo Memo ✨ na árvore.

Performance & Network (RN 0.83+)

• Network captura automaticamente enquanto o DevTools está aberto. Pré-visualizações de resposta armazenam em buffer até 100 MB no dispositivo (o mais antigo é removido primeiro).
• Performance mescla execução JavaScript, rastreamentos de Performance React, eventos de rede e User Timings personalizados (performance.mark).
• Ainda não no painel Network principal do RN: eventos WebSocket, limitação, simulação de resposta.

Observação do Expo: Projetos SDK 57 ainda podem exibir um painel Expo Network para requisições fora de fetch / XHR / <Image> (por exemplo, alguns caminhos do Expo Fetch). Falta integração com initiator e ligação com o painel Performance - prefira o painel Network principal quando suas chamadas forem cobertas.

Emulação Claro/Escuro (RN 0.86)

RN 0.86 adiciona emulação de aparência sem alterar o tema do sistema operacional do dispositivo:

1. Abra a Command Palette do DevTools - ⌘+Shift+P (macOS) ou Ctrl+Shift+P (Windows/Linux).
2. Execute o comando de emulação claro/escuro (Emulation.setEmulatedMedia).
3. Observe useColorScheme() e os estilos temáticos atualizarem no dispositivo.

A substituição é temporária - ela é redefinida quando o DevTools se desconecta. Para testes de tema persistentes no aplicativo, use Appearance.setColorScheme() em builds de desenvolvimento (veja Modo Escuro e Esquemas de Cores).

Notas TypeScript

// debugger; é válido em fontes .tsx - DevTools pausa no bundle Hermes ao vivo
export function debugBreakpoint(value: unknown) {
  if (__DEV__) {
    // eslint-disable-next-line no-debugger
    debugger;
    console.log("debugBreakpoint", value);
  }
}

Armadilhas

• Usando chrome://inspect para RN 0.86 - A depuração remota do Chrome foi removida; a sessão não reflete o bytecode Hermes. Correção: Pressione j ou use o menu de desenvolvimento Open DevTools.
• Esperando DevTools em produção - Ferramentas de depuração são compiladas para fora de builds de produção. Correção: Reproduza em um build de desenvolvimento ou binário simulador __DEV__.
• Breakpoints nunca atingidos após uma recompilação nativa - A sessão CDP morre quando você reinstala o aplicativo. Correção: Use a caixa de diálogo de reconexão ou pressione j novamente.
• Inspetor mostra props desatualizadas - Você editou o estado no DevTools, mas o Fast Refresh remontou a árvore. Correção: Re-selecione o elemento; prefira edições de props para sondagens rápidas, edições de código para mudanças duradouras.
• Painel Network vazio para clientes personalizados - Apenas fetch, XMLHttpRequest e <Image> são instrumentados hoje. Correção: Verifique o Expo Network para pilhas não cobertas, ou registre na camada de rede até que o suporte da biblioteca chegue.
• Emulação claro/escuro "não faz nada" - A tela ignora useColorScheme e codifica cores fixas. Correção: Ramifique estilos de tokens de esquema; a emulação aciona a mesma API que o alternador do sistema operacional.
• Aplicativo desktop DevTools bloqueado por firewall - Redes corporativas podem bloquear o download do binário assinado. Correção: Permita o download ou use o fluxo de lançamento no navegador que o RN fornece.

Alternativas

FAQs

Relacionados

• Noções Básicas de Desenvolvimento Local - Atalhos do Metro, incluindo j e limpeza de cache
• Flipper e Depuradores Alternativos - quando as ferramentas de IDE nativas superam o JS DevTools
• Hot Reload vs Fast Refresh - por que debugger; e breakpoints interagem com Fast Refresh
• Hermes e o Runtime JS - comportamento do motor por trás do depurador
• Modo Escuro e Esquemas de Cores - tokens de tema reais além da emulação DevTools

Versões da Pilha: Esta página foi escrita para React 19.2.3, React Native 0.86.0 e Expo SDK 57 (expo ~57.0.4).