React Native DevTools (RN 0.76+) — thay Flipper ra sao?

Flipper 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/Edge

Hoặ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.

Flipper was Meta's old desktop debug tool for RN — console, network inspector, layout inspector, plugin ecosystem (database, AsyncStorage). Deprecated since RN 0.74+ because:
- Hard to maintain cross-platform (Java/Obj-C bridge).
- Slow and crash-prone on Apple Silicon.
- Fragmented plugin ecosystem.

RN DevTools (default from RN 0.76+):
- Web-based, opened from the Metro CLI (press j in the terminal).
- Built on the Chrome DevTools Protocol — familiar to web devs.
- Features:
- Console: JS logs, native warnings, error stacks with source maps.
- Network: inspect fetch/axios requests, response bodies, headers.
- React DevTools: component tree, props/state, profiler.
- Hermes Sources: breakpoints in the JS bundle, step-through debugging.
- Memory: heap snapshots, allocation timeline.
- Performance: CPU profile, thread timeline.
- Integrates with Hermes directly — no separate plugin needed.

Usage:

pnpm start  # boots Metro
# In the terminal press j → opens RN DevTools in Chrome/Edge

Or shake the device → "Open DevTools".

Limitations vs Flipper:
- No database inspector (use an MMKV viewer or external DB tool).
- No visual layout inspector like Flipper had (use React DevTools "Inspect Element" instead).
- Younger plugin ecosystem, smaller than Flipper's.

Migrating off Flipper: RN 0.76+ does not set up Flipper by default. For older projects: remove Flipper-* pods (iOS) and Flipper Gradle deps (Android).