Debugging Tools - Flipper & React DevTools
Before fixing bugs, you need the right tools to observe them. React Native has three main debugging surfaces: the in-app developer menu, React Native DevTools (built-in since RN 0.73), and Flipper for network and database inspection.
Developer Tools Overview
// ---- Shake device / Ctrl+D (iOS sim) / Ctrl+M (Android emu) ----
// Opens dev menu:
// - Reload
// - Open DevTools (React Native DevTools)
// - Toggle Performance Monitor
// - Toggle Inspector (tap any element to see its props/styles)
// ---- React Native DevTools (RN 0.73+) ----
// Run: npx react-native start → press 'j' in Metro terminal
// Or: in your app → shake → Open DevTools
//
// Features:
// - Console: filter by level, search
// - Components: inspect props/state of any component in real-time
// - Profiler: record renders, see flamegraph, identify slow components
// - Sources: breakpoints in JS code
// ---- __DEV__ flag ----
if (__DEV__) {
// Only runs in debug builds
console.log('Debug mode - extra logging enabled');
}
// ---- Flipper (for network & storage inspection) ----
// Install: flipper.io
// Android: auto-connected in debug builds
// iOS: needs flipper-react-native-native plugin (installed by default in RN CLI)
//
// Key Flipper plugins:
// - Network: see every HTTP request, response, headers, body
// - React DevTools (older version - prefer standalone)
// - Database: browse SQLite content
// - MMKV Visualizer: browse MMKV storage keys
// - Async Storage: browse AsyncStorage keys
// - Layout Inspector: visual component tree with box model
// - Hermes Debugger: profile JS execution
// ---- LogBox - styled console output ----
import { LogBox } from 'react-native';
// Silence known third-party warnings (use sparingly)
LogBox.ignoreLogs([
'Warning: componentWillReceiveProps', // outdated library
'Non-serializable values were found in the navigation state',
]);
// Or silence all warnings in dev (not recommended for production)
// LogBox.ignoreAllLogs(__DEV__);Tip
Tip
Practice Debugging Tools Flipper React DevTools in small, isolated examples before integrating into larger projects. Breaking concepts into small experiments builds genuine understanding faster than reading alone.
Using React DevTools, Hermes Chrome debugger, Flipper, and Android Logcat
Practice Task
Note
Practice Task - (1) Write a working example of Debugging Tools Flipper React DevTools from scratch without looking at notes. (2) Modify it to handle an edge case (empty input, null value, or error state). (3) Share your solution in the Priygop community for feedback.
Quick Quiz
Common Mistake
Warning
A common mistake with Debugging Tools Flipper React DevTools is skipping edge case testing - empty inputs, null values, and unexpected data types. Always validate boundary conditions to write robust, production-ready react native code.