# 移动调试专家专注于跨 iOS 和 Android 平台调试 React Native 和 Expo 应用程序。擅长使用调试工具、分析崩溃、网络调试以及常见 React Native 问题的故障排除。 ## 我所知道的 ### 调试工具 **反应开发工具** * 组件树检查 *道具和状态检查 * 用于性能分析的Profiler * 组件重新渲染跟踪 * 安装：`npm install -g react-devtools` * 用法：启动应用程序之前的`react-devtools` **Chrome DevTools（远程调试）** * JavaScript 调试器访问 * 断点和单步调试 * 用于记录和评估的控制台 * 用于 API 检查的网络选项卡 * 原始代码导航的源地图 **Flipper（Meta 的调试平台）** * 用于 UI 调试的布局检查器 * 具有请求/响应详细信息的网络检查员 * 带过滤功能的日志查看器 * React DevTools插件集成 * 数据库检查器 * 崩溃报告集成 * 性能指标监控 **React Native 调试器（独立）** * 一体化调试解决方案 * Redux DevTools 集成 * React DevTools集成 * 网络巡检 * 异步存储检查 ### 调试技术 **控制台日志记录策略** // 基本日志记录 console.log('调试：', 值); // 结构化日志记录控制台.log({ 组件：'用户配置文件'，动作：'加载数据'，用户ID：用户ID，时间戳：new Date().toISOString() }); // 条件记录如果（__DEV__）{ console.log('仅开发：', debugData); } // 性能记录 console.time('数据加载'); 等待 fetchData(); console.timeEnd('DataLoad'); // 数组的表日志记录控制台.表（用户）； **断点调试** // 调试器语句函数过程数据（数据）{ 调试器； // 当调试器附加时执行在此暂停返回 data.map(item => 变换(item)); } // DevTools 中的条件断点 // 右键单击行号→添加条件断点 // 条件：userId === '12345' **误差边界** 从“反应”导入反应；从'react-native'导入{视图，文本}；类 ErrorBoundary 扩展 React.Component { 状态 = { hasError: false, error: null }; 静态 getDerivedStateFromError(错误) { 返回 { hasError: true, 错误 }; } 组件DidCatch（错误，错误信息）{ // 记录到错误跟踪服务 console.error('错误捕获：', error, errorInfo); logErrorToService(错误，错误信息); } 渲染（）{ if (this.state.hasError) { 返回（ <视图> 出了点问题。 {this.state.error?.message} ）； } 返回 this.props.children; } } // 用法 <错误边界> <应用程序/> ### 网络调试 **拦截网络请求** // 使用 Flipper（推荐） // 自动拦截 fetch() 和 XMLHttpRequest // 手动拦截以进行自定义调试 const OriginalFetch = global.fetch; global.fetch = async (...args) => { console.log('获取请求：', args[0], args[1]); const 响应=等待originalFetch(...args); console.log('获取响应：', response.status); 返回响应； }; // 使用 React Native 调试器网络选项卡 // 自动与 fetch() 和 axios 配合使用 **API响应调试** // 具有详细日志记录的 API 调用包装器异步函数 apiCall(端点, 选项 = {}) { const startTime = Date.now(); 尝试{ const 响应 = 等待获取（端点，选项）； const 持续时间 = Date.now() - startTime; 控制台.log({ 终点，方法：选项.方法|| '获取', 状态：响应.状态，持续时间：`${duration}ms`，成功：响应.ok }); 如果（！response.ok）{ const error = 等待response.text(); console.error('API错误响应:', error); 抛出新错误（`API 错误：${response.status}`）； } 返回等待响应.json(); } 捕获（错误）{ console.error('API 调用失败:', { 终点，错误：错误消息，持续时间：`${Date.now() - startTime}ms` }); 抛出错误； } } ### 特定于平台的调试 **iOS 调试** * 用于 JSContext 调试的 Safari Web Inspector * 用于本机日志的 Xcode 控制台 * 性能分析工具 * 崩溃日志：`~/Library/Logs/DiagnosticReports/` * 系统日志：`日志流 --predicate 'processImagePath contains "MyApp"'` **安卓调试** * 用于 JavaScript 调试的 Chrome 开发者工具 * Android Studio Logcat 用于系统日志 * ADB logcat 过滤： `adb logcat *:E` （仅错误） * 本机崩溃日志：`adb logcat AndroidRuntime:E` * 监控设备：`adb shell top` ### 常见调试场景 **应用程序启动时崩溃** # iOS：检查 Xcode 控制台 # 打开 Xcode → 窗口 → 设备和模拟器 → 选择设备 → 查看日志 # Android: 检查 logcat adb logcat *:E # 寻找： # - 缺少本机模块 # - JavaScript 捆绑错误 # - 权限问题 # - 初始化错误 **白屏/黑屏** // 将错误边界添加到根从'react-error-boundary'导入{ErrorBoundary}；函数 ErrorFallback({ 错误 }) { 返回（ <视图> 应用程序崩溃：{error.message} ）； } <应用程序/> **红屏错误** // 全局捕获开发中的错误如果（__DEV__）{ ErrorUtils.setGlobalHandler((错误，isFatal) => { console.log('全局错误：', { error, isFatal }); // 记录到生产中的崩溃报告服务 }); } **网络请求失败** # 检查 Metro 捆绑程序是否可访问卷曲 http://localhost:8081/status # 检查 API 是否可以从设备访问 # iOS 模拟器：本地主机可以工作 # Android 模拟器：使用 10.0.2.2 而不是 localhost # 真实设备：使用计算机的IP地址 # 测试网络连通性 adb shell ping 8.8.8.8 # Android **性能问题** // 使用 React DevTools Profiler 从'react'导入{Profiler}；函数 onRenderCallback( 身份证号，阶段，实际持续时间，基础持续时间，开始时间，提交时间）{ 控制台.log({ 组件：id，阶段，实际持续时间，基础持续时间 }); } <应用程序/> ## 何时使用此技能当您需要帮助时询问我： * 设置调试工具（Flipper、React DevTools） * 调试崩溃或错误屏幕 * 检查网络请求和响应 * 寻找性能瓶颈 * 分析组件重新渲染 * 调试本机模块问题 * 读取崩溃日志和堆栈跟踪 * 设置错误边界 * 物理设备远程调试 * 调试特定于平台的问题 * 解决“白屏”错误 * 检查AsyncStorage或数据库 ## 基本调试命令 ### 开始调试 # 打开 React 开发者工具反应开发工具 # 启动应用程序进行远程调试 npm 启动 # 在应用程序中：摇动设备 → 调试远程 JS # 或者：在 Metro 捆绑器终端中按“d” ### 平台日志 # iOS系统日志（真机）设备系统日志 # iOS 模拟器日志 xcrun simctl 生成启动日志流 --level=debug # Android 日志（全部）亚行日志猫 # Android 日志（仅限应用程序，错误） adb logcat *：E | grep com.myapp # Android 日志（仅限 React Native） adb logcat ReactNative:V ReactNativeJS:V *:S # 清除安卓日志 adb logcat -c ### 性能分析 # iOS：使用仪器 # Xcode → 打开开发工具 → 仪器 → 时间分析器 # Android：使用 Systrace 反应本机日志 android # React Native 性能监视器 # 摇动设备 → 显示性能监视器 ### 脚蹼设置 # 安装 Flipper 桌面酿造安装--木桶翻转器 # 对于 Expo 开发客户端，添加到 app.json： { “博览会”：{ “插件”：[“react-native-flipper”] } } # 重建开发客户端 eas build --profile 开发 --platform all ## 专业提示和技巧 ### 1\.自定义开发菜单将自定义调试工具添加到开发菜单：从'react-native'导入{DevSettings}；如果（__DEV__）{ DevSettings.addMenuItem('清除 AsyncStorage', async () => { 等待 AsyncStorage.clear(); console.log('AsyncStorage 已清除'); }); DevSettings.addMenuItem('记录 Redux 状态', () => { console.log('Redux 状态：', store.getState()); }); DevSettings.addMenuItem('切换调试模式', () => { 全局.DEBUG = !全局.DEBUG; console.log('调试模式：', global.DEBUG); }); } ### 2\.网络请求记录器综合网络调试： // 创建网络记录器文件从 'axios' 导入 axios；如果（__DEV__）{ axios.interceptors.request.use( （配置）=> { console.log('→ API 请求', { 方法：config.method?.toUpperCase(), url: 配置.url, 数据：配置.数据，标头：config.headers }); 返回配置； }, （错误）=> { console.error('→ 请求错误', error); 返回 Promise.reject(错误); } ）； axios.interceptors.response.use( （回应）=> { console.log('← API 响应', { 状态：响应.状态， url：response.config.url，数据：响应.data }); 返回响应； }, （错误）=> { console.error('← 响应错误', { 状态：错误.响应？.状态， url: error.config?.url, 数据：错误.响应？.数据 }); 返回 Promise.reject(错误); } ）； } ### 3\. React Query DevTools（用于数据获取）从'@tanstack/react-query-devtools'导入{useReactQueryDevTools}；函数应用程序（）{ // 仅开发如果（__DEV__）{ useReactQueryDevTools(); } 返回 ; } ### 4\.调试状态更新使用自定义钩子跟踪状态变化：从 'react' 导入 { useEffect, useRef }; 函数 useTraceUpdate(props, 组件名称) { const prev = useRef(props); 使用效果（（）=> { const ChangedProps = Object.entries(props).reduce((acc, [key, value]) => { if (prev.current[key] !== value) { acc[键] = { 来自: prev.current[key], 至：值 }; } 返回帐户； }, {}); if (Object.keys(changedProps).length > 0) { console.log(`[${componentName}] 更改了 props:`,changedProps); } 上一个.当前 = 道具； }); } // 用法函数 MyComponent(props) { useTraceUpdate(props, 'MyComponent'); 返回<视图>...； } ### 5\.调试离线/在线状态从'@react-native-community/netinfo'导入NetInfo； // 监控网络状态 NetInfo.addEventListener(状态 => { console.log('网络状态：', { isConnected: 状态.isConnected, 类型：状态.类型， isInternetReachable: state.isInternetReachable }); }); ### 6\.生产错误跟踪与错误跟踪服务集成： // 使用哨兵（示例）从'@sentry/react-native'导入*作为哨兵； Sentry.init({ dsn: 'YOUR_SENTRY_DSN', 启用InExpoDevelopment：true，调试：__DEV__ }); // 捕获自定义错误尝试{ 等待有风险的操作（）； } 捕获（错误）{ Sentry.captureException(错误, { 标签：{功能：'用户配置文件'}，额外: { userId: user.id } }); } ## 与 SpecWeave 集成 **开发期间** * 以增量“reports/”记录调试方法 * 跟踪“spec.md”中的已知问题和解决方法 * 在`tasks.md`测试计划中包含调试步骤 **生产监控** * 为所有特征设置误差边界 * 集成崩溃报告（Sentry、Bugsnag） * 在运行手册中记录调试过程 * 跟踪实时文档中的常见错误

手机调试

包含技能