Debugging & Tooling 10 min leestijdGemiddeld

React Native DevTools in 2026: Complete Debugging Gids met Hermes en Profiler

Praktische gids voor React Native DevTools in 2026: open de debugger via Metro, zet breakpoints in Hermes, inspecteer netwerk, profileer renders en spoor geheugenlekken op.

Editorial TeamBeoordeeld door Jake Morrison, Jun 2026
React Native DevTools Gids (2026)

Bijgewerkt: 10 juni 2026

React Native DevTools is de officiële, ingebouwde debugger voor React Native, en sinds versie 0.76 vervangt hij de oude Chrome-debugger en Flipper als standaardtool voor het inspecteren van JavaScript-code, netwerkverzoeken en componenten. In deze gids laat ik je zien hoe je DevTools opent, breakpoints zet in Hermes, geheugengebruik analyseert en de React Profiler gebruikt om je app sneller te maken. Alle voorbeelden zijn getest met React Native 0.78 en Expo SDK 55, de meest recente stabiele combinatie van 2026.

Eerlijk? Ik werkte vorig jaar nog dagelijks met Flipper en heb de overstap naar DevTools eerst uitgesteld. Achteraf gezien zonde van de tijd. Zodra je eenmaal door de basics heen bent, voelt het rustiger werken.

  • React Native DevTools wordt sinds RN 0.76 standaard meegeleverd en draait bovenop het Chrome DevTools Protocol (CDP), volledig geïntegreerd met de Hermes-engine.
  • Open DevTools door j in te drukken in de Metro-terminal, of via het Dev Menu met ⌘D (iOS) of ⌘M (Android-emulator).
  • Flipper-ondersteuning is sinds RN 0.74 verwijderd. React Native DevTools is de officieel aanbevolen vervanger voor netwerk-, console- en component-inspectie.
  • De React Components- en Profiler-tabs werken in DevTools zelf, dus een aparte react-devtools-installatie is niet meer nodig.
  • Source maps werken automatisch zodra Hermes en Metro draaien, waardoor breakpoints in oorspronkelijke TypeScript/JSX-bestanden werken.
  • Voor productie-builds gebruik je Hermes Sampling Profiler in combinatie met DevTools om CPU-trace-bestanden te analyseren zonder dev-overhead.

Wat is React Native DevTools?

React Native DevTools is een desktop-debugger die de Chrome DevTools-frontend hergebruikt en via het Chrome DevTools Protocol (CDP) communiceert met de Hermes JavaScript-engine die in je app draait. Het project werd in oktober 2024 met React Native 0.76 als standaard uitgerold, na bijna een jaar als opt-in feature te hebben gedraaid. In 0.78 (maart 2026) is het verder gestabiliseerd met betere bron-resolutie en sneller opstarten.

Anders dan de oude "Debug with Chrome"-modus draait je JavaScript niet in een browsertab, maar gewoon op het toestel of in de emulator. DevTools verbindt op afstand via Metro en biedt daardoor accurate stack traces, native timers en kloppende native-module-calls. In de praktijk betekent dit dat setTimeout, Date.now() en animaties zich precies gedragen zoals in productie. Dat alleen al haalt een hoop valse bugs van de oude debugger weg.

De tool is gebouwd op dezelfde Inspector-bibliotheek die Chrome zelf gebruikt, dus de leercurve is laag als je al ervaring hebt met webdebugging. Tabs als Sources, Network, Memory en Console werken nagenoeg identiek.

Hoe open je React Native DevTools?

De snelste manier om DevTools te openen is via Metro: start je app met npx expo start of npx react-native start en druk in de terminal op de toets j. Metro opent dan automatisch een nieuw Chromium-venster met DevTools aangesloten op de actieve Hermes-instantie. Voor Expo-projecten werkt dit out-of-the-box vanaf SDK 52. Zie ook onze Expo SDK 55-gids voor de exacte versies.

Een alternatieve route loopt via het Dev Menu in de app. Schud het toestel, druk ⌘D op de iOS-simulator of ⌘M op de Android-emulator en kies Open DevTools. Bij een fysiek Android-toestel kun je ook adb shell input keyevent 82 uitvoeren om het menu te triggeren.

# Start Metro en open DevTools
npx expo start --dev-client

# Druk vervolgens in de Metro-terminal:
# j  → opent React Native DevTools
# r  → reload van de app
# m  → opent het Dev Menu op het toestel

Opent DevTools niet? Controleer dan of Hermes aanstaat (hermes in app.json of jsEngine: "hermes" in react-native.config.js) en of poort 8081 niet door een andere Metro-instantie wordt gebruikt. Ik liep zelf laatst tegen het tweede probleem aan na een crashed vorige sessie; een simpele lsof -i :8081 bracht de schuldige boven water.

Breakpoints en source maps met Hermes

Breakpoints zetten in React Native DevTools voelt vrijwel hetzelfde als in een browser. Open de Sources-tab, vouw de boom open onder localhost:8081, ga naar je App.tsx of een feature-bestand en klik op het regelnummer. Hermes-source maps worden door Metro automatisch geleverd, dus je ziet je originele TypeScript-code in plaats van de gecompileerde bundle.

Voor conditionele breakpoints klik je met de rechtermuisknop op het regelnummer en kies je Add conditional breakpoint. Logpoints (die console-output genereren zonder de uitvoering te pauzeren) zijn ideaal om hot-path-code te observeren zonder timing te verstoren.

// Voorbeeld: debuggen van een data-fetch in een Zustand-store
import { create } from 'zustand';

interface ProductStore {
  items: Product[];
  fetchItems: () => Promise<void>;
}

export const useProductStore = create<ProductStore>((set) => ({
  items: [],
  fetchItems: async () => {
    debugger; // Hermes pauzeert hier zodra DevTools verbonden is
    const response = await fetch('https://api.example.com/products');
    const data = await response.json();
    set({ items: data });
  },
}));

De debugger-statement werkt nu betrouwbaar in Hermes vanaf RN 0.76. Vóór die versie werd hij in release-builds genegeerd. Vergeet niet hem te verwijderen vóór je een productie-build maakt (ik heb een keer een hele release moeten herbouwen omdat een achtergebleven debugger een testapparaat liet hangen).

Netwerkverzoeken inspecteren

Sinds RN 0.76 worden alle fetch- en XMLHttpRequest-oproepen automatisch onderschept en zichtbaar in de Network-tab van DevTools. Je ziet status, methode, headers, payload en timing-waterval, net zoals in een webbrowser. Voor WebSocket-verbindingen toont DevTools elk frame in de richting van en naar de server.

Werk je met TanStack Query of een ander data-fetching-systeem? Bekijk dan onze gids over state management met Zustand en TanStack Query voor patronen die goed samenwerken met de Network-tab. Door queries een herkenbare queryKey te geven en die te loggen, kun je in DevTools direct linken welke component welke request triggert.

Een veelgemiste functie is Throttling. In de Network-tab kun je een vooraf ingestelde snelheid kiezen (Slow 3G, Fast 4G of een custom profiel) om te zien hoe je app reageert bij slechte verbinding. Combineer dit met Offline-modus om je retry-logica te testen.

// Voorbeeld: een fetch met traceer-headers voor eenvoudig filteren
const fetchProducts = async () => {
  const response = await fetch('https://api.example.com/products', {
    headers: {
      'X-Client': 'react-native-app',
      'X-Trace-Id': crypto.randomUUID(),
    },
  });
  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }
  return response.json();
};

React Components en Profiler-tabs

React Native DevTools heeft sinds versie 0.77 de React Components- en Profiler-panels rechtstreeks geïntegreerd. Je hoeft het losse pakket react-devtools niet meer apart te installeren of starten. Open simpelweg DevTools en je vindt twee extra tabs: ⚛︎ Components en ⚛︎ Profiler.

In Components zie je de volledige boom met props, state, hooks en context. Klik op een component en de bijbehorende source-locatie wordt zichtbaar in de Sources-tab. Heel handig om snel naar de definitie te springen. Hooks worden tussen haakjes getoond met hun huidige waarde, inclusief custom hooks.

De Profiler meet hoe lang elke commit duurt en welke componenten opnieuw renderden. Start een opname, gebruik je app een paar seconden, stop de opname en bekijk de flame chart. Componenten in rood zijn de zwaarste; klik erop voor exacte render-tijden in milliseconden. Dit is dezelfde profiler die in React voor het web wordt gebruikt, alleen draait hij nu via CDP op je toestel.

Geheugenlekken opsporen met de Memory-tab

Geheugenlekken zijn berucht in mobiele apps omdat ze pas na lang gebruik merkbaar worden. De Memory-tab in React Native DevTools laat je heap-snapshots maken van de Hermes-runtime. Maak een snapshot vóór een verdachte handeling (bijvoorbeeld navigeren naar een scherm), voer de handeling enkele keren uit en maak een tweede snapshot. Vergelijk beide met de Comparison-modus om te zien welke objecten bleven hangen.

Veelvoorkomende oorzaken die je hier ziet zijn vergeten removeEventListener-calls, ongeruimde timers en useRef-objecten die zware structuren vasthouden. Sinds Hermes v1.0 (uitgebracht met Expo SDK 55) bevatten snapshots ook de bridgeless heap-segmenten, wat eindelijk inzicht geeft in geheugengebruik van TurboModules. Meer hierover lees je in onze gids over de Nieuwe Architectuur.

// Patroon: gebruik AbortController om fetch-lekken te voorkomen
import { useEffect, useState } from 'react';

export function useProducts() {
  const [data, setData] = useState<Product[]>([]);

  useEffect(() => {
    const controller = new AbortController();
    fetch('/api/products', { signal: controller.signal })
      .then(r => r.json())
      .then(setData)
      .catch(err => {
        if (err.name !== 'AbortError') throw err;
      });
    return () => controller.abort();
  }, []);

  return data;
}

Verschil met Flipper en de legacy debugger

Flipper werd in 2022 als standaarddebugger geïntroduceerd, maar in RN 0.74 (april 2024) werd de officiële integratie verwijderd vanwege onderhoudslast en compatibiliteitsproblemen met de Nieuwe Architectuur. De community-fork bestaat nog, maar voor nieuwe projecten wordt deze niet meer aanbevolen.

De onderstaande tabel laat zien hoe React Native DevTools zich verhoudt tot Flipper en de oude Chrome-debugger.

FunctieRN DevTools (2026)FlipperLegacy Chrome-debugger
StatusOfficieel ondersteundCommunity-forkVerwijderd in 0.73
EngineHermes via CDPHermes + JSI pluginsV8 in Chrome-tab
BreakpointsVolledig, conditioneelVolledigVolledig maar trage timing
Network-tabIngebouwdPlugin vereistBeperkt
React ComponentsIngebouwd vanaf 0.77Plugin vereistNiet beschikbaar
Native logsVia MetroIngebouwdNiet beschikbaar
Nieuwe ArchitectuurVolledig ondersteundGedeeltelijkNiet ondersteund
InstallatieGeen (in Metro)Aparte desktop-appGeen

Voor projecten die nog van Flipper afhankelijk zijn voor specifieke plugins (bijvoorbeeld een database-inspecteur), is het verstandig om de migratie naar DevTools in te plannen. De officiële React Native DevTools-documentatie bevat een migratiematrix per plugin.

Productie-profiling met Hermes Sampling Profiler

Voor metingen in release-builds gebruik je de Hermes Sampling Profiler. Deze tool registreert de call-stack van JavaScript op vaste intervallen zonder de runtime te vertragen, en is ideaal om gebruikersgedrag in productie te analyseren zonder development-overhead. Start een opname via het Dev Menu (Start Sampling Profiler) of programmatisch met HermesSamplingProfiler.start(). Stop daarna en sla het CPU-profiel op.

Het resulterende .cpuprofile-bestand kun je in React Native DevTools openen via Performance > Load profile. De flame chart laat zien waar JavaScript-cycli verloren gaan. Combineer dit met het Bottom-Up-overzicht om de zwaarste functies eerst te zien.

import * as HermesSamplingProfiler from 'react-native/Libraries/Performance/SamplingProfiler';

export const startProfilingScene = () => {
  HermesSamplingProfiler.start();
};

export const stopProfilingScene = async () => {
  const profilePath = await HermesSamplingProfiler.stop();
  console.log('Profile opgeslagen:', profilePath);
  // Upload het bestand of laad het in DevTools
};

Voor een dieper duik in het samenspel tussen DevTools, Hermes en de bridgeless runtime, raadpleeg de React Native releaseaantekeningen op GitHub, waar elke minor-versie de nieuwe debug-hooks documenteert.

Veelgestelde vragen

Werkt React Native DevTools met Expo Go?

Ja, Expo Go vanaf SDK 52 bevat Hermes met CDP-ondersteuning, dus DevTools opent automatisch zodra je j in de Expo CLI drukt. Voor development builds gemaakt met EAS werkt het identiek.

Is Flipper nog ondersteund in React Native 2026?

Nee, de officiële Flipper-integratie is verwijderd vanaf React Native 0.74. Een community-fork bestaat nog, maar voor nieuwe projecten wordt React Native DevTools aanbevolen omdat het volledig compatibel is met de Nieuwe Architectuur.

Hoe debug ik een React Native app op een fysiek toestel?

Verbind het toestel via USB, zorg dat Metro draait op poort 8081 en open het Dev Menu op het toestel. Voor Android voer je adb reverse tcp:8081 tcp:8081 uit zodat het toestel met je Mac of pc kan communiceren. Druk dan j in Metro om DevTools te openen.

Waarom werken mijn breakpoints niet?

De meest voorkomende oorzaak is dat de JavaScript-engine niet Hermes is. Controleer jsEngine in app.json of react-native.config.js. Daarnaast moeten source maps door Metro geleverd worden; herstart Metro met --reset-cache als die niet matchen.

Kun je Redux of Zustand state inspecteren in DevTools?

Direct in de Components-tab zie je hooks-state, inclusief Zustand-store-waarden via useStore. Voor Redux werkt de Redux DevTools-extensie via een aparte Chrome-tab; native integratie in RN DevTools staat op de roadmap voor RN 0.80.

Over de Auteur Editorial Team

Our team of expert writers and editors.