金沙国际唯一官网-奥门金沙手机娱乐网址

热门关键词: 金沙国际唯一官网,奥门金沙手机娱乐网址
金沙国际唯一官网 > 关于编程 > 使用浏览器的调节和测量试验工具去Debug移动端的

原标题:使用浏览器的调节和测量试验工具去Debug移动端的

浏览次数:55 时间:2019-10-10

React Native为思想前端开拓者展开了一扇新的大门。在那之中,使用浏览器的调养工具去Debug移动端的代码,无疑是最吸引开采职员的性状之一。

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

2018/07/04 · JavaScript · React Native

原稿出处: 菩提子城控件   

React Native(以下简称凯雷德N)为思想前端开采者张开了一扇新的大门。此中,使用浏览器的调度工具去Debug移动端的代码,无疑是最吸引开采职员的性状之一。

试想一下,当你在手提式有线电话机显示器按下贰个按键,处理事件的代码就足以至时在浏览器的调解工具里开展断点调节和测验,何况每当你对代码进行改换,分界面便足以完结急迅地重载,省去昂长的编写翻译时间,那会是何等进步级技术员作功能。

守旧的Web前端开辟人士本来很掌握浏览器的调度工具,但是对于怎么着将其在OdysseyN中使用以便和移动端结合起来,大概会一定素不相识。那也改成了有的开垦者跨入LacrosseN移动支付大门的第一道小法门。

正文是作者一边参谋官方文书档案,一边探究奥迪Q5N调节和测量检验进程的笔录。希望能够辅助菜鸟开垦者走出一小步,更加快地迈过那道门槛。

在开班从前,你须求搭建好地点开荒条件,并有一部Android 5.0本子以上的手提式有线电话机可供连接至Computer。

先是,使用官方工具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端口实行了某种映射,使真机上的行使和我们就要调节和测验的代码建构了动态的涉嫌。那几个过程会相比消耗开荒者计算机的系统能源,耐心等待一会儿就好。

图片 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代码。

翻开文书档案开掘,在LX570N里,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次输出。那是与调解网页时的不等:当调节和测量检验网页时,一旦试行到断点,浏览器的页面其实就不足点击了。

到这一步,是还是不是感觉选择奥迪Q5N开荒也绝非那么难吗?

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

当前早就驾驭了调治将养设置中Remote JS Debugging, Live Reload和 Hot Reloading。相信大家曾经得以比较从容地Debug轻易的 SportageN应用了。这里以Windows下的Android为例,其实在Mac下开辟iOS也是相似的。

盼望本文的分享对品味翼虎N的新手朋友有所援助。若是我们对下篇想讲的剧情有和好的主张,请留言告知作者,我们肯定会认真考虑。

 

1 赞 收藏 评论

图片 17

试想一下,当您在小叔子大显示屏按下三个开关,处监护人件的代码就能够即刻在浏览器的调整工具里开展断点调试,並且每当你对代码实行修改,分界面便足以完成高效地重载,省去昂长的编译时间,那会是何等升高级程序员作成效。

历史观的Web前端开辟人士本来很熟稔浏览器的调治工具,可是对于怎么将其在XC90N中应用以便和移动端结合起来,只怕会一定不熟悉。这也形成了一部分开拓者跨入凯雷德N移动支付大门的第一道小秘诀。

正文是小编一边参照他事他说加以考察官方文书档案,一边索求PRADON调节和测量检验进度的记录。希望可以支持新手开采者走出一小步,更加快地迈过那道门槛。

在初阶在此之前,你要求搭建好地方开拓条件,并有一部Android 5.0本子以上的手机可供连接至计算机。

第一,使用官方工具react-native-cli创设好一个开端化的工程,并设置好凭仗。

安装的吩咐为“react-native init DebugTest”(DebugTest为大家此番的项目名称)

设置到位后,就能够多出一个名称为DebugTest项目文件夹,文件夹内布局如下:

图片 18

图1. 体系起头结构

让我们把品种周转起来。作者那边是在Windows下开辟Android平台的行使,并且从前,已经用USB线连接好了一台Android版本7.1.1的真机。

运行项目标点子,就是步向DebugTest项目目录,此时施行命令行react-native run-android。注意,这里运行时会新弹出另叁个窗口,用于在8081端口运转叁个誉为Metro Bundler的劳动,这几个窗口在支付时是急需保持运维着的。

图片 19

图2. Metro Bundler 窗口

再便是,能够看看原cmd命令行窗口,展现在真机上安装了apk,并自行对8081端口举行了某种映射,使真机上的使用和大家将要调节和测量试验的代码创建了动态的关联。那个进度会比较消耗开垦者Computer的系统财富,耐心等待一会儿就好。

图片 20

图3. 原cmd命令行窗口

当Metro Bundler窗口展现index.js的映射进程达到百分之百时,手提式有线电电话机上就足以看出默许的利用分界面了。

图片 21

图4. 暗中认可使用分界面

还要,大家也得以脱离应用,在手机的桌面上找到那么些设置好的应用。这里,它的名字正是DebugTest,Logo是三个私下认可的安卓样子。

大家步入那一个利用,那时若是摇一摇手提式有线电电话机,会弹出调试相关的设置:

图片 22

图5. 调节和测验设置分界面

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

Debug JS Remotely那一个我们先留三个悬念,待会再来看。有必要调换学习Android开拓的能够加我们QQ群:936903570

先看看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里加上叁个开关。

图片 23

图6. 增多开关

本条时候,保存代码。手提式有线话机分界面确实立刻就转换了!表达Live Reload确实生效了。

而是,不是大家想要的分界面,而是出现红屏错误提示。

图片 24

图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代码。

翻看文书档案发掘,在LacrosseN里,Button组件有大多性质,当中onPress和title那四个属性是required的,也正是必得求有。

图片 25

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

故此大家修改代码,

图片 26

图9. 补全Button必要的本性

封存,手提式有线电话机分界面就刷新了,并出示出刚才加多的Button。

图片 27

图10. 健康运转

此地还应该有一丝丝值得注意,如果只给Button里的title设了值,而尚未给onPress设置,分界面不会出暗灰错误,而是在最上边出现一条松石绿警报。留意看,会开采实际那多个属性的Type分歧。由此可以预知,当要求的品种是string而实际上是undefined时,会报error,而急需的花色是function而实质上是undefined时,只会报warnning。

并且能够看看,在上头的代码中,当开关按下时,会调用三个打log的平地风波。然则打出的log在何地能够观望吗?

有三种艺术。 第一种是在命令行彰显,在等级次序当前目录(注意,必供给在类型当前目录)再开行二个新命令行窗口,输入

图片 28

就足以在最上面见到输出的内容了,它不仅可以实时反馈现成的输入,还保留了事先的输入。比如,上面叁遍输入,前两遍输入是在前边还并未有张开那几个命令行窗口时按下的。

图片 29

大概你会想:作者不是想在指令窗口看看输出,而是想能够在浏览器里那样看见输出,以至断点调节和测量试验。那便是翻开log的第三种办法。

回到本文的当初的愿景。让大家回头再看看调节和测量试验设置分界面中的Debug JS Remotely选项,以后点击它。那时会弹出Chrome的三个标签(当然,本地要求事先安装有Chrome)。

图片 30

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

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

那一年在浏览器开拓者工具的调养窗口,也能收看打出的log。何况它还是能更进一竿地张开断点调节和测量检验。

为越来越好地品尝调节和测验功能,大家修改一下代码,增添三个sayHello方法输出log。

图片 31

图12. 重复绑定onPress事件

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

就好像调节和测验Web前端代码同样,我们张开浏览器的开辟者工具,找到代码文件,并在sayHello函数里打多个断点。今年,按出手提式无线电话机上的Test按键,可以看看程序实施到断点停下了,那与调治网页代码是多么相似:

图片 32

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

唯独,与调治纯网页代码有两点分裂。

率先,浏览器的页面上看不到应用分界面,只可以在手提式有线电话机上看见分界面。

其次,手机上的分界面在程序被断住的情景下,照旧能够摄取事件。比方,就在那时候,手提式有线电电话机上该利用的分界面表面上没什么影响,不过,假诺您再一再按下Test开关,事件都会被记住,到时候会相继响应。只是今后程序断在了第一遍按下按键的时候。

大家让程序继续(假若在断点时期反复按下开关,会有频繁被断住)。

图片 33

图14. 浏览器调节台出口

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

到这一步,是还是不是感觉选择中华VN开垦也尚未那么难吗?

至于Toggle Inspector, Show Perf Monitor, Start/Stop Sampling Profiler和Dev Settings,大家目前能够不用管它们。

现阶段早就精通了调弄整理设置中Remote JS Debugging, Live Reload和 Hot Reloading。相信我们曾经能够相比从容地Debug简单的 传祺N应用了。这里以Windows下的Android为例,其实在Mac下开辟iOS也是平时的。

可望本文的享用对品味奥迪Q3N的菜鸟朋友有所支持。即使大家对下篇想讲的内容有友好的主张,可以加大家的QQ群一齐交换学习: 936903570 备注简书。

本文由金沙国际唯一官网发布于关于编程,转载请注明出处:使用浏览器的调节和测量试验工具去Debug移动端的

关键词:

上一篇:没有了

下一篇:没有了