⚡

移动端调试Skill mobile-debugging

React Native移动应用调试技能，提供React Native和Expo应用的完整调试解决方案。涵盖Metro打包器问题修复、原生模块错误排查、性能优化、内存泄漏检测、网络调试、崩溃分析等关键技术。包含iOS和Android双平台调试命令、工具使用指南和常见错误模式分析。

移动开发 0 次安装 0 次浏览 更新于 3/2/2026

name: mobile-debugging description: 调试React Native应用，包括Metro打包器问题、原生错误、性能问题和崩溃分析。在故障排除或调查问题时使用。 allowed-tools: Bash, Read, Grep

移动端调试

React Native和Expo应用程序的调试指南。

何时使用

  • 应用崩溃或卡死
  • Metro打包器错误
  • 原生模块问题
  • 性能问题
  • 构建失败
  • 网络请求调试

常见问题与修复

Metro打包器问题

# 清除所有缓存
npx expo start --clear
watchman watch-del-all
rm -rf node_modules && npm install

# 重置打包器缓存
rm -rf /tmp/metro-*
rm -rf /tmp/haste-*

原生模块错误

# iOS: 重置Pods
cd ios && pod deintegrate && pod install && cd ..

# Android: 清理构建
cd android && ./gradlew clean && cd ..

# Expo: 预构建清理
npx expo prebuild --clean

模拟器/仿真器问题

# iOS: 重置模拟器
xcrun simctl erase all

# Android: 擦除仿真器数据
adb devices  # 查找设备ID
adb -s DEVICE_ID emu kill

调试工具

React开发者工具

# 安装
npm install -g react-devtools

# 启动
react-devtools

# 在应用中：摇动设备 -> "远程JS调试"

Metro日志

# 查看详细日志
npx expo start --verbose

# iOS设备日志
npx react-native log-ios

# Android设备日志
npx react-native log-android
adb logcat

网络调试

// 启用网络检查器
import { Platform } from 'react-native';

if (__DEV__ && Platform.OS === 'ios') {
  require('react-native').NativeModules.DevSettings.setIsDebuggingRemotely(true);
}

// 或使用Flipper进行高级网络检查

性能调试

识别慢渲染

// 添加性能日志
import { useEffect, useRef } from 'react';

function useRenderTime(componentName: string) {
  const start = useRef(performance.now());

  useEffect(() => {
    const duration = performance.now() - start.current;
    if (duration > 16) {
      console.warn(`慢渲染: ${componentName} 耗时 ${duration.toFixed(2)}ms`);
    }
  });
}

// 在组件中使用
function MyComponent() {
  useRenderTime('MyComponent');
  return <View>...</View>;
}

内存泄漏

// 检查缺少的清理
useEffect(() => {
  const subscription = someObservable.subscribe();
  const timer = setInterval(() => {}, 1000);

  // 必须清理！
  return () => {
    subscription.unsubscribe();
    clearInterval(timer);
  };
}, []);

错误调查

JavaScript错误

# 在堆栈跟踪中查找错误
# 检查最近的文件更改
# 验证导入和依赖项
# 检查变量名中的拼写错误

原生错误

# iOS: 检查Xcode控制台
# Android: 检查Android Studio Logcat
# 查找Java/Swift异常
# 检查原生模块兼容性

构建错误

# 检查包版本
npx expo-doctor

# 验证node/npm版本
node --version
npm --version

# 检查冲突的依赖项
npm ls PACKAGE_NAME

调试命令

# 检查端口占用
lsof -ti:8081  # Metro打包器端口
lsof -ti:19000 # Expo开发者工具

# 终止端口进程
kill -9 $(lsof -ti:8081)

# 检查设备连接
# iOS
xcrun simctl list devices

# Android
adb devices

# 重启adb
adb kill-server
adb start-server

调试检查清单

调查问题时：

  1. 复现：能否一致地触发问题？
  2. 最近更改：问题出现前更改了什么？
  3. 错误信息：阅读完整错误，包括堆栈跟踪
  4. 依赖项：检查包是否兼容
  5. 平台：发生在iOS、Android还是两者？
  6. 环境：仅开发环境还是生产构建也出现？
  7. 日志：检查Metro、Xcode和Logcat获取详细信息

常见错误模式

  • “无法解析模块”：检查导入路径和文件是否存在
  • “不变性违规”：React错误，检查组件生命周期
  • “网络请求失败”：检查API URL和网络连接
  • “未定义不是对象”：访问属性前检查null/undefined
  • “超过最大调用堆栈大小”：无限循环或递归

资源