SuperAPI AI 工具集

mobile-debugging

测试与质量

查看项目

更新于 10-16 04:06

技能介绍

本技能面向 React Native 与 Expo 应用的移动端调试,覆盖 iOS 和 Android 两个平台。

用途 主要用于移动应用调试与网络请求问题排查,包括调试工具配置、崩溃分析、网络请求检查以及常见 React Native 问题的定位。适用于需要搭建调试工具、排查崩溃或错误屏幕、检查网络请求与响应、定位性能瓶颈、分析组件重渲染、调试原生模块问题、阅读崩溃日志与堆栈、设置错误边界、在真机上进行远程调试、处理平台特定问题、排查白屏错误、检查 AsyncStorage 或数据库等场景。

主要能力 调试工具方面,技能涵盖 React DevTools(组件树检查、props 与 state 检查、性能分析 Profiler、组件重渲染跟踪,安装命令 npm install -g react-devtools,在启动应用前运行 react-devtools)、Chrome DevTools 远程调试(JavaScript 调试器、断点与单步调试、控制台日志与求值、Network 面板检查 API、source maps 导航原始代码)、Flipper(布局检查器、网络检查器、日志查看器、React DevTools 插件集成、数据库检查器、崩溃报告集成、性能指标监控)、React Native Debugger 独立版(集成 Redux DevTools、React DevTools、网络检查、AsyncStorage 检查)。 调试技术方面,包含控制台日志策略(基础日志、结构化日志、条件日志、性能日志 console.time/console.timeEnd、console.table 数组输出)、断点调试(debugger 语句、DevTools 条件断点)、错误边界(ErrorBoundary 类组件示例,捕获并记录错误)、网络调试(使用 Flipper 自动拦截 fetch 与 XMLHttpRequest,或手动包装 global.fetch;提供带耗时与状态记录的 apiCall 包装函数示例)。 平台特定调试方面,iOS 使用 Safari Web Inspector、Xcode Console、Instruments 性能分析,崩溃日志位于 ~/Library/Logs/DiagnosticReports/,系统日志使用 log stream --predicate;Android 使用 Chrome DevTools、Android Studio Logcat,adb logcat *:E 过滤错误,原生崩溃日志 adb logcat AndroidRuntime:E,adb shell top 监控设备。

使用方式 提供了常用调试命令:启动 React DevTools 执行 react-devtools;npm start 启动应用并在应用内摇一摇设备选择 Debug Remote JS,或在 Metro 终端按 d;iOS 真机日志使用 idevicesyslog,模拟器日志使用 xcrun simctl spawn booted log stream --level=debug;Android 使用 adb logcat 及各类过滤命令,adb logcat -c 清除日志;性能分析方面 iOS 使用 Instruments 的 Time Profiler,Android 使用 react-native log-android,React Native 性能监视器通过摇一摇设备选择 Show Perf Monitor;Flipper 桌面端安装使用 brew install --cask flipper,Expo dev client 需在 app.json 中添加 plugins: ["react-native-flipper"],并用 eas build --profile development --platform all 重新构建。 此外还包含实用技巧:通过 DevSettings.addMenuItem 添加自定义调试菜单项、使用 axios 拦截器记录网络请求与响应、React Query DevTools、自定义 useTraceUpdate 钩子追踪 props 变化、NetInfo 监控离线/在线状态、使用 Sentry 进行生产环境错误跟踪。

常见排查场景 技能列出若干典型场景及处理方式:启动崩溃(检查 Xcode 控制台或 adb logcat,关注缺失原生模块、JS bundle 错误、权限问题、初始化错误)、白屏/空白屏(在根节点添加 ErrorBoundary)、红屏错误(在 DEV 下用 ErrorUtils.setGlobalHandler 全局捕获)、网络请求失败(用 curl 检查 Metro bundler 状态,注意 Android 模拟器应使用 10.0.2.2 而非 localhost,真机使用电脑 IP,adb shell ping 测试连通性)、性能问题(使用 Profiler 组件记录渲染回调数据)。

限制 本技能文档未说明其自身的收费、价格、平台支持范围或效果承诺,相关信息暂未提供。所列工具与命令的具体可用性可能随工具版本与项目配置而变化,需以实际环境为准。