mobile-debugging

# 移动端调试指南 > **停止使用 console.log() 调试！** > 移动应用有复杂的原生层。文本日志是不够的。 > **本文件教授有效的移动端调试策略。** --- ## ? 移动端调试思维 Web 调试： 移动端调试： ┌──────────────┐ ┌──────────────┐ │ 浏览器 │ │ JS 桥接 │ │ 开发者工具 │ │ 原生 UI │ │ 网络面板 │ │ GPU/内存 │ └──────────────┘ │ 线程 │ └──────────────┘ **关键差异：** 1. **原生层：** JS 代码运行正常但应用崩溃？通常是原生层（Java/Obj-C）的问题。 2. **部署：** 你不能简单地“刷新”。状态会丢失或卡住。 3. **网络：** SSL 证书锁定（SSL Pinning）、代理设置更困难。 4. **设备日志：** `adb logcat` 和 `Console.app` 是你的真相来源。 --- ## ? AI 调试反模式 | ❌ 默认行为 | ✅ 移动端正确做法 | |------------|-------------------| | “添加 console.logs” | 使用 Flipper / Reactotron | | “检查网络面板” | 使用 Charles Proxy / Proxyman | | “在模拟器上运行正常” | **在真机上测试** (硬件特定 Bug) | | “重新安装 node_modules” | **清理原生构建** (Gradle/Pod 缓存) | | 忽略原生日志 | 阅读 `logcat` / Xcode 日志 | --- ## 1. 工具集 ### ⚡ React Native & Expo | 工具 | 用途 | 最佳场景 | |------|---------|----------| | **Reactotron** | 状态/API/Redux | JS 端调试 | | **Flipper** | 布局/网络/数据库 | 原生 + JS 桥接调试 | | **Expo Tools** | 元素检查器 | 快速 UI 检查 | ### ?️ 原生层（深度挖掘） | 工具 | 平台 | 命令 | 为什么使用？ | |------|----------|---------|----------| | **Logcat** | Android | `adb logcat` | 原生崩溃、ANR | | **Console** | iOS | 通过 Xcode | 原生异常、内存 | | **Layout Insp.** | Android | Android Studio | UI 层级 Bug | | **View Insp.** | iOS | Xcode | UI 层级 Bug | --- ## 2. 常见调试工作流 ### ?️ “应用崩溃了”（红屏 vs 闪退回桌面） **场景 A：红屏（JS 错误）** - **原因：** 未定义对象、导入错误。 - **修复：** 阅读屏幕上的堆栈跟踪。通常很清晰。 **场景 B：闪退回桌面（原生崩溃）** - **原因：** 原生模块失败、内存溢出 (OOM)、未声明权限使用。 - **工具：** - **Android：** `adb logcat *:E` (过滤错误) - **iOS：** 打开 Xcode → Window → Devices → View Device Logs > **? 专业提示：** 如果应用在启动时立即崩溃，几乎 100% 是原生配置问题（Info