RN DevTools (default từ RN 0.76+, thay Flipper):
- Console log, Network inspector, React DevTools (component tree, profiler).
- Inspect Hermes heap snapshot.
- Mở qua: lắc device → "Open DevTools", hoặc terminal j.
- Tốt cho: JS-side bottleneck, component re-render counts, memory leak JS.
Systrace (Android) + Hermes Sampling Profiler:
- Trace JS execution timeline → biết function nào tốn time.
- Setup: adb shell setprop debug.systrace 1 rồi capture qua Android Studio.
- Hermes profiler: Hermes.connect() → record → save .cpuprofile → mở Chrome DevTools "Performance" tab.
- Tốt cho: tìm slow function trong render path, frame drop khi scroll.
Xcode Instruments (iOS):
- Tool: Time Profiler, Allocations, Leaks, Energy Log.
- Attach process → record → drill xuống xem CPU breakdown.
- Tốt cho: native-side issue (image decoding, layout pass, GPU), memory growth.
Android Studio Profiler:
- CPU (Java/Kotlin call stack), Memory (Java heap + Native heap), Energy.
- Tốt cho: tìm leak Java, GC pressure.
Bonus: react-native-performance library tự collect metrics (TTI, render time per screen) → ship lên backend monitor production.
Workflow chuẩn:
1. Repro issue trên device thật (không simulator).
2. RN DevTools trước — xem JS-side suspect.
3. Nếu JS không tìm được, sang Instruments/Studio Profiler cho native-side.
4. So sánh metric Hermes on vs off để đánh giá engine impact.