React Native基础入门之调试React Native应用的一小步


Posted in Javascript onJuly 02, 2018

React Native(以下简称RN)为传统前端开发者打开了一扇新的大门。其中,使用浏览器的调试工具去Debug移动端的代码,无疑是最吸引开发人员的特性之一。

试想一下,当你在手机屏幕按下一个按钮,处理事件的代码就可以立即在浏览器的调试工具里进行断点调试,而且每当你对代码进行修改,界面便可以完成快速地重载,省去昂长的编译时间,这会是多么提高工作效率。

传统的Web前端开发人员自然很熟悉浏览器的调试工具,但是对于如何将其在RN中使用以便和移动端结合起来,也许会相当陌生。这也成为了一些开发者跨入RN移动开发大门的第一道小门槛。

本文是笔者一边参考官方文档,一边摸索RN调试过程的记录。希望能够帮助新手开发者走出一小步,更快地迈过这道门槛。

在开始之前,你需要搭建好本地开发环境,并有一部Android 5.0版本以上的手机可供连接至电脑。

首先,使用官方工具react-native-cli创建好一个初始化的工程,并安装好依赖。

安装的命令为“react-native init DebugTest”(DebugTest为我们这次的项目名称)

安装完成后,就会多出一个名为DebugTest项目文件夹,文件夹内结构如下:

React Native基础入门之调试React Native应用的一小步

图1. 项目初始结构

让我们把项目运行起来。我这里是在Windows下开发Android平台的应用,并且在此之前,已经用USB线连接好了一台Android版本7.1.1的真机。

运行项目的方法,就是进入DebugTest项目目录,此时执行命令行react-native run-android。注意,这里启动时会新弹出另一个窗口,用于在8081端口启动一个叫做Metro Bundler的服务,这个窗口在开发时是需要保持运行着的。

React Native基础入门之调试React Native应用的一小步

图2. Metro Bundler 窗口

同时,可以看到原cmd命令行窗口,显示在真机上安装了apk,并自动对8081端口进行了某种映射,使真机上的应用和我们将要调试的代码建立了动态的关联。这个过程会比较消耗开发者电脑的系统资源,耐心等待一会儿就好。

React Native基础入门之调试React Native应用的一小步

图3. 原cmd命令行窗口

当Metro Bundler窗口显示index.js的映射进度达到100%时,手机上就可以看到默认的应用界面了。

React Native基础入门之调试React Native应用的一小步

图4. 默认应用界面

同时,我们也可以退出应用,在手机的桌面上找到这个安装好的应用。这里,它的名字就是DebugTest,图标是一个默认的安卓样子。

我们进入这个应用,这时如果摇一摇手机,会弹出调试相关的设置:

React Native基础入门之调试React Native应用的一小步

图5. 调试设置界面

Reload就是重刷整个应用,类似于在浏览器的F5刷新。

Debug JS Remotely这个我们先留一个悬念,待会再来看。

先看看Enable Live Reload和Enable Hot Reloading。这两个都可以实现在代码保存时自动更新界面,它们区别是:Live Reload会重刷整个界面,相当于手动执行一次Reload。而Hot Reloading控制得更精准,它不会重刷整个界面,只会更新修改代码时影响的那个范围。官方文档里描述的是:This will allow you to persist the app's state through reloads. 也就是说,Hot Reloading时整个应用的状态是不会改变的,页面也是不会整个重刷的。有趣的是,与Live Reload对比,Hot Reloading的Reloading这个正在进行时的语法,也似乎意味着Hot Reloading是当程序正在运行时去热乎乎地替换。

也许是因为各种 Reloading过于强大,它有时会出一点问题,比如在开启Live Reload或者Hot Reloading后,偶尔代码错误时手机上弹出的红屏界面在代码修改好后仍然不能恢复,这种时候,就需要手动Reload界面才能解决。

让我们只是Enable Live Reload,然后从react-native引入Button,在View里加上一个按钮。

React Native基础入门之调试React Native应用的一小步

图6. 添加按钮

这个时候,保存代码。手机界面确实立即就变化了!说明Live Reload确实生效了。

不过,不是我们想要的界面,而是出现红屏错误提示。

React Native基础入门之调试React Native应用的一小步

图7. 红屏错误提示

不用怕,遇到问题很正常。这时,可以从头细心阅读错误提示,发现它指出The title prop of a Button must be a string,并且这个error is located at: in Button (at App.js:37)。根据这个线索,我们看到App.js的第37行,正是刚才添加的Button代码。

查阅文档发现,在RN里,Button组件有许多属性,其中onPress和title这两个属性是required的,也就是必须要有。

React Native基础入门之调试React Native应用的一小步

图8. 官方文档关于Button的节选

所以我们修改代码,

React Native基础入门之调试React Native应用的一小步

图9. 补全Button需要的属性

保存,手机界面就刷新了,并显示出刚才添加的Button。

React Native基础入门之调试React Native应用的一小步

图10. 正常运行

这里还有一小点值得注意,如果只给Button里的title设了值,而没有给onPress设置,界面不会出红色错误,而是在最下面出现一条黄色警告。仔细看,会发现其实这两个属性的Type不一样。由此可知,当需要的类型是string而实际是undefined时,会报error,而需要的类型是function而实际是undefined时,只会报warnning。

同时可以看到,在上面的代码中,当按钮按下时,会调用一个打log的事件。但是打出的log在哪儿可以看到呢?

有两种方法。 第一种是在命令行显示,在项目当前目录(注意,一定要在项目当前目录)再启动一个新命令行窗口,输入

React Native基础入门之调试React Native应用的一小步

就可以在最下面看到输出的内容了,它不仅可以实时反馈现有的输入,还保存了之前的输入。比如,下面三次输入,前两次输入是在之前还没有开启这个命令行窗口时按下的。

React Native基础入门之调试React Native应用的一小步

也许你会想:我不是想在命令窗口看到输出,而是想能够在浏览器里那样看到输出,甚至断点调试。这就是查看log的第二种方法。

回到本文的初衷。让我们回头再看看调试设置界面中的Debug JS Remotely选项,现在点击它。这时会弹出Chrome的一个标签(当然,本地需要预先安装有Chrome)。

React Native基础入门之调试React Native应用的一小步

图11. 打开Remote JS Debugging后弹出的浏览器标签

注意:这里的Status:Debugger session #0 active就表示程序与该页面成功建立连接了。

这个时候在浏览器开发者工具的调试窗口,也能看到打出的log。而且它还可以更进一步地进行断点调试。

为更好地尝试调试功能,我们修改一下代码,添加一个sayHello方法输出log。

React Native基础入门之调试React Native应用的一小步

图12. 重新绑定onPress事件

保存,和预想的一样,页面刷新了,因为Live Reload。

如同调试Web前端代码一样,我们打开浏览器的开发者工具,找到代码文件,并在sayHello函数里打一个断点。这个时候,按下手机上的Test按钮,可以看到程序执行到断点停下了,这与调试网页代码是多么相似:

React Native基础入门之调试React Native应用的一小步

图13. 浏览器上的断点调试

不过,与调试纯网页代码有两点不同。

第一,浏览器的页面上看不到应用界面,只能在手机上看到界面。

第二,手机上的界面在程序被断住的情况下,仍然可以接收事件。举个例子,就在此时,手机上该应用的界面表面上没什么反应,但是,如果你再多次按下Test按钮,事件都会被记住,到时候会挨个响应。只是现在程序断在了第一次按下按钮的时候。

我们让程序继续(如果在断点期间多次按下按钮,会有多次被断住)。

React Native基础入门之调试React Native应用的一小步

图14. 浏览器控制台输出

我们按下了6次,调试工具下也显示出6次输出。这是与调试网页时的不同:当调试网页时,一旦执行到断点,浏览器的页面其实就不可点击了。

到这一步,是不是觉得使用RN开发也没有那么难呢?

至于Toggle Inspector, Show Perf Monitor, Start/Stop Sampling Profiler和Dev Settings,我们暂时可以不用管它们。

目前已经知道了调试设置中Remote JS Debugging, Live Reload和 Hot Reloading。相信我们已经可以比较从容地Debug简单的 RN应用了。这里以Windows下的Android为例,其实在Mac下开发iOS也是相似的。

总结

希望本文的分享对尝试RN的新手朋友有所帮助。如果大家对下篇想讲的内容有自己的想法,请留言告诉我,我们一定会认真考虑。

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家也可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
图片完美缩放
Sep 07 Javascript
Web层改进II-用xmlhttp 无声息提交复杂表单
Jan 22 Javascript
jquery 选项卡效果 新手代码
Jul 08 Javascript
JS上传图片预览插件制作(兼容到IE6)
Aug 07 Javascript
js实现一个简单的数字时钟效果
Mar 29 Javascript
vue router-link传参以及参数的使用实例
Nov 10 Javascript
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
Dec 26 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
Mar 12 Javascript
详解Vue CLI3 多页应用实践和源码设计
Aug 30 Javascript
在博客园博文中添加自定义右键菜单的方法详解
Feb 05 Javascript
浅谈vue权限管理实现及流程
Apr 23 Javascript
Vue接口封装的完整步骤记录
May 14 Vue.js
vue-router 源码之实现一个简单的 vue-router
Jul 02 #Javascript
JavaScript设计模式之单例模式简单实例教程
Jul 02 #Javascript
JavaScript设计模式之建造者模式实例教程
Jul 02 #Javascript
JS实现的JSON序列化操作简单示例
Jul 02 #Javascript
JS内部事件机制之单线程原理
Jul 02 #Javascript
JS将网址url转化为JSON格式的方法
Jul 02 #Javascript
原生JS实现列表子元素顺序反转的方法分析
Jul 02 #Javascript
You might like
php 获取完整url地址
2008/12/20 PHP
php设计模式之抽象工厂模式分析【星际争霸游戏案例】
2020/01/23 PHP
laravel框架使用极光推送消息操作示例
2020/02/15 PHP
多个iframe自动调整大小的问题
2006/09/18 Javascript
Js 订制自己的AlertBox(信息提示框)
2009/01/09 Javascript
理解JavaScript变量作用域更轻松
2009/10/25 Javascript
ajax 同步请求和异步请求的差异分析
2011/07/04 Javascript
checkbox使用示例
2013/08/23 Javascript
JS动态显示表格上下frame的方法
2015/03/31 Javascript
利用node.js如何创建子进程详解
2017/12/09 Javascript
关于vuejs中v-if和v-show的区别及v-show不起作用问题
2018/03/26 Javascript
layui实现动态和静态分页
2018/04/28 Javascript
JS前端知识点总结之内置对象,日期对象和定时器相关操作
2019/07/05 Javascript
vue实现滑动超出指定距离回顶部功能
2019/07/31 Javascript
vue下canvas裁剪图片实例讲解
2020/04/16 Javascript
Jquery $.map使用方法实例详解
2020/09/01 jQuery
利用Python实现网络测试的脚本分享
2017/05/26 Python
python WindowsError的错误代码详解
2017/07/23 Python
Python实现读取邮箱中的邮件功能示例【含文本及附件】
2017/08/05 Python
Python实现的文轩网爬虫完整示例
2019/05/16 Python
Python多进程入门、分布式进程数据共享实例详解
2019/06/03 Python
pandas DataFrame的修改方法(值、列、索引)
2019/08/02 Python
一篇文章弄懂Python中的可迭代对象、迭代器和生成器
2019/08/12 Python
解决python 找不到module的问题
2020/02/12 Python
Pycharm激活码激活两种快速方式(附最新激活码和插件)
2020/03/12 Python
Python如何实现后端自定义认证并实现多条件登陆
2020/06/22 Python
python自动化测试三部曲之request+django实现接口测试
2020/10/07 Python
css3实现文字首尾衔接跑马灯的示例代码
2020/10/16 HTML / CSS
HTML5 用动画的表现形式装载图像
2016/03/08 HTML / CSS
Html5写一个简单的俄罗斯方块小游戏
2019/12/03 HTML / CSS
荷兰牛仔裤网上商店:Jeans Centre
2018/04/03 全球购物
管理心得体会
2013/12/28 职场文书
会展策划与管理专业大学生职业生涯规划
2014/02/07 职场文书
认错检讨书
2014/10/02 职场文书
先进个人评语大全
2015/01/04 职场文书
MySQL高级进阶sql语句总结大全
2022/03/16 MySQL