【澳门葡京】Native应用的一小步,Native基础入门之调试React

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应用。

【澳门葡京】Native应用的一小步,Native基础入门之调试React。提示:生产条件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 开发工具

谷歌(Google) Chrome
开发工具,是按照谷歌(谷歌)浏览器内含的一套网页制作和调节工具。开发者工具允许网页开发者深入浏览器和网页应用程序的中间。该工具得以使得地追踪布局难题,设置
JavaScript 断点并可长远驾驭代码的最优化策略。 Chrome
开发工具一共提供了8大组工具:

  • Element 面板: 用于查看和编制当前页面中的 HTML 和 CSS 元素。
  • Network 面板:用于查看 HTTP
    请求的详细音讯,如请求头、响应头及重回内容等。
  • Source 面板:用于查看和调试当前页面所加载的剧本的源文件。
  • 提姆eLine 面板: 用于查看脚本的实施时间、页面元素渲染时间等音讯。
  • Profiles 面板:用于查看 CPU 执行时间与内存占用等音讯。
  • Resource 面板:用于查看当前页面所请求的资源文件,如 HTML,CSS
    样式文件等。
  • 奥迪(Audi)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
开发工具,是基于谷歌(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”改为你的电脑的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)前单击右键都会面到。

黑盒脚本(布莱克box 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)上打印变量,执行脚本等操作。在支付调试中国和澳大利亚(Australia)常管用。

无须怕,遭遇标题很正规。那时,可以开首细心阅读错误提示,发现它提出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
    真机断点调试+跨域资源加载出错难点的解决办法

相关文章

发表评论

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

*
*
Website