日常开发中我们都会通过一些必要都手段进行代码的调试 和 异常情况的调试。对于react-native来说也是分为好多种，今天做一下汇总，以便日后查阅。
第一类 react-native 自带的一些调试方式
1. 红屏错误
应用内的报错会以全屏红色显示在应用中（调试模式下），我们称为红屏（red box）报错。你可以使用console.error()来手动触发红屏错误。
2. 黄屏警告
应用内的警告会以全屏黄色显示在应用中（调试模式下），我们称为黄屏（yellow box）报错。点击警告可以查看详情或是忽略掉。和红屏报警类似，你可以使用console.warn()来手动触发黄屏警告。在默认情况下，开发模式中启用了黄屏警告。可以通过以下代码关闭：
console.disableYellowBox = true;
console.warn('YellowBox is disabled.');
你也可以通过代码屏蔽指定的警告，像下面这样调用 ignoreWarnings 方法，参数为一个数组：
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。
npm install -g react-devtools
安装完成后在命令行中执行react-devtools即可启动此工具：
react-devtools
如果你正在使用真机调试，没关系我们可以通过监听端口进行相关页面调试：
adb reverse tcp:8081 tcp:8081
第二类 三方工具可以方便调试redux 等相关复杂型的操作（ reactotron）
1.基本配置
第一步
download the desktop app
第二步 把相关包引入项目
npm i --save-dev reactotron-react-native
第三步 创建config 文件
ReactotronConfig.js
相关配置如下：
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 中加入
if(__DEV__) {
import('./ReactotronConfig').then(() => console.log('Reactotron Configured'))
}
第五 重新启动项目（这个时候你就可以看见一开始安装的桌面引用中相关的项目信息）
- 注意 如果再真机上调试需要监听端口
adb reverse tcp:9090 tcp:9090
2 如果需要调试redux 需要 进行如下操作：
npm install --save-dev reactotron-redux
第一 重新配置ReactotronConfig.js ：
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文件：
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的项目
第二步 引入包
npm install @sentry/react-native --save
# or
yarn add @sentry/react-native
第三步 自动进行相关配置
yarn sentry-wizard -i reactNative -p ios android
cd ios
pod install
网友评论