React Native 如何进行调试？常用的调试工具有哪些？ - 面试题

React Native 调试方式概览

React Native 提供了多种调试方式，从简单的控制台输出到专业的性能分析工具，开发者可以根据问题类型选择合适的调试手段。

1. 控制台调试（Console Debugging）

最基础的调试方式，适用于快速验证。

javascript
// 基础日志
console.log('普通日志');
console.warn('警告信息');
console.error('错误信息');

// 格式化输出
console.table([{ name: '张三', age: 25 }, { name: '李四', age: 30 }]);
console.group('分组日志');
console.log('子日志1');
console.log('子日志2');
console.groupEnd();

查看方式：

Metro 终端直接输出
Chrome DevTools Console 面板
Flipper 日志查看器

2. Chrome DevTools 调试

最常用的 JS 调试方式，支持断点、单步执行等。

开启方式

shell
iOS: Cmd + D → Debug with Chrome
Android: Cmd + M / 摇一摇 → Debug with Chrome

调试功能

Sources：设置断点、单步调试
Console：查看日志、执行命令
Network：监控网络请求
Performance：分析性能
Memory：内存分析

注意事项

开启 Remote Debugging 后，JS 在 Chrome 中运行，不在设备上运行
某些原生功能在调试模式下可能表现不同
网络请求会被代理到 Chrome

3. React Native Debugger

专为 React Native 打造的独立调试工具，集成了 Redux DevTools。

安装与使用

bash
# macOS
brew install react-native-debugger

# 启动
open "rndebugger://set-debugger-loc?host=localhost&port=8081"

核心功能

集成 Chrome DevTools
Redux DevTools 支持
Apollo Client DevTools
网络请求拦截
AsyncStorage 查看器

4. Flipper（Meta 官方推荐）

现代化的移动应用调试平台，React Native 0.62+ 默认集成。

核心插件

插件	功能
Logs	查看应用日志
Network	监控 HTTP 请求
React DevTools	组件树查看、Props/State 检查
Hermes Debugger	Hermes 引擎调试
Databases	查看 SQLite/Realm 数据
Shared Preferences	查看应用偏好设置
Crash Reporter	崩溃日志收集

使用示例

javascript
// 添加 Flipper 网络插件支持
import { addEventListener } from '@react-native-community/netinfo';

// 在 Flipper 中查看网络请求
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data));

5. React DevTools

用于检查 React 组件树和性能分析。

独立安装

bash
npm install -g react-devtools
react-devtools

功能特性

查看组件树结构
检查 Props 和 State
识别不必要的重渲染
Profiler 性能分析

6. 原生调试

iOS 调试（Xcode）

shell
1. 用 Xcode 打开 ios/YourApp.xcworkspace
2. 选择设备和 Scheme
3. Cmd + R 运行
4. 使用 Xcode 调试器设置断点

Android 调试（Android Studio）

shell
1. 用 Android Studio 打开 android 目录
2. 连接设备或启动模拟器
3. 点击 Debug 按钮运行
4. 使用 Logcat 查看日志

7. 性能调试

Hermes 性能分析

javascript
// 启用 Hermes 采样分析器
const HermesInternal = require('hermes-engine');

// 开始采样
HermesInternal.enableSamplingProfiler();

// 停止并导出
HermesInternal.dumpSampledTraceToFile('/path/to/trace.json');

使用 Flipper Performance 插件

监控 FPS（帧率）
检测 UI 卡顿
分析渲染时间

8. 常用调试技巧

热重载与实时重载

shell
Cmd + D / 摇一摇 → Enable Hot Reloading

清除缓存

bash
# 清除 Metro 缓存
npx react-native start --reset-cache

# 清除 iOS 构建缓存
cd ios && rm -rf build && cd ..

# 清除 Android 构建缓存
cd android && ./gradlew clean && cd ..

网络调试

javascript
// 查看所有网络请求
GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest;

调试工具选择建议

场景	推荐工具
日常 JS 调试	Chrome DevTools / Flipper
Redux 状态调试	React Native Debugger
UI 问题排查	Flipper + React DevTools
性能优化	Flipper Performance + Hermes Profiler
原生问题	Xcode / Android Studio
网络调试	Flipper Network 插件

调试最佳实践

使用 TypeScript：编译时捕获类型错误
添加错误边界：防止应用崩溃
使用 Sentry/Firebase：线上错误监控
日志分级：开发/生产环境不同日志级别
定期性能测试：使用 Flipper 检测性能回归