React Native调试工具安装(React Devtools、react-native-debugger)

---

title: React Native 调试调试工具
tags:

• React Native 调试

---

前言：

在运行一个react项目的时候浏览器控制台会提醒你去安装react devtools调试工具
提示信息：Download the React DevTools for a better development experience: https://fb.me/react-devtools
笔者当前使用到2个RN调试工具，分别为：React Devtools和react-native-debugger。这2个工具最大的区别是：React Devtools启动更快，react-native-debugger相对来说在启动时会慢得多。然后，只有react-native-debugger`这个工具能观测到网络请求。

谷歌浏览器调试插件安装（React Devtools）

直接下载谷歌插件

下载地址

自行打包谷歌插件

1、react-devtools-github仓库地址

2、下载完成后，进入到react-devtools-master文件夹安装依赖。

yarn
or
npm i 

3、打包谷歌插件。

//打包命令
npm run build:extension:chrome 

打包完成后，会在你的项目目录中生成一个新的文件夹，react-devtools -> shells -> chrome -> build -> unpacked文件夹

4、打开chrome扩展程序chrome://extensions/，加载已解压的扩展程序，选择第3步中的生成的unpacked文件夹。这时就会添加一个新的扩展程序react-devtools，并在你的浏览器右上角会有个react标志, 就表示成功啦。

react-native-debugger调试工具安装（可观测网络请求）

• react-native-debugger github仓库地址地址

• windows执行程序下载地址

• 开启网络监控

react-native-debugger默认启动时，是没有开启网络请求观测的。如果需要观测网络请求，调试后台API。需要修改配置文件中的defaultNetworkInspect选项设置为true，即可监听网络请求。

注意

• 注意：使用 Chrome 调试插件目前无法观测到 React Native 中的网络请求，你可以使用第三方的react-native-debugger来进行观测。

• 调试工具,使用此命令安装下来的版本太低

npm install -g react-devtools

打开手机debug模式

adb shell input keyevent 82