威尼斯人线上娱乐

Native基础入门之调试React,Native应用的一小步

6 2月 , 2019  

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. 默许使用界面

Native基础入门之调试React,Native应用的一小步。与此同时,大家也可以脱离应用,在小弟大的桌面上找到这些设置好的运用。那里,它的名字就是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 Sampling
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,然后传输给模拟器或手机。
在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 面板:用于查看和调节当前页面所加载的本子的源文件。
  • 提姆eLine 面板: 用于查看脚本的施行时间、页面元素渲染时间等消息。
  • 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 开发工具

谷歌(谷歌(Google)) Chrome
开发工具,是依照谷歌(Google)浏览器内含的一套网页制作和调试工具。开发者工具允许网页开发者长远浏览器和网页应用程序的中间。该工具得以有效地追踪布局难点,设置
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),黑盒脚本(布莱克box 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 萨姆pling
Profiler和Dev Settings,大家临时能够不用管它们。

当前曾经了然了调剂设置中Remote JS Debugging, Live Reload和 Hot
Reloading。相信大家早就可以相比从容地Debug简单的
RN应用了。那里以Windows下的Android为例,其实在Mac下开发iOS也是相似的。

总结

仰望本文的享用对品味RN的新手朋友有所接济。如若我们对下篇想讲的内容有温馨的想法,请留言告知我,大家终将会认真考虑。

以上就是那篇小说的全部内容了,希望本文的情节对我们的求学或者干活具有一定的参阅学习价值,假诺有问号大家也得以留言互换,谢谢我们对台本之家的支撑。

你或许感兴趣的稿子:

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


相关文章

发表评论

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

网站地图xml地图