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的新手朋友有所支持。若是大家对下篇想讲的始末有和好的想法,请留言告知自己,大家肯定会认真考虑。

 

Native应用的一小步,Native基础入门之调试React。 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 开发工具

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

  • Element 面板: 用于查看和编辑当前页面中的 HTML 和 CSS 元素。
  • Network 面板:用于查看 HTTP
    请求的详细新闻,如请求头、响应头及再次回到内容等。
  • Source 面板:用于查看和调节当前页面所加载的台本的源文件。
  • 提姆eLine 面板: 用于查看脚本的实施时间、页面元素渲染时间等音信。
  • Profiles 面板:用于查看 CPU 执行时间与内存占用等音信。
  • Resource 面板:用于查看当前页面所请求的资源文件,如 HTML,CSS
    样式文件等。
  • Audits 面板:用于优化前端页面,加快网页加载速度等。
  • 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
开发工具,是根据谷歌浏览器内含的一套网页制作和调节工具。开发者工具允许网页开发者深切浏览器和网页应用程序的中间。该工具得以使得地追踪布局难题,设置
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地图