React NativeFlipper là tool debug cũ do Meta xây cho RN — desktop app có console, network inspector, layout inspector, plugin ecosystem (database, AsyncStorage). Deprecated từ RN 0.74+ vì:
- Khó maintain cross-platform (Java/Obj-C bridge).
- Chậm và crash thường xuyên trên Apple Silicon.
- Plugin ecosystem fragmented.
RN DevTools (default từ RN 0.76+):
- Web-based, mở qua browser từ Metro CLI (nhấn j trong terminal).
- Built trên Chrome DevTools Protocol — quen thuộc với web dev.
- Tính năng:
- Console: log JS, native warning, error stack với source map.
- Network: inspect fetch/axios request, response body, headers.
- React DevTools: component tree, props/state, profiler.
- Hermes Sources: breakpoint trong JS bundle, step-through debug.
- Memory: heap snapshot, allocation timeline.
- Performance: CPU profile, thread timeline.
- Tích hợp ngay với Hermes — không cần plugin riêng.
Cách dùng:
pnpm start # khởi Metro
# Trong terminal: nhấn j → mở RN DevTools trong Chrome/EdgeHoặc shake device → "Open DevTools".
Hạn chế so với Flipper:
- Không có database inspector (tự dùng MMKV viewer hoặc DB tool ngoài).
- Không có layout inspector visual giống Flipper (dùng React DevTools "Inspect Element" thay).
- Plugin ecosystem mới, ít hơn Flipper cũ.
Migrate khỏi Flipper: RN 0.76+ tự động không setup Flipper. Project cũ: xóa Flipper-* pod (iOS), xóa Flipper deps trong gradle.