您的位置:新葡亰496net > 新葡亰官网 > 新葡亰496net:Native调节和测验本领与体会,Nati

新葡亰496net:Native调节和测验本领与体会,Nati

发布时间:2019-07-28 19:26编辑:新葡亰官网浏览(122)

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

    2018/07/04 · JavaScript · React Native

    初稿出处: 赐紫含桃城控件   

    React Native(以下简称奥迪Q5N)为守旧前端开荒者展开了一扇新的大门。在那之中,使用浏览器的调整工具去Debug移动端的代码,无疑是最迷惑开拓人士的特色之一。

    试想一下,当您在四弟大显示器按下贰个按键,处总管件的代码就能够立即在浏览器的调度工具里开始展览断点调试,并且每当你对代码举办改变,分界面便能够成功高效地重载,省去昂长的编写翻译时间,那会是何其进步级技术员作作用。

    理念的Web前端开垦职员本来很熟稔浏览器的调节和测验工具,不过对于怎么样将其在锐界N中动用以便和移动端结合起来,可能会一定素不相识。那也变为了一部分开辟者跨入兰德PAJERON移动支付大门的首先道小法门。

    正文是小编一边参谋官方文书档案,一边探究哈弗N调节和测试进程的记录。希望能够帮衬新手开拓者走出一小步,越来越快地迈过那道门槛。

    在上马在此以前,你必要搭建好地点开发条件,并有一部Android 5.0本子以上的手机可供连接至Computer。

    率先,使用官方工具react-native-cli创设好一个初阶化的工程,并设置好依赖。

    安装的通令为“react-native init DebugTest”(DebugTest为大家本次的项目名称)

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

    新葡亰496net 1

    图1. 档期的顺序始于结构

    让我们把项目运营起来。笔者那边是在Windows下开采Android平台的选用,并且从前,已经用USB线连接好了一台Android版本7.1.1的真机。

    运维品种的主意,便是踏入DebugTest项目目录,此时实施命令行react-native run-android。注意,这里运维时会新弹出另三个窗口,用于在8081端口运营三个名字为Metro Bundler的劳务,这几个窗口在支付时是内需保持运维着的。

    新葡亰496net 2

    图2. Metro Bundler 窗口

    况兼,可以看来原cmd命令行窗口,显示在真机上安装了apk,并机关对8081端口举办了某种映射,使真机上的行使和大家将在调试的代码建设构造了动态的涉嫌。这几个进度会相比消耗开采者计算机的系统财富,耐心等待一会儿就好。

    新葡亰496net 3

    图3. 原cmd命令行窗口

    当Metro Bundler窗口展现index.js的炫人眼目进程达到百分之百时,手提式有线电话机上就能够看到暗中同意的应用分界面了。

    新葡亰496net 4

    图4. 暗许使用界面

    再者,大家也得以退出应用,在堂弟大的桌面上找到那些装置好的使用。这里,它的名字正是DebugTest,Logo是多少个私下认可的安卓样子。

    我们进来这几个利用,那时借使摇一摇手提式有线电话机,会弹出调节和测量试验相关的安装:

    新葡亰496net 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里加上一个开关。

    新葡亰496net 6

    图6. 增多按键

    那一年,保存代码。手提式有线电话机界面确实立时就转换了!表达Live Reload确实生效了。

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

    新葡亰496net 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代码。

    查阅文书档案开采,在Disco VolanteN里,Button组件有比比较多本性,当中onPress和title这两性情格是required的,也正是必须要有。

    新葡亰496net 8

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

    于是我们修改代码,

    新葡亰496net 9

    图9. 补全Button必要的习性

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

    新葡亰496net 10

    图10. 好端端运营

    那边还或许有一丢丢值得注意,假若只给Button里的title设了值,而从未给onPress设置,分界面不会出橙色错误,而是在最上边出现一条驼色警告。细心看,会发觉其实那四个特性的Type区别等。因此可见,当须求的品类是string而实际是undefined时,会报error,而急需的类型是function而实际上是undefined时,只会报warnning。

    与此同期能够见到,在上边包车型地铁代码中,当开关按下时,会调用贰个打log的平地风波。不过打出的log在何地能够看来吗?

    有二种方法。 第一种是在命令行展现,在项目当前目录(注意,应当要在品种当前目录)再开发银行二个新命令行窗口,输入

    新葡亰496net 11

    就足以在最上边看看输出的内容了,它不独有能够实时报告现存的输入,还保留了事先的输入。例如,上边三次输入,前三次输入是在前面还一直不展开这么些命令行窗口时按下的。

    新葡亰496net 12

    只怕你会想:笔者不是想在指令窗口看看输出,而是想能够在浏览器里那样看到输出,以至断点调节和测量试验。那正是翻开log的第三种方法。

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

    新葡亰496net 13

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

    瞩目这里的Status:Debugger session #0 active就意味着程序与该页面成功建立连接了。

    本条时候在浏览器开荒者工具的调解窗口,也能见到打出的log。何况它还足以更进一竿地开始展览断点调试。

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

    新葡亰496net 14

    图12. 再次绑定onPress事件

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

    如同调试Web前端代码一样,大家展开浏览器的开采者工具,找到代码文件,并在sayHello函数里打一个断点。那一年,按入手提式有线电话机上的Test开关,能够看看程序实践到断点停下了,那与调度网页代码是何其相似:

    新葡亰496net 15

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

    唯独,与调度纯网页代码有两点区别。

    第一,浏览器的页面上看不到应用界面,只可以在三哥大上见到分界面。

    第二,手提式有线电话机上的分界面在先后被断住的情况下,还是能够吸取事件。比如,就在那时,手提式有线电电话机上该使用的分界面表面上没什么反应,然而,倘诺你再一再按下Test按键,事件都会被铭记,到时候会相继响应。只是将来程序断在了首次按下开关的时候。

    咱俩让程序继续(要是在断点时期往往按下按键,会有频仍被断住)。

    新葡亰496net 16

    图14. 浏览器调控台出口

    新葡亰496net:Native调节和测验本领与体会,Native应用的一小步。大家按下了6次,调节和测验工具下也显得出6次输出。那是与调治网页时的例外:当调节和测验网页时,一旦实行到断点,浏览器的页面其实就不可点击了。

    到这一步,是或不是以为选取PAJERON开垦也并未有那么难吗?

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

    当前早已驾驭了调理设置中Remote JS Debugging, Live Reload和 Hot Reloading。相信大家曾经得以相比较从容地Debug简单的 福睿斯N应用了。这里以Windows下的Android为例,其实在Mac下支付iOS也是相似的。

    可望本文的享用对品味福特ExplorerN的新手朋友有所匡助。借使我们对下篇想讲的剧情有温馨的主张,请留言告知本身,大家终将会认真思量。

     

    1 赞 收藏 评论

    新葡亰496net 17

    React Native(以下简称路虎极光N)为古板前端开垦者打开了一扇新的大门。当中,使用浏览器的调试工具去Debug移动端的代码,无疑是最吸引开垦人士的特征之一。

    在做React Native开采时,少不了的须求对React Native程序开始展览调弄整理。调节和测量试验程序是每壹人开辟者的底蕴,高效的调节和测量试验不仅可以拉长费用作用,也能下落Bug率。本文将向大家分享React Native程序调节和测验的部分手艺和体会。

    本文来源《React Native学习笔记》铺天盖和姑章。

    试想一下,当你在手提式有线话机荧屏按下二个按键,处监护人件的代码就足以及时在浏览器的调节和测验工具里展开断点调节和测量试验,何况每当你对代码进行改换,分界面便得以达成火速地重载,省去昂长的编写翻译时间,那会是何其升高级技术员作作用。

    Developer Menu

    Developer Menu是React Native给开辟者定制的一个开荒者菜单,来扶持开荒者调节和测量检验React Native应用。

    唤醒:生产条件release (production) 下Developer Menu是不可用的。

    在做React Native开拓时,少不了的内需对React Native程序举行调和。调节和测量试验程序是每壹人开荒者的底子,高效的调度既能进步开支功效,也能减低Bug率。本文将向大家分享React Native程序调节和测验的有个别技艺和经验。

    古板的Web前端开垦人士本来很熟习浏览器的调养工具,但是对于怎么将其在纳瓦拉N中应用以便和活动端结合起来,只怕会一定面生。那也形成了部分开辟者跨入EscortN移动支付大门的首先道小诀要。

    怎么样伸开Developer Menu

    Developer Menu

    Developer Menu是React Native给开垦者定制的三个开采者菜单,来帮衬开垦者调试React Native应用。

    升迁:生产情形release (production) 下Developer Menu是不可用的。

    本文是小编一边参照他事他说加以考察官方文书档案,一边查究EnclaveN调节和测验进度的笔录。希望能够扶助菜鸟开采者走出一小步,更加快地迈过这道门槛。

    在模拟器上展开Developer Menu

    Android模拟器:
    能够透过Command⌘ M连忙键来非常的慢展开Developer Menu。也能够经过模拟器上的菜单键来开采。

    体验:高版本的模拟器常常未有菜单键的,但是Nexus S上是有菜单键的,若是想选取菜单键,能够创建多个Nexus S的模拟器。

    iOS模拟器:
    能够透过Command⌘ control z快速键来快捷展开Developer Menu。

    怎么展开Developer Menu

    在上马在此之前,你须要搭建好地点开辟情状,并有一部Android 5.0版本以上的无绳电话机可供连接至Computer。

    在真机上张开Developer Menu

    在真机上你能够经过摇入手机来展开Developer Menu。
    预览图

    新葡亰496net 18

    Developer Menu.jpg

    在模拟器上开启Developer Menu

    第一,使用官方工具react-native-cli成立好三个开头化的工程,并设置好依据。

    Reloading JavaScript

    在只是修改了js代码的图景下,即便要预览修改结果,你无需再度编写翻译你的应用。在这种情况下,你只必要告诉React Native重新加载js就能够。

    晋升:借使您改改了native 代码或修改了Images.xcassets、res/drawable中的文件,重新加载js是不行的,那时你须求再行编写翻译你的档期的顺序了。

    Android模拟器:

    能够通过Command⌘ M急忙键来急迅张开Developer Menu。也得以因此模拟器上的菜单键来打开。

    心得:高版本的模拟器平常未有菜单键的,可是Nexus S上是有菜单键的,假如想使用菜单键,能够创建八个Nexus S的模拟器。

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

    Reload js

    Reload js将要你项目中js代码部分重新生成bundle,然后传输给模拟器或手提式有线电话机。
    在Developer Menu中有Reload选项,单击Reload让React Native重新加载js。对于iOS模拟器你也得以通过Command⌘ R火速键来加载js,对于Android模拟器能够因此双击r键来加载js。

    提醒:若是Command⌘ Tiggo不能够令你的iOS模拟器加载js,则足以经过选中Hardware menu中Keyboard选项下的 “Connect Hardware Keyboard” 。

    iOS模拟器:

    能够通过Command⌘ D急速键来飞速张开Developer Menu。

    设置到位后,就能够多出多少个名字为DebugTest项目文件夹,文件夹内组织如下:

    小技巧:Automatic reloading

    在真机上开启Developer Menu:

    在真机上您能够通过摇出手机来拉开Developer Menu。

    新葡亰496net 19

    Enable Live Reload

    新葡亰496net 20

    Enable Live Reload.gif

    React Native意在为开垦者带来三个越来越好的付出体验。假如您以为上文的加载js代码格局太low了大概远远不够便利,那么有未有一种更省心加载js代码的章程啊?
    答案是必定的。
    在 Developer Menu中您拜谒到”Enable Live Reload” 选项,该选拔提供了React Native动态加载的机能。当您的js代码产生变化后,React Native会自动生成bundle然后传输到模拟器或手提式有线电电话机上,是否感到很方便。

    预览图

    新葡亰496net 21

    Developer Menu

    图1. 门类初叶结构

    Hot Reloading

    新葡亰496net 22

    Hot Reloading .gif

    另外,Developer Menu中还应该有一项供给非常介绍的,正是”Hot Reloading”热加载,借使说Enable Live Reload解放了你的双臂的话,那么Hot Reloading不但解放了您的双手而且还解放了你的小运。 当你每便保存代码时Hot Reloading效用便会转换此番修改代码的增量包,然后传输到手提式有线电电话机或模拟器上以贯彻热加载。相比较Enable Live Reload供给每便都回到到起步页面,Enable Live Reload则会在保险您的顺序状态的情景下,就能够将新型的代码布署到道具上,听上去是还是不是很疯狂啊。

    提醒:当您做布局的时候运营Enable Live Reload成效你就能够实时的预览布局功效了,那足以和用AndroidStudio或AutoLayout做布局的实时预览相比美。

    Reloading JavaScript

    在只是修改了js代码的情景下,若是要预览修改结果,你不需求再行编写翻译你的施用。在这种情景下,你只须要报告React Native重新加载js就可以。

    提示:假诺您改改了native 代码或涂改了Images.xcassets、res/drawable中的文件,重新加载js是丰硕的,这时你供给再一次编写翻译你的花色了。

    让大家把品种周转起来。笔者这里是在Windows下开垦Android平台的应用,并且以前,已经用USB线连接好了一台Android版本7.1.1的真机。

    Errors and Warnings

    在development格局下,js部分的Errors 和 Warnings会直接打字与印刷在三弟大或模拟器荧屏上,以红屏和黄屏呈现。

    Reload js

    Reload js将要你项目中js代码部分重新生成bundle,然后传输给模拟器或手提式有线电话机。
    在Developer Menu中有Reload选项,单击Reload让React Native重新加载js。对于iOS模拟器你也足以由此Command⌘ R迅速键来加载js,对于Android模拟器能够透过双击r键来加载js。

    提示:如果Command⌘ R不可能令你的iOS模拟器加载js,则足以因此选中Hardware menu中Keyboard选项下的 "Connect Hardware Keyboard" 。

    运行项目标点子,正是跻身DebugTest项目目录,此时试行命令行react-native run-android。注意,这里运转时会新弹出另一个窗口,用于在8081端口运行三个誉为Metro Bundler的服务,这些窗口在付出时是急需保险运维着的。

    Errors

    React Native程序运转时出现的Errors会被一向突显在荧屏上,以革命的背景体现,并会打字与印刷出错误音讯。 你也足以通过 console.error()来手动触发Errors。

    新葡亰496net 23

    Errors.png

    小技巧:Automatic reloading

    新葡亰496net 24

    Warnings

    React Native程序运转时出现的Warnings也会被一向突显在荧屏上,以色情的背景展现,并会打字与印刷出警示音讯。 你也足以通过 console.warn()来手动触发Warnings。 你也足以由此console.disableYellowBox = true来手动禁止使用Warnings的显得,只怕经过console.ignoredYellowBox = ['Warning: ...'];来忽略相应的Warning。

    新葡亰496net 25

    Warnings.png

    升迁:在生育遭逢release (production)下Errors和Warnings功效是不可用的。

    Enable Live Reload

    新葡亰496net 26

    Enable Live Reload

    React Native意在为开采者带来贰个越来越好的开支体验。尽管你以为上文的加载js代码方式太low了恐怕非常不足方便,那么有未有一种更便捷加载js代码的艺术吧?
    答案是大势所趋的。
    在 Developer Menu中你会看到"Enable Live Reload" 选项,该选取提供了React Native动态加载的功效。当你的js代码爆发变化后,React Native会自动生成bundle然后传输到模拟器或手提式有线电话机上,是还是不是感到很有利。

    图2. Metro Bundler 窗口

    Chrome Developer Tools

    Hot Reloading

    新葡亰496net 27

    Hot Reloading

    另外,Developer Menu中还应该有一项要求专门介绍的,就是"Hot Reloading"热加载,倘诺说Enable Live Reload解放了您的单臂的话,那么Hot Reloading不但解放了你的双臂何况还解放了您的大运。 当你每便保存代码时Hot Reloading效能便会转变此番修改代码的增量包,然后传输到手提式有线电话机或模拟器上以落到实处热加载。相比较Enable Live Reload须求每趟都回来到起步页面,Enable Live Reload则会在保持您的主次状态的情事下,就能够将流行的代码安排到道具上,听上去是或不是很疯狂啊。

    晋升:当你做布局的时候运行Enable Live Reload成效你就足以实时的预览布局功用了,那能够和用AndroidStudio或AutoLayout做布局的实时预览相比美。

    再正是,能够看看原cmd命令行窗口,展现在真机上安装了apk,并自行对8081端口举行了某种映射,使真机上的使用和大家将要调节和测验的代码创建了动态的关联。这些历程会相比消耗开垦者计算机的系统能源,耐心等待一会儿就好。

    Chrome 开辟工具

    谷歌(Google) Chrome 开拓工具,是依靠谷歌(Google)浏览器内含的一套网页制作和调节和测量试验工具。开荒者工具允许网页开拓者深远浏览器和网页应用程序的其中。该工具得以有效地追踪布局难题,设置 JavaScript 断点并可深切领会代码的最优化计策。 Chrome 开荒工具一共提供了8大组织工作具:

    • Element 面板: 用于查看和编排当前页面中的 HTML 和 CSS 元素。
    • Network 面板:用于查看 HTTP 要求的详细新闻,如诉求头、响应头及再次来到内容等。
    • Source 面板:用于查看和调整当前页面所加载的剧本的源文件。
    • TimeLine 面板: 用于查看脚本的实行时间、页面成分渲染时间等音信。
    • Profiles 面板:用于查看 CPU 实行时间与内部存储器占用等新闻。
    • Resource 面板:用于查看当前页面所乞求的能源文件,如 HTML,CSS 样式文件等。
    • 奥迪ts 面板:用于优化前端页面,加快网页加载速度等。
    • Console 面板:用于显示脚本中所输出的调节和测验信息,或运维测验脚本等。

    晋升:对于调节和测量检验React Native应用来讲,Sources和Console是使用功效异常高的八个工具。

    你能够像调试JavaScript代码一样来调治你的React Native程序。

    Errors and Warnings

    在development情势下,js部分的Errors 和 Warnings会直接打字与印刷在三弟大或模拟器显示屏上,以红屏和黄屏浮现。

    新葡亰496net 28

    什么通过 Chrome调试React Native程序

    您能够透过以下步骤来调度你的React Native程序:

    Errors

    React Native程序运维时出现的Errors会被间接突显在荧屏上,以橄榄黑的背景呈现,并会打印出错误音讯。 你也得以通过console.error()来手动触发Errors。

    新葡亰496net 29

    Errors

    图3. 原cmd命令行窗口

    第一步:运维远程调节和测验

    在Developer Menu下单击”Debug JS Remotely” 运行JS远程调节和测量检验效用。此时Chrome会被展开,同时会创设二个“http://localhost:8081/debugger-ui.” Tab页。

    新葡亰496net 30

    Warnings

    React Native程序运维时出现的Warnings也会被一向显示在显示器上,以风骚的背景呈现,并会打字与印刷出警示新闻。 你也能够经过console.warn()来手动触发Warnings。
    您也足以透过console.disableYellowBox = true来手动禁止使用Warnings的展现,恐怕通过console.ignoredYellowBox = ['Warning: ...'];来忽略相应的Warning。

    新葡亰496net 31

    Warnings

    提醒:在生育条件release (production)下Errors和Warnings功效是不可用的。

    当Metro Bundler窗口突显index.js的投射进程抵达百分之百时,手提式有线电电话机上就能够见见私下认可的行使分界面了。

    其次步:张开Chrome开采者工具

    在该“http://localhost:8081/debugger-ui.”Tab页下张开开荒者工具。展开Chrome菜单->接纳越来越多工具->采取开拓者工具。你也得以因此快速键(Command⌘

    • Option⌥ I on Mac, Ctrl Shift I on Windows)展开开垦者工具。

    新葡亰496net 32

    开辟Chrome开荒着工具之后您会看到如下分界面:

    新葡亰496net 33

    Chrome Developer Tools

    新葡亰496net 34

    真机调节和测验

    Chrome 开垦工具

    谷歌(Google) Chrome 开采工具,是依据Google浏览器内含的一套网页制作和调节和测验工具。开荒者工具允许网页开辟者深远浏览器和网页应用程序的内部。该工具得以使得地追踪布局难点,设置 JavaScript 断点并可深刻掌握代码的最优化计谋。
    Chrome 开荒工具一共提供了8大组织工作具:

    • Element 面板: 用于查看和编辑当前页面中的 HTML 和 CSS 成分。
    • Network 面板:用于查看 HTTP 乞求的详细音信,如央求头、响应头及重回内容等。
    • Source 面板:用于查看和调节和测验当前页面所加载的台本的源文件。
    • TimeLine 面板: 用于查看脚本的实行时间、页面成分渲染时间等消息。
    • Profiles 面板:用于查看 CPU 实行时间与内部存储器占用等音讯。
    • Resource 面板:用于查看当前页面所乞请的财富文件,如 HTML,CSS 样式文件等。
    • 奥迪ts 面板:用于优化前端页面,加速网页加载速度等。
    • Console 面板:用于体现脚本中所输出的调节和测量检验新闻,或运营测量检验脚本等。

    唤醒:对于调试React Native应用来讲,Sources和Console是选择效用极高的多少个工具。

    你能够像调节和测量试验JavaScript代码一样来调解你的React Native程序。

    图4. 私下认可使用分界面

    在iOS上

    开发”RCTWebSocketExecutor.m “文件,将“localhost”改为您的管理器的ip,然后在Developer Menu下单击”Debug JS Remotely” 运转JS远程调节和测量试验功效。

    哪些通过 Chrome调节和测量检验React Native程序

    您可以经过以下步骤来调解你的React Native程序:

    再正是,我们也能够脱离应用,在手机的桌面上找到这么些设置好的采纳。这里,它的名字正是DebugTest,Logo是一个默认的安卓样子。

    在Android上

    方式一:
    在Android5.0以上设备上,将手提式有线电电话机通过usb连接到你的微型Computer,然后通过adb命令行工具运营如下命令来设置端口转载。
    adb reverse tcp:8081 tcp:8081
    方式二:
    你也能够透过在“Developer Menu”下的“Dev Settings”中装置你的管理器ip来拓展调节和测验。

    感受:在使用真机调节和测量检验时,你供给保障您的无绳电话机和计算机处在同二个网段内,即它们其实同二个路由器下。

    首先步:启动远程调节和测验

    在Developer Menu下单击"Debug JS Remotely" 运维JS远程调节和测量试验作用。此时Chrome会被张开,同有时候会成立三个“http://localhost:8081/debugger-ui.” Tab页。

    新葡亰496net 35

    http-//localhost-8081/debugger-ui

    大家进来那个利用,那时如果摇一摇手提式有线电话机,会弹出调节和测量试验相关的设置:

    小技巧:

    第二步:展开Chrome开辟者工具

    在该“http://localhost:8081/debugger-ui.”Tab页下张开开垦者工具。张开Chrome菜单->选拔越多工具->采纳开垦者工具。你也得以透过快捷键(Command⌘

    • Option⌥ I on Mac, Ctrl Shift I on Windows)展开开采者工具。

    新葡亰496net 36

    开采开荒者工具

    开采Chrome开荒着工具之后你拜会到如下分界面:

    新葡亰496net 37

    开拓Chrome开荒着工具

    新葡亰496net 38

    巧用Sources面板

    Sources 面板提供了调弄整理 JavaScript 代码的机能。它提供了图形化的V8 调试器。

    新葡亰496net 39

    Sources 面板能够让您看到您所要检查的页面包车型地铁有着脚本代码,并在面板选用栏下方提供了一组正式控件,提供了暂停,复苏,步进等作用。在窗口的最下方的按键能够在境遇极其(exception)时强制中止。源码呈现在单身的标签页,通过点击 打开文件导航面板,导航栏中会显示全体已开发的剧本文件。

    体验:Chrome开采着工具中的Sources面板大约是本身最常用的作用面板。常常假如是开采遭受了js报错可能别的代码难题,在审美壹遍自个儿的代码而室如悬磬之后,作者先是就能够展开Sources进行js断点调节和测量试验。

    真机调节和测量检验

    图5. 调试设置分界面

    推行控工具

    从上海教室能够看出“推行控工具”按键在侧板最上端,让您能够按步推行代码,当您实行调节和测量检验的时候那多少个按键非常有效:

    • 持续(Continue): 继续实施代码直到蒙受下贰个断点。
    • 单步推行(Step over): 步进代码以查看每一行代码对变量作出的操作,今世码调用另二个函数时不会步入那么些函数,使您能够小心于近日的函数。
    • 跳入(Step into): 与 Step over 类似,不过当代码调用函数时,调节和测量试验器会跻身这几个函数并跳转到函数的率先行。
    • 跳出(Step out): 当你进入八个函数后,你可以点击 Step out 实行函数余下的代码并跳出该函数。
    • 断点切换(Toggle breakpoints): 调控断点的敞开和破产,同一时候保险断点完好。

    在iOS上

    开垦"RCTWebSocketExecutor.m "文件,将“localhost”改为你的微管理器的ip,然后在Developer Menu下单击"Debug JS Remotely" 运营JS远程调节和测量检验作用。

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

    查看js文件

    一经您想在开荒者工具上预览你的js文件,能够在展开Sources tab下的debuggerWorker.js选项卡,该选项卡下会呈现当前调节和测验项目标保有js文件。

    新葡亰496net 40

    在Android上

    方式一:
    在Android5.0上述设备上,将手提式有线电话机通过usb连接到你的计算机,然后经过adb命令行工具运维如下命令来安装端口转载。
    adb reverse tcp:8081 tcp:8081

    方式二:
    你也能够因而在“Developer Menu”下的“Dev Settings”中设置你的电脑ip来开展调治。

    经验:在使用真机调节和测验时,你须求有限支持您的手提式有线电话机和Computer处在同贰个网段内,即它们其实同多少个路由器下。

    Debug JS Remotely那些大家先留二个悬念,待会再来看。

    断点其实很简短

    断点(Breakpoint) 是在本子中装置好的暂停处。在DevTools中动用断点能够调节和测验JavaScript代码,DOM更新和 network calls。

    经验:你能够像使用Xcode/AndroidStudio调节和测验Native应用一样,来利用Chrome开拓者工具通过断点对程序实行调节和测验。

    小技巧:


    先看看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是当程序正在运维时去热乎乎地更迭。

    加上和移除断点

    在 Sources 面板的文本导航面板中张开贰个JavaScript文件来调解,点击边栏(line gutter) 为当前行设置叁个断点,已经安装的断点处会有多少个浅墨绛红的竹签,单击天灰标签,断点即被移除。

    新葡亰496net 41

    心得:右键点击粉红标签会张开三个菜系,菜单包涵以下选项:推行到此(Continue to Here),黑盒脚本(Blackbox scripts),移除断点(Remove Breakpoint), 编辑断点(Edit Breakpoint),和 禁止使用断点(Disable Breakpoint)。在此间您可以对断点举办更加尖端的定制化的操作。

    新葡亰496net 42

    巧用Sources面板

    Sources 面板提供了调弄整理 JavaScript 代码的职能。它提供了图形化的V8 调节和测验器。

    新葡亰496net 43

    Sources面板

    Sources 面板可以令你看来你所要检查的页面包车型客车具备脚本代码,并在面板选用栏下方提供了一组正式控件,提供了刹车,复苏,步进等效果。在窗口的最下方的按键能够在遭受极其(exception)时强制中止。源码呈现在独立的标签页,通过点击 张开文件导航面板,导航栏中会展现所有已开拓的台本文件。

    心得:Chrome开拓着工具中的Sources面板差不离是小编最常用的效劳面板。平常如若是付出蒙受了js报错大概其余代码难题,在审视二遍自个儿的代码而一无全体之后,笔者第一就能展开Sources实行js断点调节和测量检验。

    可能是因为种种 Reloading过于庞大,它一时会出某个难点,比方在开启Live Reload可能Hot Reloading后,临时代码错误时手提式无线电话机上弹出的红屏分界面在代码修改好后依然无法回复,这种时候,就须要手动Reload分界面本领一蹴即至。

    高端操作

    上文讲到右键点击土红标签会张开三个菜系,上边就介绍一下该菜单下的高档次和等第操作。

    实行到此(Continue to Here):

    若果您想让程序及时跳到某一行时,那几个效果会帮到你。假如在该行从前还恐怕有别的断点,程序会相继通过前边的断点。其余部须求要建议的是以此功效在随机一行代码的边栏(gutter line)前单击右键都拜候到。

    黑盒脚本(Blackbox scripts):

    黑盒脚本会从你的调用饭店中暗藏第三方代码。

    编纂断点(Edit Breakpoint):

    透过该成效你能够创建多个标准断点,你也能够在边栏(gutter line) 右键并接纳丰富条件断点(Add Conditional Breakpoint) 。在输入框中,输入一个可解析为真或假的表明式。仅当条件为真时,试行会在此制动踏板。

    新葡亰496net 44

    经验:假诺您想让程序在某处一直都休想暂停,能够编写三个法规永恒为false的规范断点。其它,你也能够在该行代码的边栏(gutter line)前单击右键选择“Never pause here”就可以,你会意识“Never pause here”其实正是在该行代码上设了三个长久为false的法规断点。

    新葡亰496net 45

    实践控工具

    从上海教室可以看出“试行控工具”按键在侧板最上端,让您能够按步施行代码,当你举办调弄整理的时候那多少个按键特别有效:

    • 三翻五次(Continue): 继续实施代码直到蒙受下二个断点。
    • 单步施行(Step over): 步进代码以查看每一行代码对变量作出的操作,今世码调用另八个函数时不会进来那么些函数,让你能够小心于当下的函数。
    • 跳入(Step into): 与 Step over 类似,可是今世码调用函数时,调节和测量试验器会进来那么些函数并跳转到函数的率先行。
    • 跳出(Step out): 当你进去三个函数后,你能够点击 Step out 实施函数余下的代码并跳出该函数。
    • 断点切换(Toggle breakpoints): 调整断点的开启和关闭,同不经常间保障断点完好。

    让大家只是Enable Live Reload,然后从react-native引进Button,在View里加上一个按键。

    管住你的断点

    你能够通过Chrome开拓者工具的左边手面板来统一管理你的断点。

    新葡亰496net 46

    体验:你能够经过断点前的复选框来启用和剥夺断点,也足以单击右键来拓展越多的操作(如:移除断点,移除全部断点,启用禁用断点等)。

    查看js文件

    如果你想在开采者工具上预览你的js文件,能够在张开Sources tab下的debuggerWorker.js选项卡,该选项卡下会展现当前调节和测量试验项目标持有js文件。

    新葡亰496net 47

    查看js文件

    新葡亰496net 48

    有一种断点叫全局断点

    全局断点的效果是,当程序出现至极时,会在特别的地点暂停,那对高效定位异的常地方很方便。
    做iOS开垦的同学都了然在Xcode中能够安装全局断点,其实在Chrome 开荒者工具中也同样有与之相应的作用,叫“Pause On Caught Exceptions”。假若勾选上此意义,则就是所发出运营时极其的代码在 try/catch 范围内,Chrome 开垦者工具也能够在错误代码处停住。

    新葡亰496net 49

    断点其实非常粗略

    断点(Breakpoint) 是在剧本中设置好的暂停处。在DevTools中央银行使断点能够调节和测量试验JavaScript代码,DOM更新和 network calls。

    经验:你能够像使用Xcode/AndroidStudio调节和测量检验Native应用一样,来行使Chrome开辟者工具通过断点对先后开始展览调护治疗。

    图6. 增添开关

    永不忽视调节台

    DevTools 调控台(Console) 能够令你在这段时间已暂停的情状下进行考试。按 Esc 键张开/关闭调控台。

    新葡亰496net 50

    经验:你能够在调节台(Console)上打字与印刷变量,实施脚本等操作。在支付调节和测试中那一个实惠。

    参考:
    chrome-devtools
    CN-Chrome-DevTools
    Debugging
    http://blog.csdn.net/quanqinyang/article/details/52215652

    丰硕和移除断点

    在 Sources 面板的文件导航面板中开垦叁个JavaScript文件来调解,点击边栏(line gutter) 为当前行设置一个断点,已经安装的断点处会有贰个淡紫灰的标签,单击银色标签,断点即被移除。

    新葡亰496net 51

    增添移除断点

    心得:右键点击黑灰标签会张开叁个菜系,菜单包涵以下选项:实施到此(Continue to Here),黑盒脚本(Blackbox scripts),移除断点(Remove Breakpoint), 编辑断点(Edit Breakpoint),和 禁止使用断点(Disable Breakpoint)。在此处您能够对断点进行更加高档的定制化的操作。

    新葡亰496net 52

    右键孔雀绿Logo

    其临时候,保存代码。手提式有线电话机分界面确实马上就改造了!表明Live Reload确实生效了。

    高档操作

    上文讲到右键点击水绿标签会张开一个美食做法,下边就介绍一下该菜单下的高端级操作。

    奉行到此(Continue to Here):

    一旦你想让程序及时跳到某一行时,那一个功效会帮到你。借使在该行以前还只怕有别的断点,程序会挨个通过前边的断点。另外索要提议的是其一效率在随心所欲一行代码的边栏(gutter line)前单击右键都会看到。

    黑盒脚本(Blackbox scripts):

    黑盒脚本会从您的调用旅社中暗藏第三方代码。

    编排断点(Edit Breakpoint):

    经过该成效你能够创制贰个尺度断点,你也得以在边栏(gutter line) 右键并接纳充裕条件断点(Add Conditional Breakpoint) 。在输入框中,输入三个可分析为真或假的表明式。仅当准绳为真时,实践会在在那之中断。

    新葡亰496net 53

    原则断点

    体验:要是您想让程序在某处一向都无须暂停,能够编写制定七个尺码恒久为false的准绳断点。其余,你也足以在该行代码的边栏(gutter line)前单击右键选拔“Never pause here”就能够,你会开采“Never pause here”其实正是在该行代码上设了一个永远为false的尺度断点。

    新葡亰496net 54

    Never pause here

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

    治本你的断点

    您可以经过Chrome开荒者工具的动手面板来归并保管你的断点。

    新葡亰496net 55

    管理断点

    感受:你能够通过断点前的复选框来启用和剥夺断点,也足以单击右键来拓展越多的操作(如:移除断点,移除全部断点,启用禁止使用断点等)。

    新葡亰496net 56

    有一种断点叫全局断点

    全局断点的效果是,当程序出现至极时,会在丰裕的地点暂停,那对便捷定位异的常地点很方便。
    做iOS开拓的校友都晓得在Xcode中能够安装全局断点,其实在Chrome 开辟者工具中也长久以来有与之相应的成效,叫“Pause On Caught Exceptions”。如果勾选上此意义,则正是所发出运转时极度的代码在 try/catch 范围内,Chrome 开荒者工具也能够在错误代码处停住。

    新葡亰496net 57

    全局断点

    图7. 红屏错误提示

    决不忽略调节台

    DevTools 调节台(Console) 能够让你在近期已暂停的状态下进行考试。按 Esc 键张开/关闭调节台。

    新葡亰496net 58

    Console

    经验:你能够在调节台(Console)上打字与印刷变量,实践脚本等操作。在支付调节和测验中丰盛实惠。

    无须怕,碰着问题很正规。那时,能够先河留神阅读错误提醒,发现它提议The title prop of a Button must be a string,并且这几个error is located at: in Button (at App.js:37)。依照那个线索,我们看到App.js的第37行,就是刚才增多的Button代码。

    参考

    chrome-devtools
    CN-Chrome-DevTools
    Debugging

    翻看文书档案开采,在汉兰达N里,Button组件有相当多性质,当中onPress和title那三个属性是required的,也正是必须求有。

    About

    本文来源《React Native学习笔记》多重文章。
    摸底越来越多,能够关注自己的GitHub
    @https://crazycodeboy.github.io/

    新葡亰496net 59

    推荐阅读

    • React Native 学习笔记
    • [Reac Native布局详细指南](https://github.com/crazycodeboy/RNStudyNotes/tree/master/React Native布局/React Native布局详细指南/React Native布局详细指南.md)
    • React Native宣布应用软件之具名打包APK
    • React Native应用布置、热更新-CodePush最新集成总括

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

    因此大家修改代码,

    新葡亰496net 60

    图9. 补全Button须要的习性

    保留,手提式有线电话机分界面就刷新了,并展现出刚才加多的Button。

    新葡亰496net 61

    图10. 例行运作

    那边还大概有一丝丝值得注意,假如只给Button里的title设了值,而从未给onPress设置,分界面不会出深紫错误,而是在最上边出现一条卡其色警告。留心看,会意识实际上那七个属性的Type差别。由此可见,当要求的门类是string而实在是undefined时,会报error,而需求的项目是function而实际是undefined时,只会报warnning。

    何况能够看出,在地点的代码中,当开关按下时,会调用贰个打log的事件。不过打出的log在何地能够看看吗?

    有二种方法。 第一种是在命令行彰显,在类型当前目录(注意,一定要在项目当前目录)再开发银行多个新命令行窗口,输入

    新葡亰496net 62

    就足以在最上边看看输出的剧情了,它不仅可以够实时报告现成的输入,还保留了前头的输入。比如,上边二回输入,前四遍输入是在在此以前还从未拉开这一个命令行窗口时按下的。

    新葡亰496net 63

    兴许你会想:笔者不是想在指令窗口看看输出,而是想能够在浏览器里那样看到输出,以致断点调节和测验。那便是翻开log的第二种形式。

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

    新葡亰496net 64

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

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

    其有时候在浏览器开采者工具的调护医疗窗口,也能看出打出的log。而且它仍是能够更进一竿地拓展断点调节和测验。

    为更好地品尝调试功效,大家修改一下代码,增添三个sayHello方法输出log。

    新葡亰496net 65

    图12. 再度绑定onPress事件

    保留,和预期的如出一辙,页面刷新了,因为Live Reload。

    仿佛调节和测验Web前端代码一样,大家展开浏览器的开采者工具,找到代码文件,并在sayHello函数里打多少个断点。那个时候,按出手提式无线电话机上的Test开关,能够看到程序施行到断点停下了,那与调治网页代码是多么相似:

    新葡亰496net 66

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

    可是,与调解纯网页代码有两点分化。

    先是,浏览器的页面上看不到应用分界面,只好在手提式有线电话机上来看分界面。

    其次,手提式有线电话机上的分界面在程序被断住的状态下,依然能够选取事件。比如,就在那时候,手提式有线电话机上该应用的分界面表面上没什么影响,不过,假如你再频仍按下Test按键,事件都会被铭记,到时候会挨个响应。只是现在程序断在了第贰回按下开关的时候。

    我们让程序继续(假使在断点时期往往按下按键,会有频仍被断住)。

    新葡亰496net 67

    图14. 浏览器调控台出口

    咱俩按下了6次,调节和测验工具下也展现出6次输出。那是与调治网页时的例外:当调节和测量检验网页时,一旦实施到断点,浏览器的页面其实就不足点击了。

    到这一步,是或不是认为采用SportageN开荒也未有那么难吗?

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

    现阶段早已掌握了调理设置中Remote JS Debugging, Live Reload和 Hot Reloading。相信大家曾经能够相比较从容地Debug轻巧的 凯雷德N应用了。这里以Windows下的Android为例,其实在Mac下开垦iOS也是相似的。

    总结

    指望本文的享用对品味汉兰达N的新手朋友有所扶助。若是我们对下篇想讲的内容有投机的主见,请留言告知本身,我们必定会认真考虑。

    以上正是那篇作品的全体内容了,希望本文的剧情对我们的读书或许工作有着自然的参照学习价值,假若有疑点大家也可以留言调换,多谢大家对剧本之家的帮助。

    你只怕感兴趣的篇章:

    • ReactNative踩坑之配备调节和测量检验端口的消除方法
    • React Native 真机断点调试 跨域能源加载出错难题的消除情势

    本文由新葡亰496net发布于新葡亰官网,转载请注明出处:新葡亰496net:Native调节和测验本领与体会,Nati

    关键词: