【澳门新萄京8522】React Native调节和测试技巧与体验

【澳门新萄京8522】React Native调节和测试技巧与体验

Chrome开发者工具不完全指南(二、进阶篇)

2015/06/23 · HTML5 · 3
评论 ·
Chrome

原稿出处:
卖烧烤夫斯基   

上篇向我们介绍完了基础效率篇,这一次分享的是Chrome开发工具中最得力的面板Sources
 Sources面板差不离是本人最常用到的Chrome功效面板,也是以小编之见决解一般难点的严重性功能面板。常常借使是支付遭受了js报错也许其余代码难题,在审视一回本身的代码而一无全部之后,我首先就会打开Sources开始展览js断点调节和测试,而它也大约能化解自个儿8/10的代码难题。Js断点那一个成效令人高兴不已,在未有js断点功效,只能在IE(万恶的IE)中靠alert弹出窗口调节和测试js代码的1世(越发alert2个object根本不会理你),那样的支出条件对于前端程序员来说几乎是一场恶梦。本篇小说讲会介绍Sources的有血有肉用法,扶助各位在支付进度中够欢腾地调节和测试js代码,而不是因它而发狂。首先打开F1贰开发工具切换成Sources面板中:

澳门新萄京8522 1

Sources成效面板是财富面板,他首要分为多个部分,七个部分并不是独立的,他们互相关联,互动共同促成3个器重的效益:监察和控制js在执行期的移位。不难的话便是断点啊。

率先我们来看区域一,它的成效某个看似于Resources面板,主借使显示网页加载的本子文件:例如css,
js等能源文件(它不包蕴cookie,img等静态能源文件)。

 

澳门新萄京8522 2

 

 

 

区域一的导航条上有八个tab切换选项,他们都存有例外域名和环境下的js和css文件,我们先是来申明Sources(财富)选项的作用:

Sources:
包罗该类型的静态财富文件。双击选普通话件,该文件内容会在区域第22中学彰显,借使您选中的是js文件,那么你能够在区域二种单击行号进行断点调节和测试,只要js执行到了你所标记的那壹行,它会告一段落向下实施并且等待你的吩咐:

澳门新萄京8522 3

从上海教室能够看出js执行到断点处时各个地方的变型,首先是区域三中的Breakpoints笔录音信会变高亮,然后是区域肆中Scope 慎选中列出了断点处私有和国有的变量消息,那样,笔者能够很直观地明白,此时此刻js的履行情况。同样的,你能够把鼠标放到区域2种的有个别变量上,浏览器会弹出三个小框框,框框里面则是您悬浮其上的变量全数消息:

 

澳门新萄京8522 4

下一场,你能够按F10随即js执行的不二诀窍一步一步地走下去,倘若你蒙受了二个函数包括着其余三个函数,那么你能够按F11跻身到个函数中去旁观它的代码执行活动。你也得以因此点击区域壹底层的相继图标对js代码进行跟踪。可是作者提出您使用急迅键,故名思义,因为它相比较急速便宜。不过怎么用完全遵照个人习惯来吗。下图是各类按钮的成效意义。

 

澳门新萄京8522 5

 

 在上海教室青色圆圈中数字,它们分别表示:

  一、甘休断点调节和测试

  2、不跳入函数中去,继续执行下壹行代码(F十)

  三、跳入函数中去(F11)

  四、从进行的函数中跳出

  五、禁止使用全体的断点,不做其余调节和测试

  陆、程序运转时蒙受尤其时是否中断的开关

接下去在区域肆种切换成Watch
Expressions
 选项,它的机能是为近来断点添加表达式,使得每一回断点往下走一步都会履行你写下的js代码。须求小心的是以此效应亟须如履薄冰运用,因为那只怕会导致你写下的督察代码段会不断地被执行。

澳门新萄京8522 6

 

为了幸免你的调剂代码重复执行,大家得以在调节和测试时一向在console控制台上三次性地出口当前断点处的音信(推荐那样做)。为了表明大家在console面板中持有的是眼下断点环境,小编门能够对照断点执行前后的this值变化。

澳门新萄京8522 7   
  澳门新萄京8522 8

假若你认为在断点的时候为了看一个变量必须借用console面板输出的主意来查看会相比较费心,那么您可以立异最新版的Chrome,它已经为大家缓解了那些烦恼。为了便利开发者调节和测试,在那或多或少上谷歌(谷歌)早已到位了最为,就在前日更新过Chrome现在,卤煮意各市意识了断点时监察和控制环境变量的其余一种办法,那种办法极为清晰,在断点调试的时候,区域2中会自动彰显每种变量的值,每一趟代码往下走的时候这么些值都回时时更新。那让开发者对方今环境变量大约能够说是侦查破案。(此意义有多少个小瑕疵,那正是无力回天查看数组恐怕目的的现实索引和值,不过自身深信google会革新它的。)

澳门新萄京8522 9

 

当你的品种曾经线上,出现了多个bug,你修复了后头不也许看到它真的在线上的功用,那么您能够在开拓线上的种类,直接在浏览器中期维修改代码然后看到效果。那样的作用往往是最直白的,那种措施也能帮你省去频仍验证发布的分神,毕竟身为前端码农的你也自然会听到过后台(平日状态下是后台宣布)堂弟的埋怨:“XXX,测试通过了没,不要出现了哈,公布2遍很麻烦的!”。而在Chrome里面,只需求在区域二种直接修改,你就足以证实你的代码在线上是或不是行得通。卤煮在此间只是提议该成效的用法之壹。别的的就凭诸位的聪明才智去想了。

澳门新萄京8522 10   
 
  澳门新萄京8522 11

固然在断点时,你也足以编写制定代码,按ctrl+S保存之后,你会晤到区域2的背景由淡褐变为浅色,而断点会重新伊始举行。

回去区域1,Content
script
 选项开里面包涵着部分第二方插件或然浏览器自己的js代码,经常它是被忽视的,实际上它的效果很少。大家可以更加多关怀一下Snippets分选。还记得基础篇里面介绍的style啊?在里边大家能够编写制定界面包车型地铁css代码并且即时见到它们的照耀效果,同样地,在Sinppets中,大家也
能够编写(重写)js代码片段。这几个部分其实就一定于你的js文件一律,不相同的是地面包车型大巴js文件在编辑器里面编辑的,而那里,你是在浏览器中编辑的。那几个代码片段在浏览器刷新的时候既不会化为乌有,也不会履行,除非是你手动执行它。它能够存在你的地头浏览器中,尽管关闭浏览器,再度打开时它依旧还在那边。它的严重性作用能够使得大家编辑一些门类的测试代码时提供便利,你了然,假设您在编辑器上编写制定那些代码,在发表时您不能够不为它们增长注释符号或许手动删除它们,而在浏览器上编写制定就不必要那样麻烦了。

Snippets慎选的空白点右键后选择弹出的new选项,建立2个你协调的新的公文,然后在区域贰种编辑它。

澳门新萄京8522 12

 

Snippets 的老大功效强大,它的累累隐藏成效还有待挖掘。近年来卤煮使用它是在挥之不去调节和测试片段、单元测试、少量的职能代码编写作用上。

最终大家看看js中时间累加的监督检查成效,同上篇小说介绍的如出1辙,Sources面板和Elements面板1样有监察和控制事件的成效,而且Sources中成效进一步助长,也进一步强劲。它的那有的功能集中在区域三中。作者以下图为例,观看其作用。

澳门新萄京8522 13

 

从上到下,北京蓝圈内的数字的意思:

壹、断点处的债堆栈,正是从该函数起,逐级追寻调用到他的函数名。例如:

JavaScript

function a () { b(); } function b() { c(); } function c() {
//在该处断点,查看call stack } a->b->c. call stack
从上到下的各样就是 c b a

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function a () {
   b();
}
function b() {
   c();  
}
function c() {
  //在该处断点,查看call stack  
}
a->b->c.
call stack 从上到下的顺序就是
c
b
a

二、在区域第22中学你的断点调节和测试新闻。当有个别断点在执行的时候对应的新闻会高亮,双击该处新闻方可在区域第22中学飞速稳定。

叁、添加的Dom监察和控制音讯。

四、击+ 并输入 UCRUISERL 包括的字符串即可监听该 U奥迪Q5L 的 Ajax
请求,输入内容就也正是 U福特ExplorerL 的过滤器。要是什么都不填,那么就监听全部 XHOdyssey请求。壹旦 XH途睿欧 调用触发时就会在 request.send() 的地点暂停。

5、为网页添加种种类型的断点消息。如选中了Mouse中的某一项(click),当你在网页上出发那么些动作(单击网页任意地点),你浏览器正是即时断点监控该事件。

 

值得再度重新一回,Sources是相似的职能开发中最常用到也是最实用的效用面板,它里面包车型地铁不在少数意义对于大家付出前端工程以来是可怜有赞助的。在web二.0时代的明日,笔者不引入依旧在协调的代码里面写调节和测试新闻的行事,因为那会然你的开发变得繁琐。Chrome开发工具给大家提供的兵不血刃功能,大家应该好好利用之。那篇小说就到此甘休,就算有个别麻烦,但毕竟基本发挥了卤煮使用经验和想方设法,希望对您有救助。如若您以为不错,请推荐一下本文并持续关切卤煮在的博客。在下1篇中自笔者将向我们介绍Chrome开发工具中的质量方面包车型地铁调节和测试。

1 赞 15 收藏 3
评论

澳门新萄京8522 14

值得再一次重复贰次,Sources是相似的遵从开发中最常用到也是最得力的效果面板,它在那之中的不少成效对于我们开发前端工程以来是10分有协理的。在web二.0一代的前日,作者不引入还是在自个儿的代码里面写调节和测试新闻的行为,因为那会然你的支出变得繁琐。Chrome开发工具给大家提供的有力功效,我们应有好好利用之。那篇小说就到此结束,尽管有个别麻烦,但到底基本发挥了卤煮使用经验和设法,希望对您有协理。若是你觉得不错,请推荐一下本文并卫冕关心卤煮在的博客。在下一篇中本身将向大家介绍Chrome开发工具中的质量方面包车型大巴调剂。

Chrome Developer Tools

Chrome 开发工具

谷歌(谷歌(Google))Chrome开发工具,是基于谷歌(Google)浏览器内含的1套网页制作和调剂工具。开发者工具允许网页开发者深刻浏览器和网页应用程序的当中。该工具得以有效地追踪布局难点,设置
JavaScript
断点并可深刻理解代码的最优化策略。Chrome开发工具1共提供了八大组织工作具:

  • Element 面板: 用于查看和编写制定当前页面中的 HTML 和 CSS 成分
  • Network 面板:用于查看 HTTP
    请求的详细音信,如请求头、响应头及重回内容等
  • Source 面板:用于查看和调剂当前页面所加载的本子的源文件
  • 提姆eLine 面板: 用于查看脚本的实践时间、页面成分渲染时间等新闻
  • Profiles 面板:用于查看 CPU 执行时间与内存占用等音讯
  • Resource 面板:用于查看当前页面所请求的能源文件,如 HTML,CSS
    样式文件等
  • 奥迪(Audi)ts 面板:用于优化前端页面,加快网页加载速度等
  • Console 面板:用于体现脚本中所输出的调节和测试音讯,或运转测试脚本等

注意: 对于调节和测试React
Native应用来说,Sources和Console是应用作用最高的三个工具

您能够像调节和测试JavaScript代码壹样来调节你的React Native程序

在模拟器上打开Developer Menu

Android模拟器:
可以通过Command⌘ + M火速键来相当的慢打开Developer
Menu。也足以由此模拟器上的菜单键来开辟。

感受:高版本的模拟器平时未有菜单键的,然而Nexus
S上是有菜单键的,假使想行使菜单键,能够创制二个Nexus S的模拟器。

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

js断点作用让人欢喜不已,在此在此以前只可以在IE中靠alert弹出窗口调节和测试js代码,那样的支出条件对于前端程序员来说大约是一场惊恐不已的梦。本篇介绍Sources的现实性用法,协助各位在付出进程中够快乐地调节和测试js代码,而不是因它而疯狂。

Error

React
Native程序运行时出现的Error会被一贯体今后显示屏上,以革命的背景展示,并会打字与印刷出错误新闻,
你也得以通过 console.error()来手动触发Error

img

注意: 在生育条件release下Error和Warning作用不在生效

Developer Menu

Developer Menu是React
Native给开发者定制的三个开发者菜单,来赞助开发者调试React Native应用。

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

率先打开F12开发工具切换成Sources面板中

Warning

React
Native程序运维时出现的Warnings也会被直接映未来显示器上,以色情的背景显示,并会打字与印刷出警示讯息,你也足以经过console.warn()来手动触发Warnings,你也能够经过console.disableYellowBox = true来手动禁止使用Warnings的展现,可能经过console.ignoredYellowBox = ['Warning: ...']来忽略相应的Warning

img

巧用Sources面板

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

澳门新萄京8522 15

Sources
面板可以让您看到您所要检查的页面包车型大巴全数脚本代码,并在面板选取栏下方提供了壹组正式控件,提供了中断,复苏,步进等功能。在窗口的最下方的按钮能够在遭遇尤其(exception)时强制中止。源码呈现在单身的标签页,通过点击
打开文件导航面板,导航栏中会展现全体已开拓的台本文件。

感受:Chrome开发着工具中的Sources面板大概是自个儿最常用的功效面板。平时若是是支付遭逢了js报错大概别的代码难题,在审美1遍本身的代码而四壁萧条之后,笔者首先就会打开Sources进行js断点调节和测试。

澳门新萄京8522 16

怎么着通过Chrome调节和测试React Native程序

  • 起步远程调节和测试

在Developer Menu下单击’Debug JS
Remotely’运行JS远程调节和测试成效,此时Chrome会被打开,同时会创造三个’http://localhost:8081/debugger-ui’网页

image

  • 打开Chrome开发者工具

在该’http://localhost:8081/debugger-ui’网页下打开开发者工具,打开Chrome菜单->选用越多工具->选用开发者工具。你也得以由此神速键(Command⌘ + Option⌥ + I
on Mac, Ctrl + Shift + I on Windows)打开开发者工具

开拓Chrome开发着工具之后你会面到如下界面

image

真机调试

?

断点

断点(Breakpoint)是在本子中设置好的暂停处,在DevTools中行使断点能够调节和测试JavaScript代码

  • 拉长和移除断点

在 Sources
面板的文书导航面板中打开二个JavaScript文件来调节,点击边栏(line gutter)
为当前行设置三个断点,已经安装的断点处会有二个黄色的标签,单击桔棕标签,断点即被移除

image

右键点击青黄标签会打开2个食谱,菜单包蕴以下选项:执行到此(Continue to
Here),黑盒脚本(Blackbox scripts),移除断点(Remove Breakpoint),
编辑断点(Edit Breakpoint),和 禁用断点(Disable
Breakpoint)。在那边您能够对断点实行更加尖端的操作

image

尖端操作

  • Continue to Here

若是你想让程序及时跳到某壹行时,那一个职能会帮到你。即使在该行此前还有别的断点,程序会挨个通过前边的断点。其余部必要要提议的是其一意义在四意一行代码的边栏(gutter
line)前单击右键都会师到

  • Blackbox scripts

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

  • Edit Breakpoint

通过该意义你能够创设1个规则断点,你也能够在边栏(gutter line)
右键并精选丰富条件断点(Add Conditional Breakpoint)
。在输入框中,输入四个可解析为真或假的说明式。仅当条件为真时,执行会在个中断

image

若果您想让程序在某处一直都毫不暂停,能够编写制定贰个规范永远为false的标准化断点。其余,你也足以在该行代码的边栏(gutter
line)前单击右键选用“Never pause here”即可,你会发现“Never pause
here”其实正是在该行代码上设了一个千古为false的基准断点

image

管理断点

你能够因此Chrome开发者工具的左边面板来归并保管你的断点

image

你能够通过断点前的复选框来启用和剥夺断点,也得以单击右键来开始展览更加多的操作(如:移除断点,移除全数断点,启用禁止使用断点等)

大局断点

全局断点的作用是,当程序现身相当时,会在老大的地方暂停,那对便捷定位异的常地点很方便。
做iOS开发的同校都知晓在Xcode中能够安装全局断点,其实在Chrome
开发者工具中也同样有与之相应的法力,叫’Pause On Caught
Exceptions’。假如勾选上此意义,则正是所发出运转时卓殊的代码在 try/catch
范围内,Chrome 开发者工具也能够在错误代码处停住

image

查看js文件

一经您想在开发者工具上预览你的js文件,能够在打开Sources
tab下的debuggerWorker.js选项卡,该选项卡下会展现当前调节和测试项指标具备js文件。

澳门新萄京8522 17

从上到下,北京蓝圈内的数字的意义:

什么真机调节和测试

  • iOS上

安顿好相应的调剂证书,直接连接线连接到真机械运输营即可

  • android

摇晃手提式有线电话机,调出Developer Menu面板,在’Developer Menu’下的’Dev
Settings’中Debug server host & prot for
device配置本身路由器ip地址。端口使用80八1即可

image

image

在Android上

方式一:
在Android5.0上述设备上,将手机通过usb连接到你的处理器,然后通过adb命令行工具运转如下命令来设置端口转载。
adb reverse tcp:8081 tcp:8081
方式二:
您也得以透过在“Developer Menu”下的“Dev
Settings”中安装你的微机ip来展开调节。

经验:在使用真机调节和测试时,你必要确认保证您的手提式有线电话机和电脑处在同八个网段内,即它们其实同2个路由器下。

二、不跳入函数中去,继续执行下一行代码(F10)

控制台

DevTools控制台(Console)能够让你在近期已中断的情事下展开考察。按 Esc
键打开/关闭控制台

您能够在控制台(Console)上打字与印刷变量,执行脚本等操作。在支付调节和测试中最常用

image

澳门新萄京8522,Chrome 开发工具

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

  • Element 面板: 用于查看和编写制定当前页面中的 HTML 和 CSS 成分。
  • Network 面板:用于查看 HTTP
    请求的详细新闻,如请求头、响应头及再次回到内容等。
  • Source 面板:用于查看和调剂当前页面所加载的脚本的源文件。
  • TimeLine 面板: 用于查看脚本的进行时间、页面成分渲染时间等音信。
  • Profiles 面板:用于查看 CPU 执行时间与内存占用等音信。
  • Resource 面板:用于查看当前页面所请求的财富文件,如 HTML,CSS
    样式文件等。
  • 奥迪ts 面板:用于优化前端页面,加快网页加载速度等。
  • Console 面板:用于展现脚本中所输出的调节和测试音信,或运营测试脚本等。

提醒:对于调节和测试React
Native应用来说,Sources和Console是应用频率很高的八个工具。

您能够像调节和测试JavaScript代码一样来调节你的React Native程序。

回去区域一,Content
script 选项开里面包括着有个别第3方插件也许浏览器本人的js代码,日常它是被忽略的,实际上它的法力很少。大家得以更加多关怀一下Snippets选项。还记得基础篇里面介绍的style吗?在中间大家得以编写界面包车型大巴css代码并且即时看到它们的炫耀效果,同样地,在Sinppets中,大家也
能够编写(重写)js代码片段。那个某个其实就也就是你的js文件1律,分裂的是本地的js文件在编辑器里面编辑的,而那边,你是在浏览器中编辑的。那些代码片段在浏览器刷新的时候既不会收敛,也不会实行,除非是您手动执行它。它能够存在你的地面浏览器中,尽管关闭浏览器,再度打开时它仍旧还在那里。它的重中之重职能能够使得大家编辑1些品类的测试代码时提供方便人民群众,你知道,假如您在编辑器上编制那个代码,在公布时您不能够不为它们增加注释符号可能手动删除它们,而在浏览器上编写制定就不需求这么麻烦了。

Developer Menu

模拟器开启Developer Menu

  • iOS模拟器
    • 能够通过Command⌘ + D快速键来急速打开Developer Menu
  • android模拟器
    • 能够经过Command⌘ + M快速键来非常的慢打开Developer
      Menu。也能够通过模拟器上的菜单键来打开

真机开启Developer Menu

  • iOS和Android真机通过摇入手提式有线电电话机来打开Developer Menu
Warnings

React
Native程序运维时出现的Warnings也会被一贯呈现在显示器上,以风骚的背景显示,并会打字与印刷出警示信息。
你也得以通过 console.warn()来手动触发Warnings。
你也足以经过console.disableYellowBox = true来手动禁用Warnings的体现,只怕经过console.ignoredYellowBox = ['Warning: ...'];来忽略相应的Warning。

澳门新萄京8522 18

Warnings.png

唤醒:在生产条件release (production)下Errors和Warnings效率是不可用的。

Sources:
包括该品种的静态财富文件。双击选粤语件,该文件内容会在区域第22中学显得,就算你选中的是js文件,那么您能够在区域2种单击行号进行断点调节和测试,只要js执行到了您所标记的那壹行,它会告一段落向下执行并且等待你的下令:

React Native / React调节和测试技巧

做过原生APP开发的同桌们都知道,咱们在Xcode和studio中就足以一向对编写的代码进行断点调节和测试,很有益于,可是web开发断点调节和测试就不能够直接在开发工具中达成了,要求借助浏览器来形成,React相关的开发断点调节和测试和web开发大多壹样,也是在浏览器上拓展调剂,即便尚无原生那么便宜,然而也还算不难。React
Native调节和测试供给依靠官方的Developer Menu,上边大家就来简单聊聊这些Developer Menu
Chrome Developer Tools

实施控工具

从上海体育地方能够见到“执行控工具”按钮在侧板顶部,让你能够按步执行代码,当您实行调节和测试的时候那多少个按钮十三分管用:

  • 接轨(孔蒂nue): 继续执行代码直到遭受下3个断点。
  • 单步执行(Step over):
    步进代码以查看每1行代码对变量作出的操作,当代码调用另一个函数时不会跻身这么些函数,使您能够小心于如今的函数。
  • 跳入(Step into): 与 Step over
    类似,不过当代码调用函数时,调节和测试器会进去那一个函数并跳转到函数的率先行。
  • 跳出(Step out): 当你进去一个函数后,你能够点击 Step out
    执行函数余下的代码并跳出该函数。
  • 断点切换(Toggle breakpoints):
    控制断点的敞开和关闭,同时有限扶助断点完好。

伍、禁止使用全部的断点,不做别的调节和测试

Reloading JavaScript

在只是修改了js代码的情形下,若是要预览修改结果,你不供给再次编写翻译你的选用。在那种情景下,你只供给报告React
Native重新加载js即可。

注意:
要是您改改了native的代码或改动了Images.xcassets、res/drawable中的文件,重新加载js是可怜的,那时你须求再一次编写翻译你的类别了

Reload js

Reload js将你项目中js代码部分重新生成bundle文件,然后传输给模拟器或手提式有线电话机

在Developer Menu中单击Reload让React
Native重新加载js。对于iOS模拟器你也能够透过Command⌘ + R急忙键来加载js,对于Android模拟器能够经过双击r键来加载js

注意:只要Command⌘ + Haval 不可能使你的iOS模拟器加载js,能够经过选中Hardware
menu中Keyboard选项下的 ‘Connect Hardware Keyboard’ 试试

Enable Live Reload

在 Developer Menu中有 ‘Enable Live Reload’ 选项,该选取提供了React
Native动态加载的成效。当您的js代码爆发变化后,React
Native会自动生成bundle然后传输到模拟器或手提式有线电话机上

gif

Enable Hot Reloading

Developer Menu中还有1项需求特地介绍的,正是’Enable Hot
Reloading’热加载,假使说Enable Live Reload解放了您的单臂的话,那么Hot
Reloading不但解放了你的双臂而且还解放了您的日子。 当你每一趟保存代码时Hot
Reloading作用便会扭转本次修改代码的增量包,然后传输到手提式有线电话机或模拟器上以贯彻热加载。相比Enable Live Reload须要每趟都回来到起步页面,Enable Live
Reload则会在有限支持您的次第状态的状态下,就能够将新型的代码布署到装备上,当您做布局的时候运行Enable
Live Reload成效你就足以实时的预览布局功用了,方便省时

Reloading JavaScript

在只是修改了js代码的情事下,假如要预览修改结果,你不必要再度编译你的运用。在那种气象下,你只必要报告React
Native重新加载js即可。

提醒:如若你改改了native
代码或涂改了Images.xcassets、res/drawable中的文件,重新加载js是老大的,那时你须求重新编写翻译你的项目了。

澳门新萄京8522 19

Sources面板

Sources面板提供了调节 JavaScript 代码的职能

image

Sources面板能够让您看到你所要检查的页面包车型大巴具备脚本代码,并在面板选拔栏下方提供了壹组正式控件,提供了暂停,恢复生机,步进等职能。在窗口的最下方的按钮能够在遇见尤其(exception)时强制中止。源码显示在单独的标签页,通过点击
打开文件导航面板,导航栏中会展现全数已打开的脚本文件

Chrome开发着工具中的Sources面板差不离是最常用的效果面板。平日若是是付出碰到了js报错或许其余代码难点,在审美一遍本人的代码而白手起家之后,首先就会打开Sources进行js断点调节和测试

实践控制工具

从上海体育场合能够看到’执行控制工具’按钮在侧板顶部,让您能够按步执行代码,当你举办调节的时候那多少个按钮十一分有效:

  • 三番六遍(孔蒂nue): 继续执行代码直到碰到下2个断点
  • 单步执行(Step over):
    步进代码以查看每一行代码对变量作出的操作,当代码调用另一个函数时不会跻身那个函数,使您能够小心于近来的函数
  • 跳入(Step into): 与 Step over
    类似,可是当代码调用函数时,调节和测试器会进去那一个函数并跳转到函数的率先行
  • 跳出(Step out): 当你进入三个函数后,你能够点击 Step out
    执行函数余下的代码并跳出该函数
  • 断点切换(Toggle breakpoints): 控制断点的拉开和倒闭,同时保证断点完好

查看js文件

假定您想在开发者工具上预览你的js文件,能够在开拓Sources
tab下的debuggerWorker.js选项卡,该选项卡下会显示当前调节和测试项指标具有js文件,可能是用高速键
cmd + o 调出文件搜索直接进行搜索,那么些尤其方便人民群众高效

Enable Live Reload

澳门新萄京8522 20

Enable Live Reload.gif

React
Native意在为开发者带来2个更加好的付出体验。假诺您认为上文的加载js代码方式太low了恐怕不够方便,那么有未有壹种更便利加载js代码的措施吧?
答案是一定的。
在 Developer Menu中你会看到”Enable Live Reload” 选项,该选用提供了React
Native动态加载的效劳。当你的js代码发生变化后,React
Native会自动生成bundle然后传输到模拟器或手提式有线电话机上,是否认为很有益。

4、击+ 并输入 UENCOREL 包含的字符串即可监听该 UCRUISERL 的 Ajax
请求,输入内容就一定于 UHummerH二L 的过滤器。要是什么都不填,那么就监听全部 XH奇骏请求。一旦 XH奥德赛 调用触发时就会在 request.send() 的地点暂停。

造福时间

  • 小编React
    Native开源项目OneM地址(遵照集团支付规范搭建框架形成支付的):https://github.com/guangqiang-liu/OneM
    欢迎小伙伴们 star
  • 作者React Native QQ技术沟通群:620792950 欢迎小伙伴进群交换学习
  • 末段强调:**支出中有遭逢KoleosN相关的技巧难题,欢迎小伙伴加入沟通群,在群里提问、相互沟通学习。调换群也定期更新最新的安德拉N学习质地给大家,谢谢补助!
    **
其次步:打开Chrome开发者工具

在该“http://localhost:8081/debugger-ui.”Tab页下打开开发者工具。打开Chrome菜单->选用越多工具->接纳开发者工具。你也足以通过火速键(Command⌘

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

澳门新萄京8522 21

开辟Chrome开发着工具之后你会看出如下界面:

澳门新萄京8522 22

发表评论

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

网站地图xml地图