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

最新推荐文章于 2024-03-20 09:30:28 发布
VIP文章 最新推荐文章于 2024-03-20 09:30:28 发布
阅读量1.3k 收藏
点赞数
分类专栏： react native 文章标签： react native
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39753511/article/details/115278078
版权

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仓库地址

最低0.47元/天 解锁文章
未金涛
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React-Native调试工具的下载与使用
yingzizizizizizzz的专栏
09-04 7046
1、从官网下载安装react-native-debugger 这个就找了半天，因为看到英文文档就看不下去，然后兜兜转转还是在官网上找的，怪我怪我，浪费时间 https://github.com/jhen0409/react-native-debugger/releases  解压后点击其中的exe，就会出现高大上的界面 2、调试 先看官方文档：https://github.com/j...
react-native-debugger
09-11
windows 0.12.1版本，兼容比较老的reactnative版本
react-native-image-resizer：with使用React Native调整本地图像的大小
01-31
React Native Image Resizer 一个React Native模块可以创建本地图像的缩放版本（也支持iOS上的资产库）。 React性的 React本机图像调整器 ≤0.60 1.1.0 0.61 1.2.0 建立 安装软件包： React本机> = 0.60 yarn add react-native-image-resizer cd ios && pod install React本机<= 0.59 yarn add react-native-image-resizer react-native link react-native-image-resizer 安卓 注意：在最新版本的React Native上，您可能会在Android上的Gradle构建过程中出错（ com.android.dex.DexException: Multiple dex files define Landroid/support/v7/appcompat/R$anim ）。 运行cd android && ./gradlew clean修复此问题。 手动链接 And
EXPO XDE ReactNative For windows
09-15
Expo XDE官方版是一款非常优秀的expo开发工具，Expo XDE官方版是一组工具、库和服务，能通过编写JavaScript来构建本地的iOS和Android应用程序，使用起来简单方便!
推荐项目：React Native Debugger - 超级实用的React Native开发调试工具
最新发布
gitblog_00037的博客
03-20 336
推荐项目：React Native Debugger - 超级实用的React Native开发调试工具 项目地址:https://gitcode.com/jhen0409/react-native-debugger React Native Debugger 是一个由开发者Jhen创建的强大工具，专门为React Native开发者提供了一整套集成的调试环境，包括JavaScript、Chrom...
React Native 调试技巧
0729Liang
08-03 907
一、打开RN开发者菜单 不管是真机还是模拟器，都需要首先输入命令，打开RN开发者菜单，命令如下 adb shell input keyevent 82 真机左右摇晃手机几下，也可以打开开发者菜单 菜单如下图 里面有很多选项,例如重新加载程序、Debug模式开启、实时更新、快速热修复，类似于instant run、开发者调试设置等等。 但是开发者菜单只可在debug版本中调出,假如...
React Native - 调试技巧及调试菜单说明（模拟器调试、真机调试）
一条宝鱼的专栏
10-25 3669
React Native - 调试技巧及调试菜单说明（模拟器调试、真机调试） 一、模拟器调试 我们在ios模拟器上按快捷键command + D，安卓模拟器上按快捷⌘ + m，即可弹出如下调试菜单。下面分别介绍菜单中的各个调试功能。 1，Reload 刷新页面，其快捷键是（iOS） command + R/（安卓）两按R键。 注意：只有修改JavaScript文件时，刷新功能才起作用。如果新增了文件或者修改了Native代码，就需要使用Xcode重新编译应用了。 2，De...
react-native-debugger调试工具
孟凡涛 的博客
07-25 4397
闲话就少说了，最近从大神那里新了解到的react-native调试工具优点？？？
如何使用React Native Debugger来调试 而不使用RN默认的debugger-ui
hzxOnlineOk的博客
10-31 3831
操作步骤: 1.关闭Chrome浏览器中所有的http://localhost:/debugger-ui 页面（RN默认的debugger工具）； 2.打开下载好的react-native-debugger应用； 3.在模拟器或者真机（摇一摇，点击Debug JS Remotely）上打开开发者菜单, 启用 Debug JS Remotely。 4.右键黑框区域，选择Enable...
使用react-devtools调试react-native项目
徐同保的专栏
04-07 1444
https://www.npmjs.com/package/react-devtools 安装包： yarn global add react-devtools 通过命令行启动： 可以直接修改app的样式，类似于在chrome中：
react-native调试
weixin_40466351的博客
10-27 1169
一些老的教程和文章会提到 React 的 Chrome 插件，这一插件目前并不支持 React Native，而且调试本身并不需要这个插件。注意：使用 Chrome 调试目前无法观测到 React Native 中的网络请求，你可以使用功能更强大的第三方的react-native-debugger或是官方的flipper（注意仅能在 0.62 以上版本可用）来观测。如果页面中有debug，会进入debug模式，会方便我们的调试。我用的真机调试，手机摇晃会出现出现的页面，点击debug。
react-native 调试工具react-native-debugger使用
qq_45919328的博客
07-26 1490
如果是模拟器 可以按d 真机的话摇晃手机，会出现以下菜单，我已经运行调试工具，所以真是停止的菜单，未运行debug时 是 debug width xxxx。如果在左下角显示报错（让降react-native-debugger版本的）而不是组件元素，要在github下载低版本即可。可以看到控制台，默认是不开启网络调试的，可以右键然后选择netword即可，我这是已经打开了。然后就出现下面页面，鼠标选取新建元素，即可在react-native-debugger看到。首先在模拟器或者真机 打开调试菜单。
react-native-debugger：基于React Native官方调试器的独立应用程序，包括React Inspector Redux DevTools
02-03
$ brew update && brew cask install react-native-debugger > =自制软件2.6.0 $ brew install --cask react-native-debugger 这会将React Native Debugger.app放在/applications/文件夹中。 注意：React Native...
react-native-geolocation：React Native的地理位置API
02-03
@react-native-community/geolocation Geolocation API扩展了。 当前，在Android上，它使用 。 Google不推荐使用此API，因为它不如推荐的准确和慢。 这是我们希望在不久的将来更改的内容 。 为了将新的与React ...
react-native-performance：监视和衡量React Native性能
02-05
React Native Performance工具用于在开发，管道和生产中测量和监视React Native应用性能的工具链。... 在开发中将react-native-performance库与flipper-plugin-performance可视化工具连接起来。演示版请参阅文件
react-native-webrtc：用于React Native的WebRTC模块
02-05
react-native-webrtc 用于React Native的WebRTC模块。 支持iOS / macOS / Android。 支持视频/音频/数据通道。 世博用户注意：除非您弹出该插件，否则它将不起作用。社区欢迎每个人加入我们的，讨论与React Native和...
React Native调试技巧与心得
热门推荐
fengyuzhengfan的专栏
08-03 1万+
在做React Native开发时，少不了的需要对React Native程序进行调试。调试程序是每一位开发者的基本功，高效的调试不仅能提高开发效率，也能降低Bug率。本文将向大家分享React Native程序调试的一些技巧和心得。
react-native-debugger的使用整理
qq564280420的博客
03-22 3564
react-native-debugger的使用整理 利用react-native-debugger可以在react-native项目中监听和api交互的数据，搜集过程中经历了比较长的时间，现在一些感受整理如下，希望能帮助到需要的人 一、下载 点击下面链接进行下载release版本，根据需要安装 https://github.com/jhen0409/react-native-debugger/releases 二、运行react-native-debugger 默认打开如下图 三、切换端口 debug
react-native调试攻略 -- Android Studio
宏斌的博客
05-12 2041
这里使用的是Android Studio的模拟器，一下是模拟器和真机的调试总结 从网页转到app不适应的一点就是网页经常控制台调试，而用了几天react-native感觉哪总说不上来的不舒服，后来对比发现我常用的调试用不了了，这就很难受，后来在网上看了很多的相关文章，在总结自己的使用经验有了以下的调试经验 开发者菜单 方法1 在模拟器上按CTRL + M就可以打开开发者菜单 方法2 在命令行启动react-native项目时下面会有这么两句，意思在图上有标注 在命令行输入d也可以打开模拟器的开发者菜单 3
react native 如何安装react-native-nfc-android
06-10
要在 React Native 中使用 NFC 功能，需要安装 react-native-nfc-android 模块。下面是安装步骤： 1. 首先确保已经安装了 React Native，可以使用以下命令来检查： ``` react-native --version ``` 2. 在项目目录...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值