Native基础入门之调试React,Native调试技巧与感受

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

2018/07/04 · JavaScript
· React Native

原稿出处:
葡萄城控件   

React
Native(以下简称RN)为传统前端开发者打开了一扇新的大门。其中,使用浏览器的调节工具去Debug移动端的代码,无疑是最吸引开发人士的性状之一。

试想一下,当您在大哥大显示器按下一个按钮,处管事人件的代码就可以立时在浏览器的调剂工具里举行断点调试,而且每当你对代码进行改动,界面便足以做到高效地重载,省去昂长的编译时间,那会是多么提升工作成效。

价值观的Web前端开发人员本来很熟练浏览器的调剂工具,然而对于怎么将其在RN中采纳以便和活动端结合起来,也许会一定陌生。那也化为了一部分开发者跨入RN移动支付大门的率先道小窍门。

本文是小编一边参考官方文档,一边摸索RN调试进程的笔录。希望能够帮助新手开发者走出一小步,更快地迈过那道门槛。

在开头以前,你必要搭建好当地开发环境,并有一部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的投射进程达到100%时,手机上就能够观察默认的运用界面了。

美高梅开户网址 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代码。

翻开文档发现,在RN里,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次输出。那是与调节网页时的差异:当调试网页时,一旦推行到断点,浏览器的页面其实就不得点击了。

到这一步,是或不是认为使用RN开发也并未那么难啊?

关于Toggle Inspector, Show Perf Monitor, Start/Stop 萨姆pling
Profiler和Dev Settings,我们临时可以不用管它们。

当前早就通晓了调剂设置中Remote JS Debugging, Live Reload和 Hot
Reloading。相信我们早已得以比较从容地Debug简单的
RN应用了。那里以Windows下的Android为例,其实在Mac下支付iOS也是相似的。

可望本文的享用对品味RN的新手朋友有所支持。如果大家对下篇想讲的内容有投机的想法,请留言告知我,大家肯定会认真考虑。

 

1 赞 收藏
评论

美高梅开户网址 17

React
Native(以下简称RN)为观念前端开发者打开了一扇新的大门。其中,使用浏览器的调试工具去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前端开发人士本来很熟习浏览器的调试工具,可是对于什么将其在RN中运用以便和运动端结合起来,也许会一定陌生。那也变为了一些开发者跨入RN移动支付大门的首先道小秘诀。

怎么样打开Developer Menu

Developer Menu

Developer Menu是React
Native给开发者定制的一个开发者菜单,来增援开发者调试React Native应用。

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

正文是作者一边参考官方文档,一边摸索RN调试过程的记录。希望可以辅助新手开发者走出一小步,更快地迈过那道门槛。

在模拟器上打开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,然后传输给模拟器或手机。
Native基础入门之调试React,Native调试技巧与感受。在Developer Menu中有Reload选项,单击Reload让React
Native重新加载js。对于iOS模拟器你也足以因而Command⌘ + R神速键来加载js,对于Android模拟器可以经过双击r键来加载js。

唤醒:若是Command⌘ + R
不可能使你的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端口举行了某种映射,使真机上的运用和大家即将调试的代码建立了动态的关系。那几个历程会相比消耗开发者电脑的系统资源,耐心等待一会儿就好。

Chrome 开发工具

谷歌(谷歌) 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的映射进程达到100%时,手机上就足以看看默许的运用界面了。

其次步:打开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 开发工具

谷歌 Chrome
开发工具,是按照谷歌(谷歌)浏览器内含的一套网页制作和调试工具。开发者工具允许网页开发者深切浏览器和网页应用程序的里边。该工具得以有效地追踪布局难点,设置
JavaScript 断点并可深刻明白代码的最优化策略。
Chrome 开发工具一共提供了8大组工具:

  • Element 面板: 用于查看和编排当前页面中的 HTML 和 CSS 元素。
  • Network 面板:用于查看 HTTP
    请求的详细音讯,如请求头、响应头及再次回到内容等。
  • Source 面板:用于查看和调剂当前页面所加载的台本的源文件。
  • 提姆eLine 面板: 用于查看脚本的履行时间、页面元素渲染时间等音信。
  • 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”改为你的电脑的ip,然后在Developer Menu下单击”Debug
JS Remotely” 启动JS远程调试作用。

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

查看js文件

假诺您想在开发者工具上预览你的js文件,可以在开拓Sources
tab下的debuggerWorker.js选项卡,该选项卡下会显示当前调试项目的拥有js文件。

美高梅开户网址 40

在Android上

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

黑盒脚本会从您的调用堆栈中隐藏第三方代码。

编制断点(Edit 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

右键黑色图标

这一个时候,保存代码。手机界面确实立时就转变了!表明Live
Reload确实生效了。

尖端操作

上文讲到右键点击紫色标签会打开一个菜单,上面就介绍一下该菜单下的高级操作。

推行到此(Continue 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

翻看文档发现,在RN里,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发布APP之签名打包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次输出。那是与调节网页时的不等:当调试网页时,一旦实施到断点,浏览器的页面其实就不得点击了。

到这一步,是或不是认为使用RN开发也尚未那么难吗?

关于Toggle Inspector, Show Perf Monitor, Start/Stop Sampling
Profiler和Dev Settings,大家临时可以不用管它们。

当下已经领悟了调剂设置中Remote JS Debugging, Live Reload和 Hot
Reloading。相信大家曾经足以相比较从容地Debug不难的
RN应用了。那里以Windows下的Android为例,其实在Mac下开发iOS也是一般的。

总结

但愿本文的享受对品味RN的新手朋友有所帮忙。假若大家对下篇想讲的始末有温馨的想法,请留言告知我,我们终将会认真考虑。

如上就是那篇文章的全体内容了,希望本文的始末对大家的上学或者工作富有自然的参照学习价值,假若有疑点我们也足以留言调换,谢谢咱们对剧本之家的支持。

您可能感兴趣的文章:

  • ReactNative踩坑之配备调试端口的缓解措施
  • React Native
    真机断点调试+跨域资源加载出错难点的缓解方法

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图