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

React Native功底&入门教程:调试React Native应用的一小步

2018/07/04 · JavaScript · React Native

原著出处: 赐紫牛桃城控件   

React Native(以下简单的称呼PRADON)为古板前端开荒者展开了大器晚成扇新的大门。当中,使用浏览器的调理工科具去Debug移动端的代码,无疑是最吸引开荒职员的特色之后生可畏。

试想一下,当你在小叔子大显示屏按下叁个开关,处监护人件的代码就能够即时在浏览器的调理工科具里开展断点调节和测验,何况每当你对代码进行改过,分界面便得以做到高效地重载,省去昂长的编写翻译时间,那会是何其进步级程序员作功能。

人生观的Web前端开拓人士本来很熟练浏览器的调节和测量检验工具,但是对于什么将其在奇骏N中央银行使以便和活动端结合起来,大概会一定素不相识。那也改成了有个别开拓者跨入CR-VN手机支付大门的首先道小秘诀。

本文是作者风度翩翩边仿照效法官方文书档案,风流罗曼蒂克边探索RAV4N调节和测量试验进程的笔录。希望能够扶植生手开采者走出一小步,越来越快地迈过那道门槛。

在始发从前,你须要搭建好地点开荒条件,并有意气风发部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端口举行了某种映射,使真机上的利用和大家就要调试的代码创设了动态的关联。那几个进程会比较消耗开荒者计算机的系统能源,耐心等待瞬就好。

必威手机官网 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代码。

查阅文书档案开采,在XC60N里,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 Sampling Profiler和Dev Settings,我们一时半刻能够不用管它们。

日前早就精通了调护医治设置中Remote JS Debugging, Live Reload和 Hot Reloading。相信我们已经能够相比较从容地Debug轻松的 EnclaveN应用了。这里以Windows下的Android为例,其实在Mac下支付iOS也是平日的。

但愿本文的享用对品味昂科雷N的生手朋友有所帮忙。如若我们对下篇想讲的从头到尾的经过有本人的主见,请留言告知作者,大家终将会认真构思。

 

1 赞 收藏 评论

必威手机官网 17

恐怕是因为各类 Reloading过于强盛,它不常会出一些标题,比方在开启Live Reload也许Hot Reloading后,不经常代码错误时手提式有线电电话机上弹出的红屏分界面在代码改刚巧后依旧无法恢复,这种时候,就要求手动Reload界面技能消除。

巧用Sources面板

Sources 面板提供了调治 JavaScript 代码的成效。它提供了图形化的V8 调节和测试器。

必威手机官网 18

Sources 面板能够让您见到您所要检查的页面的装有脚本代码,并在面板选用栏下方提供了朝气蓬勃组正式控件,提供了脚刹踏板,恢复生机,步进等功用。在窗口的最下方的按键能够在蒙受特别(exception)时强制中止。源码显示在独立的标签页,通过点击 张开文件导航面板,导航栏中会突显全部已开辟的脚本文件。

心得:Chrome开辟着工具中的Sources面板大约是自己最常用的效能面板。平时假若是开荒遭受了js报错恐怕其余代码难点,在审美三遍本人的代码而一无所获之后,作者首先就能展开Sources举行js断点调节和测量试验。

查阅文书档案件发生掘,在哈弗N里,Button组件有众多属性,当中onPress和title那四个属性是required的,也正是必定要有。

增加和移除断点

在 Sources 面板的文件导航面板中展开四个JavaScript文件来调整,点击边栏(line gutter) 为当前进设置二个断点,已经安装的断点处会有三个杏红的标签,单击金棕标签,断点即被移除。

必威手机官网 19

体会:右键点击栗色标签会展开叁个美食指南,菜单包括以下选项:实施到此(Continue to Here),黑盒脚本(Blackbox scripts),移除断点(Remove Breakpoint), 编辑断点(艾德it Breakpoint),和 禁止使用断点(Disable Breakpoint)。在这里处您能够对断点举办越来越高端的定制化的操作。

必威手机官网 20

必威手机官网 21

在做React Native开荒时,少不了的必要对React Native程序举办调度。调节和测量试验程序是每一人开垦者的底子,高效的调和不仅可以加强开荒作用,也能减低Bug率。本文将向大家分享React Native程序调试的风度翩翩对本事和体会。

而且,可以看看原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程序。

必威手机官网 22

Warnings

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

必威手机官网 23

Warnings.png

升迁:在生育条件release (production)下Errors和Warnings功能是不可用的。

当Metro Bundler窗口显示index.js的照耀进程达到百分之百时,手机上就足以看看暗中认可的施用分界面了。

小技巧:Automatic reloading

于是我们改进代码,

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

在该“http://localhost:8081/debugger-ui.”Tab页下开垦开垦者工具。展开Chrome菜单->接受越来越多工具->选拔开采者工具。你也得以因而快速键(Command⌘

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

必威手机官网 24

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

必威手机官网 25

期待本文的享用对品味本田UR-VN的生手朋友有所扶持。假使我们对下篇想讲的内容有谈得来的主见,能够加大家的QQ群一齐交换学习: 936903570 备注简书。
Reload js

Reload js就要你项目中js代码部分重新生成bundle,然后传输给模拟器或手机。
在Developer Menu中有Reload选项,单击Reload让React Native重新加载js。对于iOS模拟器你也足以通过Command⌘ + R飞速键来加载js,对于Android模拟器能够经过双击r键来加载js。

提醒:倘使Command⌘ + 瑞虎无法使您的iOS模拟器加载js,则能够通过选中Hardware menu中Keyboard选项下的 “Connect Hardware Keyboard” 。

何况能够看出,在上头的代码中,当开关按下时,会调用七个打log的风浪。不过打出的log在何方能够看出啊?

Enable Live Reload

必威手机官网 26

Enable Live Reload.gif

React Native目的在于为开辟者带给一个更加好的开销体验。倘诺你以为上文的加载js代码形式太low了大概相当不够便利,那么有没有朝气蓬勃种更简便易行加载js代码的方法啊?
答案是一定的。
在 Developer Menu中您会看到”Enable Live Reload” 选项,该接收提供了React Native动态加载的法力。当你的js代码发生变化后,React Native会自动生成bundle然后传输到模拟器或手提式有线话机上,是否认为很有利。

大家步入这几个利用,当时若是摇生龙活虎摇手提式有线电话机,会弹出调节和测量试验相关的安装:

查看js文件

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

必威手机官网 27

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

真机调节和测验

运作项目标法子,正是跻身DebugTest项目目录,那个时候施行命令行react-native run-android。注意,这里运维时会新弹出另三个窗口,用于在8081端口运行二个称呼Metro Bundler的劳动,那些窗口在付出时是内需保持运转着的。

Errors and Warnings

在development方式下,js部分的Errors 和 Warnings会直接打字与印刷在四哥大或模拟器荧屏上,以红屏和黄屏体现。

以这时候,保存代码。手提式有线电话机分界面确实立时就变化了!表明Live Reload确实生效了。

第一步:运营远程调试

在Developer Menu下单击”Debug JS Remotely” 运营JS远程调节和测验功用。那时Chrome会被展开,同时会成立八个“http://localhost:8081/debugger-ui.” Tab页。

必威手机官网 28

必威手机官网 29

Developer Menu

Developer Menu是React Native给开采者定制的八个开采者菜单,来协助开荒者调节和测量试验React Native应用。

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

至于Toggle Inspector, Show Perf Monitor, Start/Stop 山姆pling Profiler和Dev Settings,大家前段时间能够不用管它们。

毫不概略调节台

DevTools 调控台(Console) 能够令你在前段时间已暂停的情形下张开考查。按 Esc 键展开/关闭调整台。

必威手机官网 30

体会:你能够在调控台(Console)上打字与印刷变量,施行脚本等操作。在支付调节和测量试验中特别有效。

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

图9. 补全Button必要的个性

在模拟器上展开Developer Menu

Android模拟器:
能够由此Command⌘ + M飞快键来非常的慢张开Developer Menu。也能够经过模拟器上的菜单键来开采。

心得:高版本的模拟器常常未有菜单键的,可是Nexus S上是有菜单键的,倘使想采用菜单键,能够创造七个Nexus S的模拟器。

iOS模拟器:
可以透过Command⌘ + control + z飞速键来火速展开Developer Menu。

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

断点其实很简短

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

经历:你能够像使用Xcode/AndroidStudio调节和测量检验Native应用相似,来行使Chrome开拓者工具通过断点对程序开展调节。

此间还会有一丝丝值得注意,假诺只给Button里的title设了值,而从未给onPress设置,分界面不会出铁青错误,而是在最上面出现一条灰绿警示。留心看,会意识实际那四个属性的Type差别样。因此可见,当供给的品种是string而实质上是undefined时,会报error,而急需的种类是function而其实是undefined时,只会报warnning。

实施控工具

从上海体育场所能够观察“实践控工具”按键在侧板顶上部分,让您能够按步实践代码,当您进行调节和测量检验的时候那多少个按键特别实用:

  • 后续(Continue): 继续实行代码直到碰到下三个断点。
  • 单步施行(Step over): 步进代码以查看每少年老成行代码对变量作出的操作,现代码调用另贰个函数时不会进去这些函数,让你能够小心于如今的函数。
  • 跳入(Step into): 与 Step over 相符,不过今世码调用函数时,调试器会进来这一个函数并跳转到函数的首先行。
  • 跳出(Step out): 当你走入一个函数后,你能够点击 Step out 实施函数余下的代码并跳出该函数。
  • 断点切换(Toggle breakpoints): 调控断点的张开和停业,同临时间保持断点完好。

必威手机官网 31

在iOS上

开拓”RCTWebSocketExecutor.m “文件,将“localhost”改为您的微电脑的ip,然后在Developer Menu下单击”Debug JS Remotely” 运维JS远程调节和测验成效。

何况,大家也得以脱离应用,在四弟大的桌面上找到这么些装置好的行使。这里,它的名字便是DebugTest,Logo是一个暗中认可的安卓样子。

在真机上展开Developer Menu

在真机上你能够因此摆荡手提式有线话机来拉开Developer Menu。
预览图

必威手机官网 32

Developer Menu.jpg

图10. 常规运作

Errors

React Native程序运转时现身的Errors会被直接显示在显示器上,以天蓝的背景展示,并会打字与印刷出错误信息。 你也足以透过 console.error()来手动触发Errors。

必威手机官网 33

Errors.png

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

Hot Reloading

必威手机官网 34

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做布局的实时预览相媲美。

先看看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是当程序正在运作时去热乎乎地轮换。

在Android上

方式一:
在Android5.0以上设备上,将手提式有线电话机通过usb连接到你的Computer,然后经过adb命令行工具运维如下命令来安装端口转载。
adb reverse tcp:8081 tcp:8081
方式二:
你也足以经过在“Developer Menu”下的“Dev Settings”中装置你的计算机ip来开展调节和测量检验。

体验:在应用真机调试时,你供给确定保证您的无绳话机和微机处在同二个网段内,即它们其实同叁个路由器下。

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

如何通过 Chrome调节和测验React Native程序

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

图6. 加多开关

Chrome Developer Tools

本文由必威发布于必威-前端,转载请注明出处:使用浏览器的调试工具去Debug移动端的代码必威手

相关阅读