react-native的调试检测和监测工具方式

Posted on | Edited on | In

日常开发中我们都会通过一些必要都手段进行代码的调试 和 异常情况的调试。对于react-native来说也是分为好多种，今天做一下汇总，以便日后查阅。

第一类 react-native 自带的一些调试方式

1. 红屏错误

应用内的报错会以全屏红色显示在应用中（调试模式下），我们称为红屏（red box）报错。你可以使用console.error()来手动触发红屏错误。

2. 黄屏警告

应用内的警告会以全屏黄色显示在应用中（调试模式下），我们称为黄屏（yellow box）报错。点击警告可以查看详情或是忽略掉。和红屏报警类似，你可以使用console.warn()来手动触发黄屏警告。在默认情况下，开发模式中启用了黄屏警告。可以通过以下代码关闭：

1
2
console.disableYellowBox = true;
console.warn('YellowBox is disabled.');

你也可以通过代码屏蔽指定的警告，像下面这样调用 ignoreWarnings 方法，参数为一个数组：

1
2
import {YellowBox} from 'react-native';
YellowBox.ignoreWarnings(['Warning: ...']);

在 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
8
import 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
3
if(__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
9
import 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
10
import { 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
2
3
npm install @sentry/react-native --save
# or
yarn add @sentry/react-native

第三步 自动进行相关配置

1
2
3
yarn sentry-wizard -i reactNative -p ios android
cd ios
pod install

最后 进行重启 打realse 包进行项目验证即可，在sentry后台就能监测到relase包出现的崩溃。