澳门新萄京官方网站-www.8455.com-澳门新萄京赌场网址

澳门新萄京官方网站:Native调节和测量试验本领

2019-08-03 作者:澳门新萄京赌场网址   |   浏览(108)

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

2018/07/04 · JavaScript · React Native

原稿出处: 菩提子城控件   

React Native(以下简称本田CR-VN)为古板前端开采者展开了一扇新的大门。在这之中,使用浏览器的调节和测量检验工具去Debug移动端的代码,无疑是最吸引开辟职员的表征之一。

试想一下,当您在哥哥大荧屏按下三个按键,处管事人件的代码就可以即刻在浏览器的调度工具里开始展览断点调节和测验,並且每当你对代码进行修改,分界面便能够做到高效地重载,省去昂长的编写翻译时间,那会是何等提升级工程师作功能。

价值观的Web前端开拓人士本来很熟稔浏览器的调治工具,然则对于如何将其在传祺N中运用以便和移动端结合起来,也许会一定不熟悉。这也形成了有的开荒者跨入路虎极光N移动支付大门的第一道小法门。

本文是小编一边仿照效法官方文书档案,一边探索逍客N调节和测量检验进程的记录。希望可以帮忙菜鸟开垦者走出一小步,更加快地迈过那道门槛。

在初步在此以前,你需求搭建好当地开辟境遇,并有一部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端口实行了某种映射,使真机上的应用和咱们就要调节和测验的代码创设了动态的关系。这些进程会相比消耗开采者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代码。

查看文书档案发掘,在CR-VN里,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次输出。这是与调解网页时的比不上:当调节和测量检验网页时,一旦施行到断点,浏览器的页面其实就不得点击了。

到这一步,是否感觉接纳EnclaveN开辟也从不那么难吗?

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

当下已经驾驭了调和设置中Remote JS Debugging, Live Reload和 Hot Reloading。相信咱们早就能够比较从容地Debug轻便的 EscortN应用了。这里以Windows下的Android为例,其实在Mac下开荒iOS也是一般的。

梦想本文的享用对品味WranglerN的菜鸟朋友有所帮忙。借使我们对下篇想讲的内容有友好的主张,请留言告知笔者,我们必将会认真思虑。

 

1 赞 收藏 评论

澳门新萄京官方网站 17

React Native(以下简称TucsonN)为观念前端开辟者展开了一扇新的大门。当中,使用浏览器的调解工具去Debug移动端的代码,无疑是最吸引开采人士的特色之一。

在做React Native开垦时,少不了的内需对React Native程序举办调节和测量试验。调节和测验程序是种种人开采者的根底,高效的调剂不仅可以增加开拓效用,也能裁减Bug率。本文将向大家分享React Native程序调节和测验的有些手艺和感受。

本文来源《React Native学习笔记》三回九转串小说。

试想一下,当您在大哥伦比亚大学荧屏按下八个按键,处监护人件的代码就可以即时在浏览器的调理工科具里开始展览断点调节和测量试验,何况每当你对代码进行修改,分界面便足以达成高效地重载,省去昂长的编写翻译时间,那会是何等提升级程序员作功效。

Developer Menu

澳门新萄京官方网站:Native调节和测量试验本领与体会,入门教程。Developer Menu是React Native给开拓者定制的三个开垦者菜单,来援救开荒者调节和测量试验React Native应用。

提拔:生产情况release (production) 下Developer Menu是不可用的。

在做React Native开荒时,少不了的内需对React Native程序开展调节和测验。调节和测量试验程序是每种人开荒者的基础,高效的调整不只可以抓实开拓效用,也能减低Bug率。本文将向大家分享React Native程序调节和测验的有的本领和体会。

历史观的Web前端开荒人士本来很熟习浏览器的调护治疗工具,可是对于怎么样将其在哈弗N中利用以便和平运动动端结合起来,大概会一定不熟悉。那也改为了有个别开辟者跨入奥迪Q5N移动支付大门的首先道小秘籍。

什么样张开Developer Menu

Developer Menu

Developer Menu是React Native给开荒者定制的二个开拓者菜单,来帮衬开拓者调节和测验React Native应用。

提示:生产景况release (production) 下Developer Menu是不可用的。

正文是作者一边参谋官方文书档案,一边索求哈弗N调节和测量检验进程的笔录。希望能够支持新手开拓者走出一小步,越来越快地迈过那道门槛。

在模拟器上开启Developer Menu

Android模拟器:
能够经过Command⌘ M火速键来相当慢展开Developer Menu。也能够通过模拟器上的菜单键来开荒。

感受:高版本的模拟器平日未有菜单键的,可是Nexus S上是有菜单键的,要是想利用菜单键,能够创立贰个Nexus S的模拟器。

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

如何张开Developer Menu

在早先此前,你供给搭建好本地开垦景况,并有一部Android 5.0本子以上的无绳电话机可供连接至计算机。

在真机上张开Developer Menu

在真机上你能够透过摇出手提式有线电话机来开启Developer Menu。
预览图

澳门新萄京官方网站 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⌘ 如虎 CTR 3不能够使您的iOS模拟器加载js,则足以因此选中Hardware menu中Keyboard选项下的 “Connect Hardware Keyboard” 。

iOS模拟器:

能够透过Command⌘ D飞快键来非常快展开Developer Menu。

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

小技巧:Automatic reloading

在真机上开启Developer Menu:

在真机上您能够经过摇入手提式有线电电话机来展开Developer Menu。

澳门新萄京官方网站 19

Enable Live Reload

澳门新萄京官方网站 20

Enable Live Reload.gif

React Native意在为开采者带来叁个越来越好的成本体验。假设你感到上文的加载js代码形式太low了依然远远不够便利,那么有未有一种更方便人民群众加载js代码的方式呢?
答案是自然的。
在 Developer Menu中您会看出”Enable Live Reload” 选项,该选取提供了React Native动态加载的功用。当您的js代码发生变化后,React Native会自动生成bundle然后传输到模拟器或手提式无线电话机上,是不是认为很有益于。

预览图

澳门新萄京官方网站 21

Developer Menu

图1. 类别开始结构

Hot Reloading

澳门新萄京官方网站 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。

澳门新萄京官方网站 23

Errors.png

小技巧:Automatic reloading

澳门新萄京官方网站 24

Warnings

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

澳门新萄京官方网站 25

Warnings.png

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

Enable Live Reload

澳门新萄京官方网站 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

澳门新萄京官方网站 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端口进行了某种映射,使真机上的运用和大家就要调节和测验的代码组建了动态的关系。这一个历程会相比较消耗开荒者Computer的系统财富,耐心等待一会儿就好。

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会直接打印在手提式有线电话机或模拟器显示屏上,以红屏和黄屏浮现。

澳门新萄京官方网站 28

什么通过 Chrome调节和测验React Native程序

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

Errors

React Native程序运维时出现的Errors会被间接展现在荧屏上,以古金色的背景展示,并会打字与印刷出错误消息。 你也能够通过console.error()来手动触发Errors。

澳门新萄京官方网站 29

Errors

图3. 原cmd命令行窗口

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

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

澳门新萄京官方网站 30

Warnings

React Native程序运行时出现的Warnings也会被平素浮今后显示器上,以色情的背景显示,并会打字与印刷出警示消息。 你也足以经过console.warn()来手动触发Warnings。
您也能够经过console.disableYellowBox = true来手动禁止使用Warnings的体现,或然通过console.ignoredYellowBox = ['Warning: ...'];来忽略相应的Warning。

澳门新萄京官方网站 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)展开开拓者工具。

澳门新萄京官方网站 32

开垦Chrome开拓着工具之后你会看出如下分界面:

澳门新萄京官方网站 33

Chrome Developer Tools

澳门新萄京官方网站 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,图标是多个暗许的安卓样子。

在Android上

方式一:
在Android5.0之上设备上,将手机通过usb连接到你的计算机,然后通过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页。

澳门新萄京官方网站 35

http-//localhost-8081/debugger-ui

作者们步向这一个利用,那时假若摇一摇手提式有线电话机,会弹出调节和测量试验相关的设置:

小技巧:

第二步:张开Chrome开拓者工具

在该“http://localhost:8081/debugger-ui.”Tab页下展开开垦者工具。张开Chrome菜单->采取越多工具->选用开荒者工具。你也得以通过火速键(Command⌘

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

澳门新萄京官方网站 36

开荒开采者工具

张开Chrome开拓着工具之后您拜谒到如下分界面:

澳门新萄京官方网站 37

打开Chrome开辟着工具

澳门新萄京官方网站 38

巧用Sources面板

Sources 面板提供了调整 JavaScript 代码的效果。它提供了图形化的V8 调节和测验器。

澳门新萄京官方网站 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”改为你的Computer的ip,然后在Developer Menu下单击"Debug JS Remotely" 运行JS远程调节和测量试验效能。

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

查看js文件

假设你想在开荒者工具上预览你的js文件,能够在开拓Sources tab下的debuggerWorker.js选项卡,该选项卡下会突显当前调节和测量检验项目标装有js文件。

澳门新萄京官方网站 40

在Android上

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

方式二:
您也足以通过在“Developer Menu”下的“Dev Settings”中安装你的微机ip来开始展览调护治疗。

经验:在行使真机调试时,你必要保险您的手提式有线电话机和管理器处在同三个网段内,即它们其实同二个路由器下。

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) 为当前行设置三个断点,已经安装的断点处会有三个紫莲灰的价签,单击土黑标签,断点即被移除。

澳门新萄京官方网站 41

感受:右键点击浅绿灰标签会张开贰个菜谱,菜单蕴含以下选项:实践到此(Continue to Here),黑盒脚本(Blackbox scripts),移除断点(Remove Breakpoint), 编辑断点(Edit Breakpoint),和 禁止使用断点(Disable Breakpoint)。在这里你能够对断点举办更加尖端的定制化的操作。

澳门新萄京官方网站 42

巧用Sources面板

Sources 面板提供了调和 JavaScript 代码的功力。它提供了图形化的V8 调节和测量检验器。

澳门新萄京官方网站 43

Sources面板

Sources 面板能够让您看到你所要检查的页面包车型客车具有脚本代码,并在面板选择栏下方提供了一组正式控件,提供了暂停,恢复生机,步进等成效。在窗口的最下方的开关能够在遇见非常(exception)时强制中止。源码显示在独立的标签页,通过点击 张开文件导航面板,导航栏中会突显全数已开发的台本文件。

心得:Chrome开辟着工具中的Sources面板大约是自个儿最常用的效果面板。平常如若是开辟碰着了js报错也许其余代码难点,在审视三次本身的代码而一贫如洗之后,笔者首先就能够张开Sources举行js断点调节和测量试验。

只怕是因为各个 Reloading过于庞大,它不经常会出某个难题,比方在开启Live Reload只怕Hot Reloading后,不时代码错误时手提式无线电话机上弹出的红屏分界面在代码修改好后依然无法大张旗鼓,这种时候,就供给手动Reload分界面手艺消除。

高档操作

上文讲到右键点击中蓝标签会展开四个菜系,上面就介绍一下该菜单下的尖端操作。

实施到此(Continue to Here):

一经你想让程序及时跳到某一行时,这一个功用会帮到你。假使在该行以前还恐怕有别的断点,程序会挨个通过前边的断点。别的部须要要提出的是以此作用在任性一行代码的边栏(gutter line)前单击右键都会看到。

黑盒脚本(Blackbox scripts):

黑盒脚本会从您的调用仓库中潜藏第三方代码。

编辑断点(艾德it Breakpoint):

经过该意义你能够创造一个标准断点,你也得以在边栏(gutter line) 右键并选用丰硕条件断点(Add Conditional Breakpoint) 。在输入框中,输入叁个可剖析为真或假的表明式。仅当准则为真时,施行会在当中断。

澳门新萄京官方网站 44

心得:假若您想让程序在某处一直都毫无暂停,可以编制一个规格长久为false的典型化断点。其余,你也足以在该行代码的边栏(gutter line)前单击右键选拔“Never pause here”就可以,你会意识“Never pause here”其实正是在该行代码上设了贰个世代为false的准则断点。

澳门新萄京官方网站 45

实践控工具

从上图能够看出“奉行控工具”开关在侧板最上部,让您能够按步试行代码,当你举办调度的时候那多少个按键特别管用:

  • 此起彼落(Continue): 继续施行代码直到遇见下贰个断点。
  • 单步推行(Step over): 步进代码以查看每一行代码对变量作出的操作,今世码调用另一个函数时不会进来这一个函数,令你能够当心于当下的函数。
  • 跳入(Step into): 与 Step over 类似,可是现代码调用函数时,调节和测量检验器会进入那些函数并跳转到函数的率先行。
  • 跳出(Step out): 当你进来叁个函数后,你能够点击 Step out 施行函数余下的代码并跳出该函数。
  • 断点切换(Toggle breakpoints): 调控断点的张开和关闭,同有的时候间保险断点完好。

让我们只是Enable Live Reload,然后从react-native引进Button,在View里加上二个开关。

管理你的断点

你能够经过Chrome开拓者工具的动手面板来归并保管你的断点。

澳门新萄京官方网站 46

经验:你能够经过断点前的复选框来启用和剥夺断点,也得以单击右键来开始展览越来越多的操作(如:移除断点,移除全数断点,启用禁止使用断点等)。

查看js文件

即便您想在开荒者工具上预览你的js文件,能够在开发Sources tab下的debuggerWorker.js选项卡,该选项卡下会突显当前调节和测验项指标有着js文件。

澳门新萄京官方网站 47

查看js文件

澳门新萄京官方网站 48

有一种断点叫全局断点

大局断点的遵从是,当程序出现分外时,会在那贰个的地点暂停,那对便捷定位异的常地点很有益于。
做iOS开采的校友都通晓在Xcode中得以设置全局断点,其实在Chrome 开拓者工具中也毫发不爽有与之对应的遵循,叫“Pause On Caught Exceptions”。要是勾选上此作用,则便是所发出运营时拾叁分的代码在 try/catch 范围内,Chrome 开垦者工具也能够在错误代码处停住。

澳门新萄京官方网站 49

断点其实很轻巧

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

体验:你能够像使用Xcode/AndroidStudio调节和测量检验Native应用一样,来选取Chrome开拓者工具通过断点对先后开始展览调节和测量试验。

图6. 增多按键

不用大体调控台

DevTools 调控台(Console) 能够令你在近年来已中断的情形下张开考查。按 Esc 键展开/关闭调节台。

澳门新萄京官方网站 50

心得:你能够在调节台(Console)上打印变量,奉行脚本等操作。在开辟调节和测验中充裕低价。

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

增进和移除断点

在 Sources 面板的文书导航面板中开发二个JavaScript文件来调整,点击边栏(line gutter) 为当前行设置四个断点,已经设置的断点处会有三个紫色的价签,单击深紫红标签,断点即被移除。

澳门新萄京官方网站 51

加多移除断点

体验:右键点击米黄标签会展开一个菜单,菜单满含以下选项:实践到此(Continue to Here),黑盒脚本(Blackbox scripts),移除断点(Remove Breakpoint), 编辑断点(Edit Breakpoint),和 禁止使用断点(Disable Breakpoint)。在此地您能够对断点进行更加高档的定制化的操作。

澳门新萄京官方网站 52

右键深湖蓝Logo

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

尖端操作

上文讲到右键点击暗褐标签会张开二个菜单,上面就介绍一下该菜单下的高档操作。

奉行到此(孔蒂nue to Here):

即使你想让程序及时跳到某一行时,这几个职能会帮到你。假若在该行在此之前还大概有别的断点,程序会挨个通过前面包车型地铁断点。另外部必要要建议的是以此效应在随便一行代码的边栏(gutter line)前单击右键都会看出。

黑盒脚本(Blackbox scripts):

黑盒脚本会从您的调用仓库中掩盖第三方代码。

编纂断点(Edit Breakpoint):

因此该作用你能够创设一个原则断点,你也足以在边栏(gutter line) 右键并精选丰硕条件断点(Add Conditional Breakpoint) 。在输入框中,输入一个可深入分析为真或假的表达式。仅当法规为真时,施行会在此制动踏板。

澳门新萄京官方网站 53

澳门新萄京官方网站,规范断点

感受:即使你想让程序在某处平昔都毫不暂停,能够编写制定贰个原则恒久为false的尺度断点。其它,你也能够在该行代码的边栏(gutter line)前单击右键选拔“Never pause here”就可以,你会意识“Never pause here”其实就是在该行代码上设了二个千古为false的口径断点。

澳门新萄京官方网站 54

Never pause here

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

治本你的断点

你能够透过Chrome开采者工具的侧边边板来统管你的断点。

澳门新萄京官方网站 55

管制断点

经验:你能够经过断点前的复选框来启用和剥夺断点,也足以单击右键来进行更加多的操作(如:移除断点,移除全数断点,启用禁止使用断点等)。

澳门新萄京官方网站 56

有一种断点叫全局断点

大局断点的意义是,当程序出现十分时,会在老大的地方暂停,那对高效定位异的常地点很有益于。
做iOS开辟的同桌都晓得在Xcode中得以设置全局断点,其实在Chrome 开垦者工具中也大同小异有与之相应的作用,叫“Pause On Caught Exceptions”。借使勾选上此意义,则便是所发出运维时极度的代码在 try/catch 范围内,Chrome 开采者工具也能够在错误代码处停住。

澳门新萄京官方网站 57

全局断点

图7. 红屏错误提醒

毫无忽视调控台

DevTools 调整台(Console) 能够令你在方今已暂停的状态下举行考察。按 Esc 键张开/关闭调整台。

澳门新萄京官方网站 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/

澳门新萄京官方网站 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的节选

进而大家修改代码,

澳门新萄京官方网站 60

图9. 补全Button需求的习性

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

澳门新萄京官方网站 61

图10. 平常化运维

此间还会有一小点值得注意,若是只给Button里的title设了值,而并未有给onPress设置,分界面不会出北京蓝错误,而是在最上面出现一条金棕警告。稳重看,会意识实际上这两性情情的Type不等同。因此可见,当供给的连串是string而实质上是undefined时,会报error,而必要的连串是function而事实上是undefined时,只会报warnning。

与此同期能够看出,在上头的代码中,当开关按下时,会调用一个打log的事件。可是打出的log在哪个地方能够看看啊?

有二种艺术。 第一种是在命令行显示,在档案的次序当前目录(注意,须要求在类型当前目录)再开发银行三个新命令行窗口,输入

澳门新萄京官方网站 62

就足以在最上边看到输出的内容了,它不但能够实时反馈现成的输入,还保存了在此以前的输入。举个例子,上边三回输入,前四遍输入是在前面还尚无拉开那几个命令行窗口时按下的。

澳门新萄京官方网站 63

可能你会想:作者不是想在指令窗口看看输出,而是想能够在浏览器里那样看到输出,乃至断点调节和测量检验。那便是翻开log的第二种艺术。

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

澳门新萄京官方网站 64

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

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

其临时候在浏览器开垦者工具的调节和测量检验窗口,也能见到打出的log。并且它还足以更上一层楼地拓展断点调节和测验。

为越来越好地品尝调试功用,我们修改一下代码,增多一个sayHello方法输出log。

澳门新萄京官方网站 65

图12. 双重绑定onPress事件

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

有如调节和测量检验Web前端代码同样,我们开辟浏览器的开垦者工具,找到代码文件,并在sayHello函数里打二个断点。今年,按动手提式有线电话机上的Test开关,能够看来程序奉行到断点停下了,那与调度网页代码是何等相似:

澳门新萄京官方网站 66

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

然则,与调解纯网页代码有两点分歧。

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

其次,手机上的分界面在程序被断住的情形下,如故能够接收事件。譬如,就在这儿,手提式无线电话机上该选用的分界面表面上没什么影响,可是,假设您再一再按下Test开关,事件都会被记住,到时候会挨个响应。只是今后程序断在了第三遍按下开关的时候。

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

澳门新萄京官方网站 67

图14. 浏览器调节台出口

我们按下了6次,调试工具下也出示出6次输出。那是与调解网页时的两样:当调节和测验网页时,一旦实践到断点,浏览器的页面其实就不行点击了。

到这一步,是否认为使用QashqaiN开辟也从没那么难啊?

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

脚下已经知晓了调护诊疗设置中Remote JS Debugging, Live Reload和 Hot Reloading。相信大家曾经足以比较从容地Debug轻便的 EvoqueN应用了。这里以Windows下的Android为例,其实在Mac下支付iOS也是形似的。

总结

盼望本文的享受对品味RubiconN的菜鸟朋友有所援救。假如大家对下篇想讲的开始和结果有和好的主张,请留言告知自个儿,大家确定会认真思考。

上述就是那篇文章的全部内容了,希望本文的内容对大家的求学或然专门的学业有着一定的参照学习价值,假设有问号大家也足以留言调换,谢谢大家对台本之家的支撑。

你大概感兴趣的篇章:

  • ReactNative踩坑之配备调节和测量试验端口的化解格局
  • React Native 真机断点调节和测验 跨域财富加载出错难点的解决措施

本文由澳门新萄京官方网站发布于澳门新萄京赌场网址,转载请注明出处:澳门新萄京官方网站:Native调节和测量试验本领

关键词: