日常开发中我们都会通过一些必要都手段进行代码的调试 和 异常情况的调试。对于react-native来说也是分为好多种,今天做一下汇总,以便日后查阅。
第一类 react-native 自带的一些调试方式
1. 红屏错误
应用内的报错会以全屏红色显示在应用中(调试模式下),我们称为红屏(red box)报错。你可以使用console.error()来手动触发红屏错误。
2. 黄屏警告
应用内的警告会以全屏黄色显示在应用中(调试模式下),我们称为黄屏(yellow box)报错。点击警告可以查看详情或是忽略掉。和红屏报警类似,你可以使用console.warn()
来手动触发黄屏警告。在默认情况下,开发模式中启用了黄屏警告。可以通过以下代码关闭:
1 | console.disableYellowBox = true; |
你也可以通过代码屏蔽指定的警告,像下面这样调用 ignoreWarnings 方法,参数为一个数组:
1 | import {YellowBox} from 'react-native'; |
在 CI/Xcode 中,黄屏警告还可以通过设置IS_TESTING
环境变量来控制启用与否。
红屏错误和黄屏警告在发布版(release/production)中都是自动禁用的。
3. 我们可以通过跑模拟器进行调试,
如果是在 iOS 模拟器中运行,还可以按下Command⌘ + D 快捷键,Android 模拟器对应的则是Command⌘ + M(windows 上可能是 F1 或者 F2)调出调试弹框,我们可以选择debugging 选项进行 相关代码的调试,这个时候在浏览器中会弹出调试页面,不过并不能直接看到 App 的用户界面,而只能提供 console 的输出,以及在 sources 项中断点调试 js 脚本
4. react-devtools
通过 react-devtools 我们可以看到 App 的用户界面,调试页面dom。1
npm install -g react-devtools
安装完成后在命令行中执行react-devtools即可启动此工具:1
react-devtools
如果你正在使用真机调试,没关系我们可以通过监听端口进行相关页面调试:1
adb reverse tcp:8081 tcp:8081
第二类 三方工具可以方便调试redux 等相关复杂型的操作( reactotron)
1.基本配置
第一步
download the desktop app
第二步 把相关包引入项目1
npm i --save-dev reactotron-react-native
第三步 创建config 文件1
ReactotronConfig.js
相关配置如下:1
2
3
4
5
6
7
8import Reactotron from 'reactotron-react-native'
const ReactotronList = Reactotron
.configure({ name: 'locatorCenter' }) // controls connection & communication settings
.useReactNative() // add all built-in react native plugins
.connect() // let's connect!
export default ReactotronList
第四步 在App.js (Create R
eact Native App) 或者index.js 中加入1
2
3if(__DEV__) {
import('./ReactotronConfig').then(() => console.log('Reactotron Configured'))
}
第五 重新启动项目(这个时候你就可以看见一开始安装的桌面引用中相关的项目信息)
- 注意 如果再真机上调试需要监听端口
1
adb reverse tcp:9090 tcp:9090
2 如果需要调试redux 需要 进行如下操作:
1 | npm install --save-dev reactotron-redux |
第一 重新配置ReactotronConfig.js :1
2
3
4
5
6
7
8
9import Reactotron from 'reactotron-react-native'
import { reactotronRedux } from 'reactotron-redux'
const ReactotronList = Reactotron
.configure({ name: 'locatorCenter' }) // controls connection & communication settings
.useReactNative() // add all built-in react native plugins
.use(reactotronRedux())
.connect() // let's connect!
export default ReactotronList
第二 配置redux -store文件:1
2
3
4
5
6
7
8
9
10import { createStore, applyMiddleware, combineReducers, compose } from 'redux'
import thunk from 'redux-thunk'
import ReactotronList from '../store/ReactotronConfig'
import mainModule from './mainModule'
const rootReducer = combineReducers({ mainModule })
const store = createStore(rootReducer, compose(applyMiddleware(thunk), ReactotronList.createEnhancer()))
export default store
最后重新 启动项目即可
第三类 relase包的情况下 收集调试异常情况,通过relase包下直接不崩溃没法看见log,这个时候就可以用 sentry 进行异常bug收集调试。
第一步 需要在sentry后台创建一个reactive的项目
第二步 引入包
1 | npm install @sentry/react-native --save |
第三步 自动进行相关配置
1 | yarn sentry-wizard -i reactNative -p ios android |