Fehler gehören zum Programmieren dazu – wichtig ist, sie schnell zu finden. Dieses Kapitel zeigt die wichtigsten Debugging-Werkzeuge für React Native, sowohl in VS Code als auch in WebStorm/PhpStorm.

console.log() – der Klassiker

Genau wie im Browser funktioniert console.log() in React Native. Die Ausgabe erscheint im Terminal, in dem npx expo start läuft, UND im Entwicklermenü der App:

In unserer echten screens/ProductDetailScreen.js könnten Sie z. B. so einen Log-Aufruf einbauen, um den Ladevorgang zu beobachten:

function ProductDetailScreen({ route }) {
  const { productSku } = route.params;
  console.log('Öffne Produkt mit SKU:', productSku);
  // ...
}

Das Entwicklermenü öffnen

In der Expo Go App (oder Ihrer Entwicklungs-Build) öffnen Sie das Entwicklermenü durch Schütteln des Geräts ("Shake Gesture") oder, im Simulator/Emulator, per Tastenkombination: Cmd+D im iOS-Simulator, Cmd+M (Mac) bzw. Ctrl+M (Windows/Linux) im Android-Emulator. Dort finden Sie unter anderem "Reload", "Open JS Debugger" und "Toggle Performance Monitor".

Debugging in VS Code

1. Erweiterung "React Native Tools" installiert (siehe Kapitel 2)
2. Im Entwicklermenü der App "Open JS Debugger" wählen – öffnet automatisch ein Debug-Fenster in Chrome oder VS Code
3. Alternativ: In VS Code eine launch.json mit Typ reactnative anlegen und F5 drücken, um direkt mit Breakpoints in .js-Dateien zu starten
4. Breakpoints setzen Sie wie gewohnt per Klick links neben die Zeilennummer

Debugging in WebStorm/PhpStorm

1. Über Run > Edit Configurations > + > React Native eine neue Konfiguration anlegen
2. Diese Konfiguration mit dem Debug-Button (Käfer-Symbol) statt dem normalen Run-Button starten
3. Breakpoints per Klick links neben die Zeilennummer setzen – funktioniert identisch zum PHP-Debugging mit Xdebug, das Sie bereits aus der Magento-Arbeit kennen
4. Der "React Native Console"-Tab (siehe Kapitel 2) zeigt zusätzlich alle console.log()-Ausgaben direkt in der IDE, ohne ins Terminal wechseln zu müssen

Häufige Fehlermeldungen und ihre Bedeutung

Performance Monitor

Im Entwicklermenü aktiviert "Toggle Performance Monitor" eine kleine Einblendung mit der aktuellen Bildrate (FPS) – vergleichbar mit den Chrome-DevTools-"Rendering"-Performance-Overlays. Fällt die JS-Framerate während des Scrollens deutlich unter 60, ist das oft ein Hinweis auf zu viele gleichzeitig gerenderte Listenelemente (siehe FlatList, Kapitel 9) oder zu aufwändige Berechnungen direkt im Render-Pfad.