Ein kompakter Überblick über die wichtigsten Debugging-Werkzeuge, bevor wir in konkrete Komponenten und Themen einsteigen – Sie werden diese Techniken bei praktisch jedem Thema dieser Referenz gebrauchen können.

1. Beschreibung

React Native bietet mehrere Ebenen zum Aufspüren von Fehlern: einfaches Log-Ausgeben, das Entwicklermenü direkt in der App, echtes Breakpoint-Debugging im Editor, und einen Performance-Monitor für Ruckler.

2. Kurzes Beispiel

function ProduktKarte({ produkt }) {
  console.log('Rendere Produkt:', produkt.name);

  return <Text>{produkt.name}</Text>;
}

console.log() funktioniert identisch zum Browser – die Ausgabe erscheint im Terminal, in dem npx expo start läuft.

Das Entwicklermenü

Schütteln Sie das Gerät ("Shake Gesture") oder drücken Sie im Simulator Cmd+D (iOS) bzw. Cmd+M/Ctrl+M (Android) – das Entwicklermenü bietet "Reload", "Open JS Debugger" und "Toggle Performance Monitor".

Breakpoints im Editor

• VS Code: Erweiterung "React Native Tools" installieren, im Entwicklermenü "Open JS Debugger" wählen.
• WebStorm/PhpStorm: Eigene React-Native-Run-Konfiguration anlegen (Run > Edit Configurations > + > React Native), mit dem Debug-Button statt Run starten.

Häufige Fehlermeldungen