React Native -debuggaus 2026: Opas DevToolsiin, Reactotroniin ja Radon IDE:hen

Johdanto: debuggauksen uusi aikakausi React Nativessa

React Native -sovellusten debuggaus on muuttunut ihan merkittävästi viimeisten parin vuoden aikana. Flipper, joka oli pitkään React Nativen virallinen debuggaustyökalu, poistettiin oletustyökalusta React Native 0.73:ssa — ja rehellisesti sanottuna, aika moni kehittäjä huokaisi helpotuksesta. Flipperin transitiiviset riippuvuudet hidastivat build-aikoja ja aiheuttivat yhteensopivuusongelmia, jotka jäivät usein ratkaisematta. Itse muistan erään projektin, jossa Flipperin päivitys rikkoi Android-buildin kokonaan puoleksi päiväksi.

Vuonna 2026 tilanne näyttää kuitenkin paremmalta kuin koskaan. React Native DevTools on kypsyttyään vakaa ja kattava, Reactotron tarjoaa tilanhallintaan keskittyvän debuggauskokemuksen, ja Radon IDE yhdistää kaiken suoraan VSCode-editoriin. Käydään jokainen työkalu perusteellisesti läpi — käytännön esimerkkien kera.

React Native DevTools: uusi oletustyökalu

React Native DevTools esiteltiin React Universe Conf 2024 -tapahtumassa, ja React Native 0.76:sta alkaen siitä tuli virallinen oletustyökalu. Se korvaa Flipperin, vanhan Remote Debuggerin ja Hermes-debuggerin. Jos sinulla on web-kehitystaustaa, DevToolsin käyttöliittymä tuntuu heti tutulta — se perustuu Chrome DevTools -käyttöliittymään, joten oppimiskäyrä on käytännössä olematon.

DevToolsin käynnistäminen

DevToolsin voi avata kahdella tavalla:

• Dev Menu -valikosta: Ravista laitetta (tai paina Cmd+D iOS-simulaattorissa / Ctrl+M Android-emulaattorissa) ja valitse "Open DevTools"
• CLI:stä: Paina Metro-terminaalissa j-näppäintä

Jälkimmäinen on kätevämpi, kunhan muistaa sen.

React Native 0.83:sta alkaen DevTools tarjoaa myös erillisen työpöytäsovelluksen, joka ei enää vaadi Chrome- tai Edge-selainta. Sovellus käynnistyy nopeammin ja tukee macOS:n ikkunahallintaa, automaattista esiin nousemista breakpointeissa ja ikkunajärjestelyn tallennusta. Tämä on pieni mutta mukava parannus arjen työskentelyyn.

Console-paneeli

Console-paneeli on ensimmäinen asia, jonka näet DevToolsin avatessasi. Se näyttää kaikki sovelluksesi console.log-, console.warn- ja console.error-viestit reaaliajassa. Voit suodattaa viestejä tyypin mukaan ja suorittaa JavaScript-komentoja suoraan konsolissa — eli siis testata pieniä koodinpätkiä lennosta.

// Hyödyllisiä console-metodeja debuggaukseen
console.log('Käyttäjätiedot:', JSON.stringify(user, null, 2));
console.warn('Vanhentunutta API:ta käytetään');
console.error('Verkkovirhe:', error.message);

// console.table on erityisen hyödyllinen taulukkomuotoiselle datalle
console.table([
  { nimi: 'React Native', versio: '0.83' },
  { nimi: 'Expo SDK', versio: '55' },
  { nimi: 'React', versio: '19.2' },
]);

Breakpointit ja Sources-paneeli

Sources-paneelissa voit asettaa breakpointeja klikkaamalla rivinumeroa tai lisäämällä debugger-lausekkeen koodiisi. Kun breakpoint osuu, sovelluksen suoritus pysähtyy ja voit tarkastella muuttujien arvoja, kutsupinoa (call stack) ja scope-tietoja oikeasta sivupaneelista.

// Breakpoint-esimerkkejä
async function fetchUserData(userId: string) {
  try {
    const response = await fetch(`https://api.example.com/users/${userId}`);
    debugger; // Suoritus pysähtyy tähän — tarkista response
    const data = await response.json();
    return data;
  } catch (error) {
    debugger; // Pysähtyy virheen sattuessa
    console.error('Haun virhe:', error);
    throw error;
  }
}

DevTools tukee myös ehdollisia breakpointeja (Conditional Breakpoints), joissa suoritus pysähtyy vain kun tietty ehto täyttyy. Lisäksi käytössä ovat logpointit, jotka tulostavat viestin konsoliin pysäyttämättä suoritusta. Näitä käytän itse melkein enemmän kuin tavallisia breakpointeja — ne eivät häiritse sovelluksen normaalia toimintaa.

Network-paneeli (React Native 0.83+)

React Native 0.83 toi mukanaan täysin uuden Network-paneelin. Tämä oli monen kehittäjän toivelistan kärjessä. Se tallentaa automaattisesti kaikki verkkopyynnöt kun DevTools on auki. Tuetut rajapinnat ovat fetch(), XMLHttpRequest ja <Image>-komponentti.

Jokainen tallennettu pyyntö sisältää:

• Ajoitustiedot: Kuinka kauan pyyntö kesti
• Otsikkotiedot: Lähetetyt ja vastaanotetut headerit
• Vastauksen esikatselu: JSON-, teksti- tai kuvavastaukset
• Initiator-välilehti: Näyttää tarkalleen, missä kohtaa JavaScript-koodiasi verkkopyyntö tehtiin

// Verkkopyyntöjen debuggaus DevToolsin Network-paneelissa
// Kaikki nämä tallentuvat automaattisesti:

// 1. Fetch API
const response = await fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${token}`,
  },
  body: JSON.stringify({ query: 'react native' }),
});

// 2. XMLHttpRequest (kirjastot kuten Axios käyttävät tätä)
import axios from 'axios';
const { data } = await axios.get('https://api.example.com/items');

// 3. Image-komponentit
<Image source={{ uri: 'https://example.com/kuva.png' }} />

Performance-paneeli (React Native 0.83+)

Toinen iso 0.83-uudistus on Performance-paneeli, joka tuo selainkehittäjille tutun suorituskykyprofiiloinnin React Nativeen. Voit tallentaa suorituskykyistuntoja, jotka sisältävät CPU-aktiviteetin, React Performance -raidat, verkkotapahtumat ja mukautetut User Timing -merkinnät — kaikki yhdellä aikajanalla.

Performance-paneelin avulla voit:

• Thread-osiossa seurata JS-säikeen aktiviteettia ja nähdä funktioiden tarkat suoritusajat
• Scheduler-raidoissa ymmärtää, miten React priorisoi ja suorittaa päivityksiä
• Components-näkymässä tunnistaa kalliit renderöinnit ja efektit

Omasta kokemuksesta sanoisin, että Components-näkymä on näistä hyödyllisin arjessa. Se paljastaa nopeasti ne komponentit, jotka renderöityvät turhaan.

React Components -paneeli

Components-paneeli näyttää renderöidyn React-komponenttipuun. Voit valita minkä tahansa komponentin ja tarkastella sen propseja ja tilaa — ja jopa muokata niitä ajon aikana. React Compilerilla optimoidut komponentit näkyvät "Memo ✨" -merkinnällä, mikä helpottaa optimointien todentamista.

Memory-paneeli

Memory-paneelissa voit ottaa heap-tilannevedoksia ja seurata JavaScript-koodisi muistinkäyttöä ajan myötä. Tämä on erityisen hyödyllistä muistivuotojen jahtaamisessa. Voit suodattaa tiettyjä objekteja ja ottaa allokaatio-aikajanan raportin — eli periaatteessa nähdä, mitkä osat koodistasi varaavat eniten muistia ja milloin.

Reactotron: tilanhallintaan keskittyvä debuggaus

Reactotron on Infinite Redin kehittämä avoimen lähdekoodin työpöytäsovellus React- ja React Native -sovellusten debuggaukseen. Se on erityisen vahva tilanhallinnan tarkastelussa — jos käytät Reduxia, MobX-State-Treeta tai muita tilanhallintakirjastoja, Reactotron on rehellisesti sanottuna korvaamaton.

Asennus ja konfigurointi

# Asenna Reactotron-riippuvuudet
npm install reactotron-react-native --save-dev

# Redux-integraatiota varten
npm install reactotron-redux --save-dev

# AsyncStorage/MMKV-integraatiota varten
npm install reactotron-apisauce --save-dev

Luo projektin juureen ReactotronConfig.ts-tiedosto:

// ReactotronConfig.ts
import Reactotron from 'reactotron-react-native';
import { reactotronRedux } from 'reactotron-redux';
import AsyncStorage from '@react-native-async-storage/async-storage';

const reactotron = Reactotron
  .setAsyncStorageHandler(AsyncStorage)
  .configure({
    name: 'Oma React Native -sovellus',
    host: 'localhost', // Vaihda laitteen IP oikealla laitteella
  })
  .useReactNative({
    asyncStorage: true,    // AsyncStoragen seuranta
    networking: true,       // Verkkopyyntöjen seuranta
    editor: true,           // Avaa tiedostoja editorissa
    errors: true,           // Virheiden seuranta
    overlay: true,          // Kuvan overlay -ominaisuus
  })
  .use(reactotronRedux())   // Redux-integraatio
  .connect();

// Korvaa console.tron debuggaustarkoituksiin
declare global {
  interface Console {
    tron: typeof Reactotron;
  }
}
console.tron = reactotron;

export default reactotron;

Tuo konfiguraatio sovelluksesi käynnistyspisteeseen:

// index.js tai App.tsx
if (__DEV__) {
  require('./ReactotronConfig');
}

Huomaa __DEV__-tarkistus — tämä varmistaa, ettei Reactotron päädy tuotantobuildiin.

Redux-tilan tarkkailu

Reactotronin suurin vahvuus on ehdottomasti Redux-integraatio. Se näyttää reaaliajassa kaikki lähetetyt actionit, niiden payloadit ja tilan muutokset — eikä se vaadi debug-tilaa, joka hidastaisi sovellusta. Tämä on iso juttu verrattuna vanhaan Remote Debugger -lähestymistapaan.

// Redux-storen konfigurointi Reactotronin kanssa
import { configureStore } from '@reduxjs/toolkit';
import Reactotron from './ReactotronConfig';
import rootReducer from './reducers';

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

export default store;

Kun konfiguraatio on valmis, näet Reactotron-työpöytäsovelluksessa:

• Actionit ja payloadit: Jokainen Redux-action ja sen data
• Tilan muutokset: Diff-näkymä edellisen ja nykyisen tilan välillä
• Tilan tilannekuva: Voit tarkastella koko Redux-tilaa milloin tahansa
• Manuaalinen dispatch: Voit lähettää actioneja suoraan Reactotronin käyttöliittymästä — yllättävän kätevää edge-caseja testatessa

AsyncStorage- ja MMKV-tarkastelu

Reactotron voi seurata myös paikallista tallennustilaa. Näet mitä dataa sovelluksesi tallentaa AsyncStorageen tai MMKV:hen, ja voit muokata arvoja lennosta. Tämä on erittäin hyödyllistä kun testaat erilaisia sovelluksen tiloja — esimerkiksi onboarding-flow'n uudelleentestaus onnistuu yhdellä klikkauksella.

Radon IDE: kaikki yhdessä paikassa

Radon IDE on Software Mansionin kehittämä VSCode- ja Cursor-laajennus, joka muuttaa koodieditorisi täysiveroiseksi React Native -kehitysympäristöksi. Se on kaupallinen työkalu, mutta tarjoaa ilmaisen kokeilujakson. Radon syntyi tarpeesta ratkaista React Nativen pirstaloitunut debuggausekosysteemi — yksi työkalu kaikelle.

Ja pitää myöntää, se onnistuu tässä aika hyvin.

Keskeiset debuggausominaisuudet

Nollakonfiguraatio-breakpointit: Radon IDE ei vaadi mitään konfiguraatiota breakpointien käyttöön. Avaat React Native -projektin, asetat breakpointin — ja se toimii. Verrattuna DevToolsin tai erillisten debuggereiden konfigurointiin, tämä säästää yllättävän paljon aikaa etenkin uusissa projekteissa.

Automaattinen ajonaikaisten virheiden käsittely: Kun sovelluksessa tapahtuu ajonaikainen virhe, Radon pysäyttää automaattisesti suorituksen ja osoittaa tarkalleen virheellisen koodirivin. Ei tarvitse etsiä pinojäljestä — vika on heti näkyvissä.

// Radon IDE tunnistaa ja pysäyttää automaattisesti virheissä
function UserProfile({ userId }: { userId: string }) {
  const [user, setUser] = useState<User | null>(null);

  useEffect(() => {
    async function loadUser() {
      const response = await fetch(
        `https://api.example.com/users/${userId}`
      );
      const data = await response.json();
      // Jos data.name on undefined, Radon pysäyttää tässä
      setUser({
        name: data.name.toUpperCase(), // TypeError mahdollinen
        email: data.email,
      });
    }
    loadUser();
  }, [userId]);

  return (
    <View>
      <Text>{user?.name}</Text>
    </View>
  );
}

Element Inspector

Radon IDE:n Element Inspector mahdollistaa komponenttien tutkimisen osoittamalla laitteen esikatselua. Klikkaa mitä tahansa elementtiä ja Radon hyppää suoraan koodiin, jossa komponentti on määritelty. Tämä on korvaamatonta etenkin uuteen koodikantaan tutustuttaessa (tai kun palaat omaan koodiisi puolen vuoden tauon jälkeen).

Sisäänrakennettu Network Inspector

Verkkoliikennettä voi tarkastella suoraan VSCode-editorissa ilman erillisiä ikkunoita tai selaimia. Radon näyttää kaikki verkkopyynnöt, niiden tilakoodit, kestot ja vastaukset. Ei ehkä yhtä kattava kuin DevToolsin Network-paneeli, mutta riittää useimpiin tilanteisiin.

Uudelleenrenderöinnin korostus

Yksi Radonin uniikkeja ominaisuuksia on uudelleenrenderöinnin korostus (re-render highlighting). Se näyttää visuaalisesti, mitkä komponentit renderöityvät liian usein — jolloin voit optimoida ne ennen kuin ne aiheuttavat käyttäjälle näkyviä suorituskykyongelmia. Olen itse löytänyt tämän avulla useamman kerran turhan renderöinnin, jota en olisi muuten huomannut.

Simulaattorit suoraan editorissa

Radon IDE ajaa iOS-simulaattorin ja Android-emulaattorin suoraan VSCode/Cursor-ikkunassa. Ei tarvitse vaihtaa ikkunoiden välillä — koodaat, debuggaat ja testaat samassa paikassa. Jos olet tottunut vaihtamaan simulaattorin, editorin ja DevToolsin välillä, tämä tuntuu vähän siltä kuin saisi ylimääräisen näytön.

Yleisimmät React Native -virheet ja niiden ratkaisut

Debuggaustyökalujen tuntemisen lisäksi on tärkeää tietää yleisimmät virheet ja niiden ratkaisut. Nämä ovat vuonna 2026 ne ongelmat, joihin törmäät todennäköisimmin.

"EMFILE: Too Many Open Files"

Tämä virhe tarkoittaa, että järjestelmäsi yrittää seurata liian montaa tiedostoa samanaikaisesti. Se on yleinen suurissa React Native -projekteissa, erityisesti macOS:ssä. Ärsyttävä virhe, mutta onneksi helppo korjata.

# Ratkaisu: Sammuta Watchman ja tyhjennä välimuisti
watchman shutdown-server
npx react-native start --reset-cache

# macOS: Nosta tiedostorajaa tarvittaessa
sudo sysctl -w kern.maxfiles=524288
sudo sysctl -w kern.maxfilesperproc=524288

"Unable to Load Script" (JavaScript-bundle puuttuu)

Tämä virhe ilmenee, kun sovelluksen JavaScript-bundle ei ole saatavilla tai sitä ei ole paketoitu oikein. Tyypillinen tilanne: ajat sovelluksen fyysisellä laitteella ja Metro ei ole tavoitettavissa.

# Android: Varmista assets-kansion olemassaolo ja luo bundle
mkdir -p android/app/src/main/assets

npx react-native bundle \
  --platform android \
  --dev false \
  --entry-file index.js \
  --bundle-output android/app/src/main/assets/index.android.bundle \
  --assets-dest android/app/src/main/res

"Module AppRegistry is Not a Registered Callable Module"

Tämä johtuu yleensä virheellisestä sovelluksen nimestä app.json-tiedostossa tai yksinkertaisesti välimuistiongelmasta. Ensimmäinen askel on aina tyhjentää välimuisti:

# Tyhjennä kaikki välimuistit ja käynnistä uudelleen
npx react-native start --reset-cache
# Tai Expo-projektissa:
npx expo start --clear

Gradle-build epäonnistuu Androidilla

Gradle-ongelmat ovat yksi yleisimmistä Android-puolen virheistä. Yleensä syynä on yhteensopimaton Gradle-versio tai SDK-konfiguraatio. Tämä on sellainen virhe, joka voi viedä tunteja jos ei tiedä mistä aloittaa — joten aloita aina puhdistamalla:

# Puhdista Gradle-välimuisti ja rakenna uudelleen
cd android && ./gradlew clean && cd ..
npx react-native run-android

# Jos ongelma jatkuu, poista build-kansiot
rm -rf android/app/build
rm -rf android/.gradle

"Duplicate Resources" APK-buildin yhteydessä

Tämä virhe esiintyy luotaessa release-APK:ta Android Studiossa, kun projektissa on päällekkäisiä resursseja. Ratkaisu on suoraviivainen:

# Poista generoidut resurssit ja puhdista
rm -rf android/app/src/main/res/drawable-*
rm -rf android/app/src/main/res/raw
cd android && ./gradlew clean && cd ..

Tuotantosovelluksen virheseuranta

Kehitystyökalut ovat välttämättömiä kehityksen aikana, mutta tuotannossa tarvitset eri lähestymistavan. Tuotantosovelluksen virheistä ei saa console.log-viestejä — tarvitset erillisen virheseurantapalvelun. Tämä on sellainen asia, joka kannattaa laittaa kuntoon heti projektin alussa, ei vasta kun ensimmäinen kriittinen bugi ilmenee.

Sentry React Native -integraatio

Sentry on yksi suosituimmista virheseurantapalveluista React Native -sovelluksille. Se kaappaa automaattisesti JavaScript-virheet, natiivit kaatumiset ja suorituskykytiedot.

# Asenna Sentry
npx expo install @sentry/react-native

# Tai bare React Native -projektissa:
npm install @sentry/react-native

// App.tsx — Sentryn konfigurointi
import * as Sentry from '@sentry/react-native';

Sentry.init({
  dsn: 'https://[email protected]/projekti-id',
  tracesSampleRate: 0.2, // 20% suorituskykyseurannasta
  enableAutoSessionTracking: true,
  attachScreenshot: true,
  environment: __DEV__ ? 'development' : 'production',
});

// Kääri juurikomponentti Sentryn wrapperiin
export default Sentry.wrap(function App() {
  return (
    <NavigationContainer>
      <RootNavigator />
    </NavigationContainer>
  );
});

Sentryn avulla näet tuotannossa tapahtuvia virheitä reaaliajassa, mukaan lukien:

• Pinojäljet alkuperäisen lähdekoodin rivinumeroilla (source maps -tuella)
• Käyttäjän polku: Mitä käyttäjä teki ennen virhettä
• Laitetiedot: Käyttöjärjestelmä, laitemalli, muistin käyttö
• Suorituskykyseuranta: Hitaat näytönvaihdot, pitkät API-kutsut

Debuggausstrategia: oikea työkalu oikeaan tarkoitukseen

Kaikkia työkaluja ei todellakaan tarvita jokaiseen tilanteeseen. Tässä on selkeä ohjeistus, milloin käyttää mitäkin:

Tilanne	Suositeltu työkalu	Miksi
JavaScript-virhe tai kaatuminen	React Native DevTools	Breakpointit, pinojälki, muuttujien tarkastelu
Redux/tilanhallinnan debuggaus	Reactotron	Actionit, tilan muutokset, manuaalinen dispatch
Verkkopyyntöjen tutkiminen	DevTools Network / Radon IDE	Headerit, vastaukset, ajoitukset
Suorituskykyongelma	DevTools Performance	CPU-profilointi, renderöintiajat, bottleneckit
Uudelleenrenderöinnit	Radon IDE	Visuaalinen re-render-korostus
Muistivuodot	DevTools Memory	Heap-tilannevedokset, allokaatioaikajana
Tuotantovirheet	Sentry	Automaattinen virheseuranta, source maps
Natiivi UI-hierarkia	Xcode / Android Studio	Natiivitason näkymien tarkastelu

Parhaat käytännöt React Native -debuggaukseen 2026

1. Vakiinnuta työkalut tiimissä: Valitse 2–3 työkalua ja varmista, että kaikki käyttävät samoja. Tämä nopeuttaa ongelmanratkaisua ja helpottaa tiedon jakamista tiimin sisällä.
2. Profiloi säännöllisesti: Älä odota suorituskykyongelmaa — profiloi sovellustasi säännöllisesti DevToolsin Performance-paneelilla. Ongelmat on paljon helpompi korjata kun ne ovat pieniä.
3. Poista debug-työkalut tuotannosta: Käytä __DEV__-muuttujaa ehdollisten importtien kanssa, jotta debug-koodi ei päädy tuotantoon. Tämä unohtuu helposti, mutta sillä on oikeasti merkitystä sovelluksen koon ja suorituskyvyn kannalta.
4. Hyödynnä source maps: Varmista, että tuotanto-buildeissa on source maps käytössä, jotta virheraportit osoittavat alkuperäistä lähdekoodia eikä minifioitua sotkua.
5. LogBox ja virherajat: Konfiguroi React Nativen sisäänrakennettu LogBox ja käytä Error Boundary -komponentteja virheiden hallitsemiseen.

// Error Boundary -esimerkki React Nativessa
import React, { Component, ErrorInfo, ReactNode } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import * as Sentry from '@sentry/react-native';

interface Props {
  children: ReactNode;
  fallback?: ReactNode;
}

interface State {
  hasError: boolean;
  error: Error | null;
}

class ErrorBoundary extends Component<Props, State> {
  state: State = { hasError: false, error: null };

  static getDerivedStateFromError(error: Error): State {
    return { hasError: true, error };
  }

  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    // Lähetä virhe Sentryyn tuotannossa
    if (!__DEV__) {
      Sentry.captureException(error, {
        extra: { componentStack: errorInfo.componentStack },
      });
    }
  }

  resetError = () => {
    this.setState({ hasError: false, error: null });
  };

  render() {
    if (this.state.hasError) {
      return (
        this.props.fallback || (
          <View style={styles.container}>
            <Text style={styles.title}>Jokin meni pieleen</Text>
            <Text style={styles.message}>
              {this.state.error?.message}
            </Text>
            <TouchableOpacity
              style={styles.button}
              onPress={this.resetError}
            >
              <Text style={styles.buttonText}>Yritä uudelleen</Text>
            </TouchableOpacity>
          </View>
        )
      );
    }
    return this.props.children;
  }
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20 },
  title: { fontSize: 20, fontWeight: 'bold', marginBottom: 10 },
  message: { fontSize: 14, color: '#666', textAlign: 'center', marginBottom: 20 },
  button: { backgroundColor: '#007AFF', paddingHorizontal: 20, paddingVertical: 10, borderRadius: 8 },
  buttonText: { color: '#fff', fontSize: 16, fontWeight: '600' },
});

export default ErrorBoundary;

Usein kysytyt kysymykset

Korvaako React Native DevTools Flipperin kokonaan?

React Native DevTools korvaa Flipperin virallisena oletustyökaluna, mutta se ei kata kaikkia Flipperin ominaisuuksia. DevTools keskittyy JavaScript-debuggaukseen, kun taas Flipper tarjosi myös natiivitason tarkastelu- ja plugin-työkaluja. Jos tarvitset natiivitason debuggausta, käytä Xcodea tai Android Studiota DevToolsin rinnalla. Flipperin voi myös edelleen asentaa manuaalisesti, jos sille on tarvetta.

Mikä on paras debuggaustyökalu aloittelijalle?

React Native DevTools on ehdottomasti paras lähtökohta. Se on sisäänrakennettu eikä vaadi erillistä asennusta. Avaat sen Dev Menusta tai painat j-näppäintä — ja pääset heti tutkimaan konsoliviestejä, asettamaan breakpointeja ja tarkastelemaan komponenttipuuta. Kun taitosi kehittyvät ja projektisi kasvaa, lisää Reactotron tilanhallinnan debuggaukseen.

Miten debuggaan suorituskykyongelmia React Nativessa?

Käytä React Native DevToolsin Performance-paneelia (vaatii version 0.83+). Aloita tallentamalla suorituskykyistunto, toista ongelma sovelluksessa ja pysäytä tallennus. Analysoi sitten aikajanaa: Thread-osio näyttää JavaScript-funktioiden suoritusajat, Components-näkymä paljastaa kalliit renderöinnit, ja Scheduler-raidat kertovat Reactin priorisointilogiikasta.

Voinko käyttää useampaa debuggaustyökalua samanaikaisesti?

Kyllä, ja se on usein suositeltavaakin. React Native DevTools ja Reactotron toimivat hyvin rinnakkain — DevTools hoitaa yleiset breakpointit ja verkkopyynnöt, kun Reactotron keskittyy tilanhallinnan seurantaan. Radon IDE puolestaan sisältää monet näistä ominaisuuksista yhdessä paketissa, joten se voi toimia vaihtoehtona erillisille työkaluille.

Miten seuraan virheitä tuotannossa julkaistussa React Native -sovelluksessa?

Tuotannossa et voi käyttää DevToolsia tai Reactotronia. Tarvitset erillisen virheseurantapalvelun kuten Sentryn, Bugsnag'in tai Datadogin. Sentry on suosituin vaihtoehto React Nativelle — se kaappaa automaattisesti JavaScript-virheet ja natiivit kaatumiset, ja source maps -tuella näet alkuperäisen lähdekoodin rivinumerot virheilmoituksissa.