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 相关文章推荐
IE与Firefox在JavaScript上的7个不同写法小结
Sep 14 Javascript
jquery 图片 上一张 下一张 链接效果(续篇)
Apr 20 Javascript
详解JS 比较两个Json对象的值是否相等的实例
Nov 20 Javascript
jQuery 1.9.1源码分析系列(十三)之位置大小操作
Dec 02 Javascript
JavaScript编写一个简易购物车功能
Sep 17 Javascript
seajs模块压缩问题与解决方法实例分析
Oct 10 Javascript
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 jQuery
JavaScript引用类型RegExp基本用法详解
Aug 09 Javascript
node.js使用redis储存session的方法
Sep 26 Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
Nov 09 Javascript
微信小程序实现横向滚动导航栏效果
Dec 12 Javascript
Vue3.0 手写放大镜效果
Jul 25 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 和 MySQL 基础教程(一)
2006/10/09 PHP
jquery ajax abort()的使用方法
2010/10/28 Javascript
JQury slideToggle闪烁问题及解决办法
2011/07/05 Javascript
jQuery 中使用JSON的实现代码
2011/12/01 Javascript
javascript 二进制运算技巧解析
2012/11/27 Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
2013/11/28 Javascript
jsPDF导出pdf示例
2014/05/02 Javascript
yepnope.js使用详解及示例分享
2014/06/23 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
2014/07/02 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
2016/06/12 Javascript
JS JSOP跨域请求实例详解
2016/07/04 Javascript
JS解决iframe之间通信和自适应高度的问题
2016/08/24 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
2016/09/05 Javascript
js获取浏览器的各种属性
2017/04/27 Javascript
微信小程序使用progress组件实现显示进度功能【附源码下载】
2017/12/12 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
2018/02/14 Javascript
vue源码学习之Object.defineProperty对象属性监听
2018/05/30 Javascript
微信小程序实现收藏与取消收藏切换图片功能
2018/08/03 Javascript
[01:02:18]VGJ.S vs infamous Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
[39:19]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第二场 11.26
2020/11/30 DOTA
Python内置函数dir详解
2015/04/14 Python
python+selenium+chrome实现淘宝购物车秒杀自动结算
2021/01/07 Python
CSS3实现类似翻书效果的过渡动画的示例代码
2019/09/06 HTML / CSS
CSS3制作3D立方体loading特效
2020/11/09 HTML / CSS
广州品高软件.net笔面试题目
2012/04/18 面试题
企业管理培训感言
2014/01/27 职场文书
采购类个人求职的自我评价
2014/02/18 职场文书
晚会主持词开场白
2014/03/17 职场文书
个人违纪检讨书
2014/09/15 职场文书
个人股份转让协议书范本
2014/10/26 职场文书
师德先进个人事迹材料
2014/12/19 职场文书
2015年大学迎新晚会总结
2015/07/16 职场文书
世界各国短波电台对东亚播送时间频率表(SW)
2021/06/28 无线电
如何利用golang运用mysql数据库
2022/03/13 Golang
mysql 获取时间方式
2022/03/20 MySQL
mysql拆分字符串作为查询条件的示例代码
2022/07/07 MySQL