React Native 调试工具 (推荐使用React Native Debugger)

最新推荐文章于 2024-08-08 08:14:59 发布
最新推荐文章于 2024-08-08 08:14:59 发布
阅读量8.4k 收藏 7
点赞数 3
分类专栏： react-native 文章标签： react-native react Native Debugger
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39635302/article/details/84876699
版权

安装启动

第一步 : (下载对应的zip文件,本人是window系统所以下载 rn-debugger-windows-ia32 .zip)
下载链接 : https://github.com/jhen0409/react-native-debugger/releases
下载成功之后,解压,双击打开exe文件(这步操作之前必须关闭http://localhost:8081/debugger-ui/ 调试界面),然后不用管它

第二步: 点击手机上的Remote JS Debugging
(手机菜单如何调出来:安卓命令行直接运行adb shell input keyevent 82)
此时,应该就可以看到React Native Debugger与项目连接成功了,如下图
在这里插入图片描述

实时查看元素

点击ToggleInspector
在这里插入图片描述

出现下图:
在这里插入图片描述
可以实时查看元素,方便调试

NetWork网络调试

在项目文件node_modules找到 react-native/Libraries/Core

最低0.47元/天 解锁文章
1241461622
关注
专栏目录
RN调试利器——React Native Debugger
weixin_33672400的博客
12-14 6857
余玮杰，2018年3月加入去哪儿网技术团队。目前在大住宿事业部/大前端/RN，参与开发大住宿RN和callcenter等相关业务。本人对前端相关领域的知识充满了兴趣，并且...
React Native Debugger reactnative可视化调试工具
03-16
mac端可视化调试react或者reactnative工具，可以调试redux应用状态
react-native-debugger：基于React Native官方调试器的独立应用程序，包括React Inspector Redux DevTools
02-03
React Native调试器 使用Redux DevTools安装程序运行的redux示例 这是一个用于调试React Native应用程序的独立应用程序： 基于官方的并提供更多功能。 包括 。 包括Redux DevTools，使用制作 。 包含 （ ）作为devtools扩展。 安装 要安装该应用程序，您可以从下载预构建的二进制文件。 对于macOS ，您可以使用进行安装： <自制软件2.6.0 $ 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 Debugger和react-native的正确版本： React Native调试器 React性的 > = 0.11 > = 0.62
React Native Debugger 使用教程
最新发布
gitblog_00508的博客
08-08 1013
React Native Debugger 使用教程 react-native-debuggerThe standalone app based on official debugger of React Native, and includes React Inspector / Redux DevTools项目地址:https://gitcode.com/gh_mirrors/re/reac...
reactnative debugger tools
08-09
reactnative debugger 工具
react-native-debugger:在Redux中React本机调试器
05-18
React Native调试器 带有内置UI和远程调试选项的React Native调试器。 安装 React Native Debugger需要React Native 0.35或更高版本。 NPM模块 npm install --save react-native-debugger React本机设备信息 设备信息组件必须在您的项目上安装和设置。 请在此处提供安装指南： : 设置 React Native Debugger包含5个核心模块。 这些模块负责维护模块的正确行为。 这些是此模块的可用命名导出。 重要信息：该模块不是为生产目的而开发的！ createDebugger 该模块负责设置调试器并将其连接到Redux架构。 安装 将createDebugger添加到您的compose函数中。 createStore(rootReducer, compose( crea
react-native-debugger
09-11
"react-native-debugger"是一款专为React Native开发者设计的强大调试工具，尤其适用于使用较旧版本如0.12.1的React Native项目。这个工具允许开发者深入到应用程序的JavaScript层进行调试，提供了一种直观的方式来...
React Native调试工具安装(React Devtools、react-native-debugger)
未金涛的博客
04-12 1398
title: 安装React Devtools调试工具 tags: ReactDevtools Devtools React Native 调试 安装React Devtools调试工具 在运行一个react项目的时候浏览器控制台会提醒你去安装react devtools调试工具 Download the React DevTools for a better development experience: https://fb.me/react-devtools 记录下我安装React Devto.
react-native debug工具
destiny_JL的博客
10-09 1910
模拟器内，windows使用快捷键win+M 键调出开发菜单，点击debug，自动打开浏览器调试页面http://localhost:8081/debugger-ui。https://juejin.cn/post/6844903732497399816补充：节点样式可以使用模拟器中的开发菜单show Element Inspector，查看样式信息。安装watchman 环境，之后实践发现可以不安装，安装后项目将不能运行，可能是与react内的watchman冲突。第一步：打开模拟器内的开发菜单。
React Native Debugger提升DEBUG速度/体验
loveseal518的博客
01-29 224
使用react-native-debugger 后稳定性提升很多，可以录制片段分析APP 函数耗时。之前使用浏览器debug比较慢，并且容易断开。整体比较稳定，持续使用中，后续再来更新。
React Native Debugger入门
weixin_26750481的博客
09-10 1909
React Native Debugger is a powerful tool that helps developers debug React Native applications more quickly. It provides a suite of impressive features, such as UI inspector, redux inspector, breakpoi...
推荐项目：React Native Debugger - 超级实用的React Native开发调试工具
gitblog_00037的博客
03-20 502
推荐项目：React Native Debugger - 超级实用的React Native开发调试工具 react-native-debuggerThe standalone app based on official debugger of React Native, and includes React Inspector / Redux DevTools项目地址:https://gitc...
React-Native调试工具的下载与使用
yingzizizizizizzz的专栏
09-04 7124
1、从官网下载安装react-native-debugger 这个就找了半天，因为看到英文文档就看不下去，然后兜兜转转还是在官网上找的，怪我怪我，浪费时间 https://github.com/jhen0409/react-native-debugger/releases  解压后点击其中的exe，就会出现高大上的界面 2、调试 先看官方文档：https://github.com/j...
工欲善其事，必先利其器之—react-native-debugger调试react native应用
技术的学习与积累是个技术活
07-16 2993
记录与分享 react native debug工具的使用
React Native 页面调试工具 react-native-vdebug
徐同保的专栏
08-21 737
React Native 页面调试工具 react-native-vdebug
Rn引入react-native-debugger调试开发
明知山
05-06 803
本项目是由expo搭建的Rn项目首先要在电脑安装软件软件初始界面。
react-native 比较好用的调试工具 react native debugger
qq_36864724的博客
12-22 674
react-native 比较好用的调试工具 用了好久react-native debugger模式，但是感觉不是很好用。在gitHub上面发现了个比较好用的算是集成了react-devtools和浏览器调试。 官网地址 链接: https://github.com/jhen0409/react-native-debugger/releases. 使用方式 打开 react native debugger 启动rn服务并且摇一摇app 点击debug 查看react native debugger
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值