[react-native] 使用flipper打造一个完美的debug环境前言调试器不是必要的，用console.l

前言

调试器不是必要的，用console.log()就能调试一切。显然这是对的。如果你能忍受低下的效率，那么你可以忽略这篇文章。

环境：

react-native < 0.70

你可以下载jhen0409/react-native-debugger

在rn版本<0.70时，我认为debugger更好一点。

本文只针对flipper。 react-devtool+chorme-debugger + console.log(),也很方便，不需要单独下载什么调试器。

但是如果你的环境

react-native >0.70

我推荐使用flipper。

在rn>0.70,rn会默认启用hermes引擎

:hermes_enabled => true

这时候你使用debugger时会出现这样的报错

你可以关掉hermes： hermes_enabled => false,或者手动打开localhost:8081。但是接下来还是会有很多坑。

因为在0.70以上的版本，rn打开debugger时会默认打开flipper,那么在这种时候，如果依然想要使用hermes，那么flipper就成为了最好的选择。

什么是flipper

Flipper是一个用于调试iOS，Android和React Native应用程序的平台。使用简单的可视化桌面界面来检查和控制您的应用程序。不仅自带network、hermes debugger等好用的插件，而且还有大量的社区插件可供使用，开发体验相当好

下载flipper

Extensible mobile app debugger | Flipper (fbflipper.com)

可以在官网下载安装包安装

如果是mac，还可以使用homebrew 安装

brew install --cask flipper

检查环境

在安装完成后。你打开的界面应该是这样的

你第一件需要做的事就是检查环境

打开右侧栏的setup doctor 查看缺失的环境

没有什么意外的话，大概率是缺少idb 的，adb在安装android studio 时就会默认安装了。所以应该只需要安装idb

安装idb

facebook/idb: idb is a flexible command line interface for automating iOS simulators and devices (github.com)

这是仓库地址，详细请查看文档

使用homebrew 安装

brew tap facebook/fb  
brew install idb-companion

安装完成后

pip3.6 install fb-idb

需要注意的是，安装watchman时会安装 python@3.11，但是idb 客户端需要python 3.6以上才能安装。你可以使用 brew list 命令查看python 安装情况。

我这里用的是python 3.8

所以需要

brew install python@3.8

pip3.8 install fb-idb

安装完成后，重启flipper，再检查setup doctor 检查环境，应该就没有问题了。如果还有问题，就需要多找找资料自己解决吧！

插件

flipper 最强大的就是拥有可定制化可扩展的插件，能帮助你完成各种debug工作。下面我会介绍一些自带的非常强大的插件，以及一些有必要安装的社区插件。首先，先安装react-native-flipper，这是重要的前置库

yarn add react-native-flipper  --dev

请注意需要安装到dev，后续的插件一般也需要安装到dev，不然可能会有打包问题

network

抓包网络请求，并且列表化显示，支持查看请求，过滤请求以及其他一些操作，默认是关闭的，需要启用的时候，在disable栏,找到并启用就好了

redux-debugger

可以查看redux数据变化的插件首先在plugins-manager 安装redux-dubugger

然后安装

yarn add redux-flipper --dev

找到你的store文件,添加中间件

import { configureStore } from '@reduxjs/toolkit';
import userReducer from './slice/userSlice';
import * as flipper from 'redux-flipper';

export default configureStore({
  reducer: {
    userSlice: userReducer,
  },
  /** 添加中间件 */
  middleware: (getDefaultMiddleware) => {
    const middlewareTemp = getDefaultMiddleware({
      immutableCheck: false,
    });
    /** 判断开发环境 */
    if (__DEV__) {
      const reduxDebugger = flipper.default;
      middlewareTemp.push(reduxDebugger());
    }
    return middlewareTemp;
  },
});

可能的redux版本不同，那么添加中间件的方法也不同，请自行查找。然后重启flipper

一样在disable 栏启用就完成了

Async Storage

快速查看当前应用程序本地存储的插件在插件市场搜索async-storge安装

然后

yarn add rn-async-storage-flipper --dev

然后配置一下

//app.tsx
import AsyncStorage from '@react-native-async-storage/async-storage';
import RNAsyncStorageFlipper from 'rn-async-storage-flipper';
RNAsyncStorageFlipper(AsyncStorage as any);

重启flipper后，然后就在disable栏启用，就可以看到激活的插件了

react-navigation

查看路由变化以及状态的插件

在插件市场搜索react-navigation安装

然后

yarn add  react-navigation/devtools

这个可以不装到dev

使用

import * as React from 'react';  
import { NavigationContainer, useNavigationContainerRef } from '@react-navigation/native';  
import { useFlipper } from '@react-navigation/devtools';  
  
export default function App() {  
const navigationRef = useNavigationContainerRef();  
  
useFlipper(navigationRef);  
  
return (  
<NavigationContainer ref={navigationRef}>{/* ... */}</NavigationContainer>  
);  
}