处理事件的代码就可以立即在浏览器的调试工具里进行断点调试

React Native基础&入门教程:调节和测验React Native应用的一小步

2018/07/04 · JavaScript
· React Native

原稿出处:
草龙珠城控件   

React
Native(以下简称奥迪Q5N)为守旧前端开辟者展开了一扇新的大门。其中,使用浏览器的调试工具去Debug移动端的代码,无疑是最吸引开采人士的特点之一。

试想一下,当你在手提式无线电话机荧屏按下一个开关,处理事件的代码就足以立即在浏览器的调治工具里打开断点调节和测验,何况每当你对代码举办改造,分界面便能够成功高效地重载,省去昂长的编写翻译时间,这会是何其提升级技术员作作用。

思想的Web前端开荒人士本来很熟稔浏览器的调节和测量检验工具,但是对于如何将其在LANDN中动用以便和移动端结合起来,只怕会一定不熟悉。那也形成了一部分开荒者跨入智跑N移动支付大门的第一道小秘技。

正文是作者一边参照他事他说加以考察官方文书档案,一边探求PAJERON调节和测验进程的记录。希望能够支持新手开拓者走出一小步,更加快地迈过这道门槛。

在初始此前,你须求搭建好本地开辟条件,并有一部Android
5.0本子以上的无绳电话机可供连接至计算机。

率先,使用官方工具react-native-cli创造好三个起头化的工程,并安装好依靠。

设置的下令为“react-native init
DebugTest”(DebugTest为我们此番的项目名称)

安装完成后,就能多出一个名叫DebugTest项目文件夹,文件夹内协会如下:

图片 1

图1. 门类起首结构

让咱们把品种运作起来。小编这里是在Windows下开拓Android平台的应用,而且此前,已经用USB线连接好了一台Android版本7.1.1的真机。

运营品种的法子,正是跻身DebugTest项目目录,此时执行命令行react-native
run-android。注意,这里运营时会新弹出另三个窗口,用于在8081端口运转八个名字为Metro
Bundler的劳务,这几个窗口在开荒时是必要保证运营着的。

图片 2

图2. Metro Bundler 窗口

并且,能够见见原cmd命令行窗口,展现在真机上设置了apk,并机关对8081端口实行了某种映射,使真机上的利用和大家就要调节和测验的代码创建了动态的涉嫌。那几个进度会相比较消耗开垦者Computer的系统资源,耐心等待一会儿就好。

图片 3

图3. 原cmd命令行窗口

当Metro
Bundler窗口突显index.js的投射进度到达百分百时,手提式有线电话机上就足以看来私下认可的施用分界面了。

图片 4

图4. 默许使用界面

何况,大家也足以脱离应用,在手提式有线电话机的桌面上找到那么些设置好的选取。这里,它的名字就是DebugTest,Logo是一个暗中认可的安卓样子。

咱俩进来那么些利用,那时假设摇一摇手机,会弹出调节和测验相关的安装:

图片 5

图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里加上二个开关。

图片 6

图6. 增加开关

以此时候,保存代码。手机分界面确实马上就成形了!表明Live
Reload确实生效了。

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

图片 7

处理事件的代码就可以立即在浏览器的调试工具里进行断点调试。图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代码。

查看文书档案发掘,在奥迪Q7N里,Button组件有无数属性,当中onPress和title那五个属性是required的,也等于必须求有。

图片 8

处理事件的代码就可以立即在浏览器的调试工具里进行断点调试。图8. 官方文书档案关于Button的节选

于是大家修改代码,

图片 9

图9. 补全Button要求的品质

处理事件的代码就可以立即在浏览器的调试工具里进行断点调试。封存,手提式有线电话机界面就刷新了,并展现出刚才增加的Button。

图片 10

图10. 符合规律化运维

这里还会有一丝丝值得注意,借使只给Button里的title设了值,而从不给onPress设置,分界面不会出桔黄错误,而是在最下面出现一条灰褐警告。细心看,会发觉其实那八个属性的Type不雷同。由此可见,当要求的品类是string而实际是undefined时,会报error,而急需的类型是function而实际上是undefined时,只会报warnning。

并且能够观察,在上边的代码中,当开关按下时,会调用叁个打log的风云。可是打出的log在何方可以看到啊?

有两种情势。
第一种是在命令行彰显,在等级次序当前目录(注意,应当要在类型当前目录)再开发银行贰个新命令行窗口,输入

图片 11

就足以在最上边看到输出的剧情了,它不但能够实时反馈现存的输入,还保留了事先的输入。譬喻,上边三回输入,前一次输入是在在此以前还未曾拉开这一个命令行窗口时按下的。

图片 12

处理事件的代码就可以立即在浏览器的调试工具里进行断点调试。莫不你会想:作者不是想在指令窗口看看输出,而是想可以在浏览器里那样看到输出,乃至断点调节和测验。那便是翻开log的第三种办法。

重临本文的初心。让我们回头再看看调节和测量检验设置分界面中的Debug JS
Remotely选项,今后点击它。这时会弹出Chrome的三个标签(当然,本地供给事先安装有Chrome)。

图片 13

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

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

本条时候在浏览器开拓者工具的调解窗口,也能看出打出的log。并且它还足以更上一层楼地张开断点调节和测验。

为更加好地品尝调节和测量检验功效,我们修改一下代码,增添一个sayHello方法输出log。

图片 14

图12. 重复绑定onPress事件

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

就像是调节和测量检验Web前端代码同样,大家展开浏览器的开采者工具,找到代码文件,并在sayHello函数里打贰个断点。这一年,按入手提式有线电话机上的Test开关,能够观看程序实行到断点停下了,那与调解网页代码是多么相似:

图片 15

图13. 浏览器上的断点调节和测量检验

而是,与调治纯网页代码有两点不相同。

首先,浏览器的页面上看不到应用分界面,只可以在堂哥大上收看分界面。

其次,手提式有线电电话机上的分界面在先后被断住的场馆下,依然能够接到事件。例如,就在此时,手提式无线电话机上该利用的分界面表面上没什么反应,但是,假若你再频仍按下Test按键,事件都会被铭记,到时候会相继响应。只是未来程序断在了第一遍按下按键的时候。

大家让程序继续(即使在断点时期往往按下按键,会有一再被断住)。

图片 16

图14. 浏览器调控台出口

咱俩按下了6次,调节和测量检验工具下也突显出6次输出。这是与调解网页时的不等:当调节和测验网页时,一旦施行到断点,浏览器的页面其实就不足点击了。

到这一步,是否感到使用瑞虎N开荒也尚未那么难啊?

关于Toggle Inspector, Show Perf Monitor, Start/Stop 萨姆pling
Profiler和Dev Settings,我们一时能够不用管它们。

当前早就知晓了调解设置中Remote JS Debugging, Live Reload和 Hot
Reloading。相信我们已经能够比较从容地Debug轻松的
HighlanderN应用了。这里以Windows下的Android为例,其实在Mac下支付iOS也是相似的。

愿意本文的享用对品味ENVISIONN的新手朋友有所帮衬。假设我们对下篇想讲的内容有投机的主见,请留言告知自个儿,大家必定会认真思量。

 

1 赞 收藏
评论

图片 17

You may also like...

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图