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

最新推荐文章于 2025-06-04 09:02:22 发布

未金涛

最新推荐文章于 2025-06-04 09:02:22 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： react native 文章标签： react native

本文链接：https://blog.youkuaiyun.com/weixin_39753511/article/details/115278078

react native 专栏收录该内容

40 篇文章

订阅专栏

本文介绍了如何安装React Native的调试工具React Devtools和react-native-debugger。React Devtools可通过谷歌插件直接下载或自行打包，而react-native-debugger能够观测网络请求。使用react-native-debugger时需开启网络监控选项。注意Chrome插件无法观测RN的网络请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

注意

注意：使用 Chrome 调试插件目前无法观测到 React Native 中的网络请求，你可以使用第三方的react-native-debugger来进行观测。
调试工具,使用此命令安装下来的版本太低

npm install -g react-devtools

打开手机debug模式

adb shell input keyevent 82