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 相关文章推荐
javascript 操作cookies及正确使用cookies的属性
Oct 15 Javascript
JavaScript Event学习第六章 事件的访问
Feb 07 Javascript
基于JQuery的抓取博客园首页RSS的代码
Dec 01 Javascript
js对table的td进行相同内容合并示例详解
Dec 27 Javascript
jquery $(document).ready()和window.onload的区别浅析
Feb 04 Javascript
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
Aug 17 Javascript
JavaScript原生节点操作小结
Jan 17 Javascript
Web技术实现移动监测的介绍
Sep 18 Javascript
ReactJS实现表单的单选多选和反选的示例
Oct 13 Javascript
AngularJS2 与 D3.js集成实现自定义可视化的方法
Dec 01 Javascript
Node.js如何优雅的封装一个实用函数的npm包的方法
Apr 29 Javascript
详解vue微信网页授权最终解决方案
Jun 16 Javascript
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
PHP4实际应用经验篇(7)
2006/10/09 PHP
PHP Ajax实现页面无刷新发表评论
2007/01/02 PHP
dedecms 制作模板中使用的全局标记图文教程
2007/03/11 PHP
PHP动态创建Web站点的方法
2011/08/14 PHP
thinkPHP商城公告功能开发问题分析
2016/12/01 PHP
php使用PDO执行SQL语句的方法分析
2017/02/16 PHP
PDO::quote讲解
2019/01/29 PHP
传递参数的标准方法(jQuery.ajax)
2008/11/19 Javascript
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
2014/06/26 Javascript
编写React组件项目实践分析
2018/03/04 Javascript
angularjs $http调用接口的方式详解
2018/08/13 Javascript
关于vue-cli 3配置打包优化要点(推荐)
2019/04/22 Javascript
Js通过AES加密后PHP用Openssl解密的方法
2019/07/12 Javascript
JS实现在线ps功能详解
2019/07/31 Javascript
jQuery开发仿QQ版音乐播放器
2020/07/10 jQuery
[02:28]DOTA2英雄基础教程 灰烬之灵
2013/12/19 DOTA
Python 文件重命名工具代码
2009/07/26 Python
python使用RNN实现文本分类
2018/05/24 Python
在django admin中添加自定义视图的例子
2019/07/26 Python
python中字典按键或键值排序的实现代码
2019/08/27 Python
使用python绘制温度变化雷达图
2019/10/18 Python
Python实现企业微信机器人每天定时发消息实例
2020/02/25 Python
matplotlib图例legend语法及设置的方法
2020/07/28 Python
css3实现简单的白云飘动背景特效
2020/10/28 HTML / CSS
使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例
2016/03/22 HTML / CSS
Fresh馥蕾诗英国官网:法国LVMH集团旗下高端天然护肤品牌
2018/11/01 全球购物
公司董事长职责
2013/12/12 职场文书
部队学习十八大感言
2014/01/11 职场文书
现场施工员岗位职责
2014/03/10 职场文书
篝火晚会主持词
2014/03/25 职场文书
优秀电子工程系毕业生求职信
2014/05/24 职场文书
国庆节标语大全
2014/10/08 职场文书
团拜会主持词
2015/07/04 职场文书
MySQL 角色(role)功能介绍
2021/04/24 MySQL
python的变量和简单数字类型详解
2021/09/15 Python
教你使用Jenkins集成Harbor自动发布镜像
2022/04/03 Servers