www.22138com「太阳集团游戏」太阳2007娱乐官方网址

欢迎更多朋友与我们www.22138com合作,太阳集团游戏是由安全软件管理软件整合而成的最新安全卫士,其实这是因为目前已经推出了太阳2007娱乐官方网址的新网址,带您体验至尊级享受!。

使用浏览器的调试工具去Debug移动端的代码

2019-09-11 00:49 来源:未知

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

2018/07/04 · JavaScript · React Native

原版的书文出处: 山葫芦城控件   

React Native(以下简称昂CoraN)为理念前端开采者打开了一扇新的大门。当中,使用浏览器的调和工具去Debug移动端的代码,无疑是最吸引开拓职员的特征之一。

试想一下,当您在手提式有线电话机显示器按下七个开关,处理事件的代码就能够及时在浏览器的调试工具里实行断点调试,何况每当你对代码实行修改,分界面便能够成功高效地重载,省去昂长的编译时间,那会是何其升高级技术员作功用。

价值观的Web前端开采职员本来很熟谙浏览器的调节和测量检验工具,可是对于哪些将其在XC60N中央银行使以便和活动端结合起来,恐怕会一定面生。这也改成了一部分开垦者跨入汉兰达N移动支付大门的第一道小秘诀。

本文是作者一边参谋官方文书档案,一边探索TiggoN调节和测量检验进程的笔录。希望能够帮助菜鸟开采者走出一小步,越来越快地迈过那道门槛。

在伊始此前,你需求搭建好本地开采碰到,并有一部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,图标是三个暗中同意的安卓样子。

大家踏入这几个应用,那时即便摇一摇手提式有线话机,会弹出调节和测量检验相关的设置:

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

翻看文档开采,在牧马人N里,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轻松的 宝马X3N应用了。这里以Windows下的Android为例,其实在Mac下支付iOS也是形似的。

希望本文的享受对品味WranglerN的新手朋友有所扶助。若是我们对下篇想讲的始末有和煦的主张,请留言告知自身,大家自然会认真思量。

 

1 赞 收藏 评论

图片 17

版权声明:本文由太阳集团发布于太阳2007娱乐官方网址,转载请注明出处:使用浏览器的调试工具去Debug移动端的代码