Felsökning 12 min läsning

React Native Felsökning 2026: Guide till DevTools, Reactotron och Radon IDE

Lär dig felsöka React Native-appar 2026 med DevTools, Reactotron och Radon IDE. Praktiska kodexempel för breakpoints, tillståndsinspektion, nätverksövervakning och prestandaprofilering.

Editorial Team

Varför felsökning i React Native har förändrats i grunden

Om du har byggt React Native-appar de senaste åren vet du precis hur frustrerande felsökning kunde vara. Flipper var liksom det verktyg alla använde, men det kom med långa byggtider, instabila anslutningar och transitiva beroenden som ibland — och jag menar verkligen ibland — hindrade appar från att ens starta. Riktigt irriterande.

Men nu? Helt annat läge.

Med React Native 0.76 försvann Flipper som standardrekommendation, och sedan dess har ekosystemet genomgått en rejäl förändring. I dag, med React Native 0.83 och Expo SDK 55, har vi verktyg som faktiskt fungerar — snabbare, stabilare och bättre integrerade i utvecklarflödet. Den här guiden går igenom de tre viktigaste felsökningsverktygen för 2026: React Native DevTools, Reactotron och Radon IDE. Jag går även igenom nativa verktyg och arbetsflöden som jag själv använder dagligen.

React Native DevTools: det nya standardverktyget

React Native DevTools presenterades på React Universe Conf 2024 och blev standardfelsökaren från och med React Native 0.76. Verktyget bygger på samma frontend som Chrome DevTools, så om du jobbat med webbutveckling känner du dig hemma direkt. Med version 0.83 har det dessutom fått helt nya paneler för nätverk och prestanda.

Starta DevTools

Att komma igång är egentligen ganska enkelt. Se till att din app använder Hermes som JavaScript-motor (det är standard i alla moderna Expo- och React Native-projekt numera), och tryck sedan på j i terminalen där din utvecklingsserver körs:

# Starta din Expo-app
npx expo start

# Tryck j i terminalen för att öppna DevTools
# Alternativt: öppna Dev Menu i appen och välj "Open DevTools"

DevTools öppnas i ett nytt webbläsarfönster med alla paneler redo. Inga extra steg.

Console — interaktiv JavaScript-terminal

Console-panelen ger dig en interaktiv terminal kopplad direkt till din app. Du kan skriva vilken JavaScript-kod som helst och köra den som om den vore en del av appen. Koden exekveras i det globala scopet som standard, men när du stannar vid en breakpoint körs den i det aktuella scopet — perfekt för att inspektera lokala variabler och anropa metoder direkt.

// Exempel: inspektera aktuellt tillstånd direkt i konsolen
console.log(JSON.stringify(global.__STORE__.getState(), null, 2));

// Testa en funktion utan att ladda om appen
myApiService.fetchUser("abc123").then(console.log);

Viktigt att veta: Hermes har vissa begränsningar i konsolen — const, let och top-level await stöds inte i konsol-kontexten. Använd var istället. Lite irriterande, men man vänjer sig.

Sources — breakpoints och steg-för-steg-felsökning

Sources-panelen låter dig navigera i din apps källkod, sätta breakpoints och stega igenom kod rad för rad. Det här är ärligt talat det mest kraftfulla sättet att förstå exakt vad som händer i din app vid en given tidpunkt.

Så här använder du breakpoints effektivt:

  1. Öppna en fil via sidopanelen eller med Cmd+P (macOS) / Ctrl+P (Windows/Linux)
  2. Klicka på radnumret för att sätta en breakpoint
  3. Navigera genom koden med kontrollerna uppe till höger (Step Over, Step Into, Step Out, Continue)
  4. Inspektera variabler i den högra panelen under Scope och Call Stack
// Sätt en breakpoint programmatiskt med debugger-satsen
async function handleLogin(email, password) {
  debugger; // DevTools stannar här automatiskt
  const response = await authService.login(email, password);
  if (!response.ok) {
    throw new AuthError(response.statusText);
  }
  return response.data;
}

Du kan också använda villkorliga breakpoints genom att högerklicka på radnumret. Ange ett uttryck som userId === "test-123" så stannar DevTools bara när villkoret är sant. Det finns även logpoints — de loggar ett meddelande utan att pausa exekveringen, vilket är perfekt för att spåra flöden utan att avbryta appen. Jag använder logpoints väldigt ofta själv, särskilt för att följa asynkrona flöden.

Network — övervaka alla nätverksanrop

Nätverkspanelen, som blev fullt tillgänglig i React Native 0.83, låter dig inspektera alla HTTP-förfrågningar som din app gör. Förfrågningar loggas automatiskt när DevTools är öppna.

Varje förfrågan visar detaljerad metadata:

  • Tidsåtgång — hur lång tid varje förfrågan tar
  • Headers — skickade och mottagna headers
  • Response-förhandsvisning — se svarsinnehållet direkt
  • Initiator — se om förfrågan kom från en useEffect, användarinteraktion eller tillståndsuppdatering
// Alla fetch()-anrop fångas automatiskt
const response = await fetch("https://api.example.com/users", {
  method: "GET",
  headers: { Authorization: `Bearer ${token}` },
});

// XMLHttpRequest och Image-laddningar loggas också
// Stöd för anpassade nätverksbibliotek (som Expo Fetch) kommer snart

Det här är verkligen ovärderligt för att identifiera dubbletter av API-anrop, kontrollera att rätt auth-headers skickas, eller hitta långsamma endpoints. Jag har tappat räkningen på hur många gånger en dubbel-fetch har smugit sig in i en useEffect utan rätt dependency-array.

Performance — enhetlig prestandaöversikt

Performance-panelen i React Native 0.83 samlar all prestandadata i en enda tidslinje. Här kan du se renderingstider, JavaScript-exekvering och nativa operationer sida vid sida. Det gör det betydligt enklare att hitta flaskhalsar — exempelvis om en komponent renderas i onödan eller om en tung beräkning blockerar huvudtråden.

Memory — minnesprofiler

Memory-panelen låter dig ta heap snapshots av JavaScript-minnet eller använda allocation sampling för att övervaka minnesanvändningen under körning. Det här är kritiskt för att hitta minnesläckor — sådana som gör att appen långsamt blir segare och segare tills den till slut kraschar. (Vi har alla varit där.)

Reactotron: djupinspektion av tillstånd och nätverk

Reactotron från Infinite Red är ett gratis skrivbordsverktyg med öppen källkod som fokuserar på det som React Native DevTools inte täcker lika bra: tillståndshantering, lokal lagring och detaljerad nätverksövervakning. Och det bästa? Du behöver inte aktivera debug-läge som saktar ner appen.

Installation och grundkonfiguration

Installera Reactotron som ett utvecklingsberoende:

npm install --save-dev reactotron-react-native

Skapa sedan en konfigurationsfil i projektets rot:

// ReactotronConfig.js
import Reactotron from "reactotron-react-native";

if (__DEV__) {
  Reactotron
    .configure({ name: "MinApp" })
    .useReactNative({
      networking: {
        ignoreUrls: /symbolicate|logs/,
      },
    })
    .connect();

  // Rensa loggen vid varje omstart
  Reactotron.clear();
}

export default Reactotron;

Importera konfigurationen högst upp i din index.js eller App.tsx:

// index.js
import "./ReactotronConfig"; // Måste vara den första importen
import { AppRegistry } from "react-native";
import App from "./App";
import { name as appName } from "./app.json";

AppRegistry.registerComponent(appName, () => App);

Ladda ner och starta Reactotron Desktop — din app bör ansluta automatiskt.

Android-emulator: Om du kör Android Emulator behöver du portvidarebefordran. Glöm inte det här steget, annars sitter du och undrar varför inget ansluter (fråga mig inte hur jag vet):

adb reverse tcp:9090 tcp:9090

AsyncStorage-inspektion

Reactotron kan visa och övervaka allt som lagras i AsyncStorage i realtid:

import AsyncStorage from "@react-native-async-storage/async-storage";
import Reactotron from "reactotron-react-native";

if (__DEV__) {
  Reactotron
    .setAsyncStorageHandler(AsyncStorage)
    .configure({ name: "MinApp" })
    .useReactNative({
      asyncStorage: true, // Aktivera AsyncStorage-spårning
    })
    .connect();
}

export default Reactotron;

MMKV-integration

Om du använder react-native-mmkv (som är ungefär 30 gånger snabbare än AsyncStorage — ja, trettio gånger) kan du integrera det med Reactotron via ett dedikerat plugin:

npm install --save-dev reactotron-react-native-mmkv
import Reactotron from "reactotron-react-native";
import type { ReactotronReactNative } from "reactotron-react-native";
import mmkvPlugin from "reactotron-react-native-mmkv";
import { storage } from "./storage"; // Din MMKV-instans

if (__DEV__) {
  Reactotron
    .configure({ name: "MinApp" })
    .useReactNative()
    .use(mmkvPlugin<ReactotronReactNative>({
      storage,
      ignore: ["sensitiveKey", "persist:root"], // Dölj känsliga nycklar
    }))
    .connect();
}

export default Reactotron;

Nu kan du se alla MMKV-uppdateringar i realtid i Reactotron — vilka nycklar som sätts, ändras och tas bort. Väldigt smidigt när du felsöker persisterad data.

Redux-integration

Reactotron har förstklassigt stöd för Redux via reactotron-redux-pluginet:

npm install --save-dev reactotron-redux
// store.ts
import { configureStore } from "@reduxjs/toolkit";
import Reactotron from "./ReactotronConfig";
import rootReducer from "./reducers";

const store = configureStore({
  reducer: rootReducer,
  enhancers: (getDefaultEnhancers) =>
    __DEV__
      ? getDefaultEnhancers().concat(Reactotron.createEnhancer())
      : getDefaultEnhancers(),
});

export default store;

Med det här på plats får du en State-flik i Reactotron där du kan:

  • Se hela Redux-tillståndet i realtid
  • Övervaka alla dispatchade actions med exekveringstider
  • Ta och återställa state-snapshots
  • Dispatcha actions manuellt direkt från Reactotron

Det där sista — att manuellt dispatcha actions — är guld värt när du vill testa edge cases utan att klicka igenom hela appen.

Zustand-integration

Använder du Zustand istället för Redux? Reactotron kan fortfarande hjälpa dig. Du får logga tillståndsändringar manuellt, men det funkar bra i praktiken:

import { create } from "zustand";
import Reactotron from "./ReactotronConfig";

const useAuthStore = create((set) => ({
  user: null,
  isAuthenticated: false,
  login: (user) => {
    if (__DEV__) {
      Reactotron.display({
        name: "AUTH",
        value: { action: "login", user },
        preview: `Inloggad som ${user.email}`,
      });
    }
    set({ user, isAuthenticated: true });
  },
  logout: () => {
    if (__DEV__) {
      Reactotron.display({
        name: "AUTH",
        value: { action: "logout" },
        preview: "Utloggad",
      });
    }
    set({ user: null, isAuthenticated: false });
  },
}));

Radon IDE: felsökning integrerad i editorn

Radon IDE från Software Mansion (teamet bakom Reanimated och Gesture Handler) är ett tillägg för VS Code och Cursor som förvandlar din editor till en fullfjädrad React Native-IDE. Istället för att hoppa mellan editor, simulator och felsökningsfönster får du allt samlat på ett ställe.

Och ärligt talat — det är en ganska stor skillnad i arbetsflödet.

Vad gör Radon IDE unikt?

  • Integrerad simulator/emulator — kör iOS Simulator och Android Emulator direkt i VS Code utan att lämna editorn
  • Nollkonfig-felsökning — sätt breakpoints i VS Code och felsök utan extra konfiguration. IDE:n stannar automatiskt vid runtime-undantag och visar exakt vilken rad som orsakade felet
  • Element Inspector — peka på en komponent i förhandsvisningen och hoppa direkt till källkoden. Fantastiskt för att navigera i okända kodbaser
  • Nätverksinspektör — inspektera nätverksaktivitet direkt i editorn
  • Re-render-markering — se vilka komponenter som renderas om för ofta, direkt i förhandsvisningen
  • Router-integration — listar alla Expo Router-rutter och låter dig navigera till dem snabbt
  • Inspelning och instant replay — missade du en bugg? Spola tillbaka och se vad som hände
  • Tredjepartsverktyg — inbyggt stöd för React Query DevTools och Redux DevTools

Komma igång med Radon IDE

Installationen går snabbt:

  1. Öppna VS Code eller Cursor
  2. Gå till Extensions (Cmd+Shift+X)
  3. Sök efter "Radon IDE" från Software Mansion
  4. Installera och starta om editorn
  5. Öppna ditt React Native-projekt — Radon IDE identifierar automatiskt att det är ett Expo/React Native-projekt

Radon IDE erbjuder en 30 dagars gratis provperiod, vilket ger gott om tid att testa om det passar ditt arbetsflöde.

Praktiskt exempel: felsök en krasch

// ProfileScreen.tsx — Radon IDE stannar automatiskt här vid krasch
export function ProfileScreen() {
  const { data: user } = useQuery({
    queryKey: ["user"],
    queryFn: fetchCurrentUser,
  });

  // Radon IDE markerar denna rad om user är undefined
  const fullName = user.firstName + " " + user.lastName;

  return (
    <View>
      <Text>{fullName}</Text>
    </View>
  );
}

Med Radon IDE ser du inte bara felet i konsolen — du ser det visuellt markerat direkt i din kod, med hela stacktracen och möjlighet att inspektera variabler. Ingen mer alt-tab till terminalen för att läsa kryptiska felmeddelanden.

Nativa felsökningsverktyg: Xcode och Android Studio

React Native DevTools fokuserar på JavaScript-lagret, men ibland behöver du gå djupare. När du jobbar med nativa moduler eller felsöker plattformsspecifika problem är Xcode och Android Studio fortfarande oumbärliga.

Xcode (iOS)

  • View Hierarchy Inspector — gå till Debug → View Debugging → Capture View Hierarchy för att se en 3D-vy av alla nativa vyer
  • Instruments — profilera CPU, minne, nätverksaktivitet och batterianvändning
  • Console-loggar — se nativa loggar som inte syns i JavaScript-konsolen

Android Studio (Android)

  • Layout Inspector — en interaktiv vy som visar nativa vyer i en exploderbar 3D-vy, liknande Xcodes View Hierarchy
  • Android Profiler — övervaka CPU, minne, nätverk och energianvändning i realtid
  • Logcat — filtrera och sök i systemloggar för att hitta nativa kraschrapporter och varningar

Anslut till en körande app genom Debug → Attach to Process i respektive IDE. Välj din apps process i listan — det tar bara några sekunder.

Bästa praxis för felsökning i React Native 2026

Oavsett vilka verktyg du väljer finns det några beprövade strategier som gör felsökningen smidigare. Här är mina topp fem:

  1. Inaktivera felsökningsverktyg i produktion — använd __DEV__-flaggan för att villkorligt ladda Reactotron och andra dev-verktyg. Lämna aldrig aktiv felsökningskod i produktionsbygget. (Det låter självklart, men det händer oftare än man tror.)
  2. Standardisera verktyg inom teamet — när alla använder samma verktyg och konfiguration blir det enklare att dela tips, reproducera buggar och hjälpa varandra.
  3. Profilera regelbundet — vänta inte tills det finns synliga prestandaproblem. Profileringsdata från Performance-panelen bör granskas löpande, inte bara när något är uppenbart trasigt.
  4. Kombinera JavaScript- och nativ felsökning — många buggar korsar gränsen mellan JavaScript och det nativa lagret. Använd DevTools för JS och Xcode/Android Studio för nativa problem.
  5. Använd testID konsekvent — attributet testID hjälper inte bara vid testning utan gör det också enklare att identifiera komponenter i Element Inspector och vid felsökning av layoutproblem.

Jämförelsetabell: vilket verktyg passar dig?

Verktyg Bäst för Kräver konfiguration Kostnad
React Native DevTools Generell JS-felsökning, breakpoints, nätverk, prestanda Nej (inbyggt) Gratis
Reactotron Tillståndsinspektion (Redux/Zustand), AsyncStorage/MMKV, API-övervakning Ja (npm-paket + konfiguration) Gratis (öppen källkod)
Radon IDE Editor-integrerat arbetsflöde, Element Inspector, re-render-markering Ja (VS Code-tillägg) Betald (30 dagars provperiod)
Xcode / Android Studio Nativ felsökning, vyhierarki, plattformsprofilering Nej (plattformsverktyg) Gratis

Rekommenderat arbetsflöde

Det finns inget enskilt verktyg som löser alla felsökningsbehov. Det vore fint, men så funkar det inte. Här är ett arbetsflöde som jag har sett fungera väl för de flesta React Native-projekt:

  1. Steg 1: React Native DevTools — börja alltid här. Console för snabb logginspektion, Sources för breakpoints vid specifika problem, Network för API-felsökning.
  2. Steg 2: Reactotron — använd för att övervaka tillståndsändringar, inspektera lokal lagring och spåra nätverksanrop utan att aktivera debug-läge.
  3. Steg 3: Radon IDE — om du vill minimera kontextbyten och ha allt i editorn. Särskilt användbart vid komponentfelsökning med Element Inspector.
  4. Steg 4: Nativa verktyg — när problemet ligger i det nativa lagret, gå till Xcode eller Android Studio för djupare inspektion.

Vanliga frågor (FAQ)

Kan jag fortfarande använda Flipper med React Native 2026?

Tekniskt sett ja, men det rekommenderas inte. Flipper v0.239.0 var den sista versionen med React Native-stöd, och de senaste React DevTools- och Hermes-pluginen fungerar inte längre. Kort sagt: migrera till React Native DevTools.

Behöver jag Hermes för att använda React Native DevTools?

Ja. React Native DevTools kräver Hermes som JavaScript-motor. Från och med Expo SDK 55 och React Native 0.83 är Hermes standard i alla nya projekt, så de allra flesta appar uppfyller redan det kravet. Om du av någon anledning inte använder Hermes kan Reactotron vara ett bra alternativ för grundläggande felsökning.

Vilken är den bästa felsökaren för Redux-appar?

Reactotron med reactotron-redux ger den bästa upplevelsen för Redux-felsökning i React Native, enligt min erfarenhet. Du kan övervaka alla actions i realtid, ta state-snapshots, dispatcha actions manuellt och spåra exekveringstider. Använder du Radon IDE har även den inbyggt stöd för Redux DevTools.

Är Radon IDE värt kostnaden?

Det beror helt på ditt arbetsflöde. Radon IDE:s stora fördel är att det eliminerar kontextbyten mellan editor, simulator och felsökningsfönster. Element Inspector, re-render-markering och instant replay sparar genuint tid. Den 30 dagar långa provperioden ger dig tillräckligt med tid att avgöra om produktivitetsvinsten motiverar priset.

Hur felsöker jag prestandaproblem som janky-animationer?

Börja med Performance-panelen i React Native DevTools för att identifiera om flaskhalsen ligger i JavaScript-tråden eller UI-tråden. React DevTools Profiler visar vilka komponenter som renderas om och hur lång tid varje render tar. För animationsspecifika problem kan Radon IDE:s re-render-markering snabbt visa vilka komponenter som uppdateras i onödan. Kombinera sedan med nativa profileringsverktyg (Instruments i Xcode, Android Profiler) för en komplett bild.

Om Författaren Editorial Team

Our team of expert writers and editors.