React-Native调试技巧总结

最新推荐文章于 2024-08-08 08:14:59 发布
最新推荐文章于 2024-08-08 08:14:59 发布
阅读量7.6k 收藏 1
点赞数
分类专栏： android开发 文章标签： RN
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aa671125/article/details/60874945
版权
本文总结了React-Native的调试技巧，包括如何打开开发者菜单，使用Reload、Live Reload和Hot Reloading功能，以及处理红屏和黄屏错误提示。此外，还介绍了利用Chrome开发者工具进行远程JS调试和性能检测的方法。
摘要由CSDN通过智能技术生成

前言

React-Native调试不像本地代码调试一样方便,但也是可以调试的.毕竟如果程序不能调试,那基本无法正常开发.接下来我们看下如何调试RN的程序.

1.打开开发者菜单.

开发者菜单是RN的一个调试菜单,里面有很多选项,例如重新加载程序,Debug模式开启,实时更新,快速热修复,类似于instant run,开发者调试设置等等.开发者菜单只可在debug版本中调出,假如是apk的release版本则不可调出.具体界面如下:

这里写图片描述

那么如何打开者菜单呢?这里分为模拟器和真机,模拟器很简单,mac下按cammand + M可调出开发者菜单.而在windows上可按下window+M可调出(有些模拟器是F1或F2).

1.开发者菜单的Reload选项

最低0.47元/天 解锁文章
天蝎降降温
关注
专栏目录
curso-react-native：Curso React-native-Mateus Fraga
02-13
总结："curso-react-native"项目提供了全面的React Native学习资源，从基础概念到高级技巧，覆盖了开发、测试和发布的各个环节。通过深入研究和实践，开发者不仅能掌握React Native技术，还能提升项目管理能力，为...
React Native Debugger reactnative可视化调试工具
03-16
mac端可视化调试react或者reactnative工具，可以调试redux应用状态
react-native-performance：监视和衡量React Native性能
02-05
React Native Performance工具 用于在开发，管道和生产中测量和监视React Native应用性能的工具链。 配套 用于React Native的实现。 与React.Profiler API很好地集成 跟踪应用程序中的任意事件，例如组件渲染时间 捕获网络流量 收集本机跟踪，例如脚本执行和与根视图进行交互的时间 收集开发中的原生指标，例如JS包大小 在调试工具Flipper中可视化时间轴上的性能跟踪和常规指标。 在开发中将react-native-performance库与flipper-plugin-performance可视化工具连接起来。 演示版 请参阅文件
React Native Debugger 使用教程
最新发布
gitblog_00508的博客
08-08 1022
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...
react native loading动画_Flutter vs Native与React-Native：检查性能
weixin_39782355的博客
11-25 58
老孟导读：这是老孟翻译的付费文章，文章所有权归原作者所有。 欢迎加入老孟Flutter交流群，每周翻译2-3篇付费文章，精彩不容错过。 今天，一些最流行的构建移动应用程序的解决方案是原生开发或者使用React Native或Flutter跨平台方法。虽然原生开发被定位为AAA技术解决方案，但它具有一些缺点，为跨平台应用程序的进入创造了市场空间。总的来说，本机开发需要开发团队付出更多的努力来完...
react native开发react-native-debugger调试工具使用教程
A15029296293的博客
03-29 4172
众所周知react-native环境搭建比较繁琐，会出现一大堆问题，环境安装好后，调试react-native项目也着实让人头疼，今天推荐一下react-native-debugger调试工具上面是react-native-debugger下载链接。
React Native调试技巧与心得
热门推荐
fengyuzhengfan的专栏
08-03 1万+
在做React Native开发时，少不了的需要对React Native程序进行调试。调试程序是每一位开发者的基本功，高效的调试不仅能提高开发效率，也能降低Bug率。本文将向大家分享React Native程序调试的一些技巧和心得。
react-native-background-sync-poc
04-06
在IT行业中，React Native是一个非常流行的框架，它允许开发者使用JavaScript和...这个项目可能包含了上述所有知识点的实现，通过学习和理解这个PoC，开发者可以更好地掌握在React Native中进行后台处理的技巧和策略。
react-native官方demo
02-14
这个`react-native-master`压缩包中的内容可能还包括各种示例项目，展示了React-Native的各种特性和用法，对于开发者来说，通过研究这些示例，可以更快速地掌握React-Native的开发技巧。在实际项目中，开发者可以...
react-native-navigation-bug：选项卡导航的解决方法
02-20
3. **调试技巧** - **日志输出**：使用`console.log`打印关键变量，如导航状态，以查看是否存在预期行为。 - **检查依赖**：确认所有依赖项（包括`react-native`, `react-navigation`和`react-native-navigation`...
如何自动化测试 React Native 项目 (上篇) - 核心思想与E2E自动化
muyu114的专栏
01-18 805
React Native (RN) 是 Facebook 开源的跨平台应用开发框架，由于 RN 提供的高效直观的跨平台开发模式和不错的性能，我们在开发 Glow 的中文 App - 共乐孕的时候选择了以 RN 为主要框架进行开发。随着开发模式的逐渐成熟，对RN项目的自动化测试也在不断探索中慢慢完善， 最终选择了 Detox (by Wix) 做 E2E 自动化测试， Jest (FaceBook) + Enzyme (Airbnb) 做集成测试和单元测试。在这篇文章中我会介绍一下我对 React Nativ
[原创］如何打开chrome react native developer debug and monitor the react native simulator
Summersblue的博客
08-24 1065
launch google chromerun the app in the simulator in the simulator ,choose shake guesture from the hardware menu, now open a new tab in chrome, hit cmd+alt+j and the chrome developer tools are o
React Native 调试技巧
0729Liang
08-03 973
一、打开RN开发者菜单 不管是真机还是模拟器，都需要首先输入命令，打开RN开发者菜单，命令如下 adb shell input keyevent 82 真机左右摇晃手机几下，也可以打开开发者菜单 菜单如下图 里面有很多选项,例如重新加载程序、Debug模式开启、实时更新、快速热修复，类似于instant run、开发者调试设置等等。 但是开发者菜单只可在debug版本中调出,假如...
React Native中模拟器command+R刷新不了的问题
zouyunling1990的博客
03-14 3520
React Native中模拟器command+R刷新不了 可能的原因： 1.Xcode模拟器没有连接到键盘   解决：模拟器 -->Hardware-->Keyboard-->Connect Hardware Keyboard  勾选即可 2.项目Build Configuration没有设置成Debug模式  解决： Xcode-->Product-->Scheme-->
RN开发系列＜2＞--基本调试
JH_Cao的博客
03-08 1005
基本调试
iOS 工程如何在debug和release之间切换
guoshengboy的博客
06-06 631
直接上图
react-native 调试工具react-native-debugger使用
qq_45919328的博客
07-26 1844
如果是模拟器 可以按d 真机的话摇晃手机，会出现以下菜单，我已经运行调试工具，所以真是停止的菜单，未运行debug时 是 debug width xxxx。如果在左下角显示报错（让降react-native-debugger版本的）而不是组件元素，要在github下载低版本即可。可以看到控制台，默认是不开启网络调试的，可以右键然后选择netword即可，我这是已经打开了。然后就出现下面页面，鼠标选取新建元素，即可在react-native-debugger看到。首先在模拟器或者真机 打开调试菜单。
React Native - 调试技巧及调试菜单说明（模拟器调试、真机调试）
一条宝鱼的专栏
10-25 4390
React Native - 调试技巧及调试菜单说明（模拟器调试、真机调试） 一、模拟器调试 我们在ios模拟器上按快捷键command + D，安卓模拟器上按快捷⌘ + m，即可弹出如下调试菜单。下面分别介绍菜单中的各个调试功能。 1，Reload 刷新页面，其快捷键是（iOS） command + R/（安卓）两按R键。 注意：只有修改JavaScript文件时，刷新功能才起作用。如果新增了文件或者修改了Native代码，就需要使用Xcode重新编译应用了。 2，De...
React Native调试入门：浏览器工具与移动端的结合
这个调试流程对Web前端开发者来说非常友好，因为他们可以直接应用已有的Web调试技巧到React Native应用上。对于初次接触RN的开发者，理解这个调试流程是至关重要的，它能帮助他们更快地适应移动开发环境，提高开发...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值