React Native调节和测验本事与体验

React Native调节和测验本事与体验

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

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

原稿出处:
卖BBQ夫斯基   

上篇向大家介绍完了基础功能篇,此番共享的是Chrome开辟工具中最得力的面板Sources
 Sources面板大概是本人最常用到的Chrome成效面板,也是在小编看来决解日常难点的注重作用面板。平常若是是开荒蒙受了js报错可能此外代码难点,在审美一遍本人的代码而一无所获之后,笔者第意气风发就能张开Sources张开js断点调节和测量试验,而它也差不离能一蹴而就自身十分之八的代码难题。Js断点那几个效果令人欢跃不已,在未有js断点成效,只可以在IE(万恶的IE)中靠alert弹出窗口调节和测量检验js代码的时日(特别alert贰个object根本不会理你),那样的开垦条件对于前端技术员来说几乎是一场恐怖的梦。本篇作品讲会介绍Sources的现实用法,扶助各位在开辟进度中够高兴地调节和测验js代码,实际不是因它而发狂。首先展开F12开采工具切换成Sources面板中:

图片 1

Sources功用面板是财富面板,他入眼分为多少个部分,多个部分并非单独的,他们竞相关联,互动协同促成多个器重的法力:监控js在推行期的移动。简单的讲正是断点啊。

先是大家来看区域1,它的职能某些近乎于Resources面板,首假如展示网页加载的剧本文件:比如css,
js等财富文件(它不带有cookie,img等静态财富文件)。

 

图片 2

 

 

 

区域1的导航条上有多个tab切换选项,他们都存有不相同域名和情况下的js和css文件,大家先是来证明Sources(财富)选项的功效:

Sources:
包涵该类型的静态能源文件。双击选粤语件,该文件内容会在区域第22中学显得,若是您选中的是js文件,那么您能够在区域2种单击行号举办断点调节和测量检验,只要js施行到了您所标识的那生机勃勃行,它会截止向下实行并且等待你的一声令下:

图片 3

从上航海用体育场所能够看见js试行到断点处时各区的更动,首先是区域3中的Breakpoints笔录消息会变高亮,然后是区域4中Scope 慎选中列出了断点处私有和国有的变量消息,那样,作者能够很直观地驾驭,一时js的推增势况。同样的,你能够把鼠标放到区域2种的有个别变量上,浏览器会弹出叁个小框框,框框里面则是您悬浮其上的变量全数新闻:

 

图片 4

接下来,你能够按F10任何时候js实行的不二秘籍一步一步地走下来,纵然你相逢了一个函数满含着别的三个函数,那么您可以按F11走入到个函数中去考察它的代码实施活动。你也得以通过点击区域1平底的依次Logo对js代码进行追踪。可是笔者建议您利用神速键,故名思义,因为它比较便捷低价。可是怎么用完全遵照个人习于旧贯来吗。下图是逐生机勃勃开关的职能作用。

 

图片 5

 

 在上海体育场地紫橄榄棕圆圈中数字,它们各自代表:

  1、截至断点调节和测量检验

  2、不跳入函数中去,继续实行下生机勃勃行代码(F10)

  3、跳入函数中去(F11)

  4、从施行的函数中跳出

  5、禁止使用全体的断点,不做另向外调拨运输试

  6、程序运转时相遇极度时是还是不是中断的开关

接下去在区域4种切换成Watch
Expressions
 选项,它的功能是为当前断点增加表明式,使得每一回断点往下走一步都会实施你写下的js代码。须求专一的是以此作用必须严谨运用,因为那可能会招致您写下的监督检查代码段会不断地被实行。

图片 6

 

为了幸免你的调节和测量检验代码重复推行,大家得以在调节和测验时一向在console调控台上一次性地出口当前断点处的消息(推荐那样做)。为了证实大家在console面板中保有的是眼下断点意况,我门能够对照断点施行前后的this值变化。

图片 7   
  图片 8

生龙活虎经您以为在断点的时候为了看多少个变量必需借用console面板输出的形式来查看会相比较费心,那么您能够修改最新版的Chrome,它已经为大家消除了这几个忧愁。为了方便开采者调节和测验,在这里一点上Google曾经成功了天下无双,就在今天更新过Chrome未来,卤煮意外省觉察了断点时监察和控制遇到变量的其余生机勃勃种办法,这种方式极为清晰,在断点调节和测量试验的时候,区域第22中学会自动展现种种变量的值,每一趟代码往下走的时候那些值都回时时更新。那让开采者对当前蒙受变量大概能够说是心中有数。(此功用有三个小缺点,那正是回天无力查看数组或许指标的切切实实索引和值,不过小编深信google会订正它的。)

图片 9

 

当你的类型曾经线上,现身了一个bug,你修复了后头相当的小概见到它的确在线上的效应,那么您可以在开垦线上的花色,直接在浏览器中期维校订代码然后看见功效。那样的意义往往是最直白的,这种格局也能帮你省去频仍验证发布的劳动,终究身为前端码农的你也必然会听到过后台(日常状态下是后台发布)三哥的抱怨:“XXX,测量检验通过了没,不要现身了哈,揭橥贰次很费力的!”。而在Chrome里面,只需求在区域2种直接修改,你就足以证实你的代码在线上是不是可行。卤煮在这里地只是提议该功效的用法之后生可畏。其余的就凭诸位的聪明伶俐去想了。

图片 10   
 
  图片 11

固然在断点时,你也可以编写代码,按ctrl+S保存之后,你会看出区域2的背景由蓝灰变为浅色,而断点会重新伊始施行。

回来区域1,Content
script
 选项开里面包罗着一些第三方插件也许浏览器自个儿的js代码,常常它是被忽略的,实际上它的功效相当少。我们能够越多关注一下Snippets接纳。还记得基础篇里面介绍的style啊?在其间我们能够编写分界面的css代码並且即时观察它们的投射效果,雷同地,在Sinppets中,大家也
可以编写(重写)js代码片段。那么些有个别其实就一定于您的js文件后生可畏律,区别的是本地的js文件在编辑器里面编辑的,而这里,你是在浏览器中编辑的。那个代码片段在浏览器刷新的时候既不会藏形匿影,也不会施行,除非是您手动实施它。它能够存在你的地面浏览器中,即便关闭浏览器,再度打开时它照旧还在这里边。它的基本点成效能够使得大家编辑一些项指标测量试验代码时提供方便,你明白,若是你在编辑器上编写制定那一个代码,在公布时您必须要为它们增加注释符号只怕手动删除它们,而在浏览器上编写制定就不须要如此麻烦了。

Snippets选料的空白点右键后选择弹出的new选项,建设构造二个你协调的新的文书,然后在区域2种编辑它。

图片 12

 

Snippets 的十二分作用壮大,它的众多掩蔽功效还大概有待开掘。近来卤煮使用它是在挥之不去调节和测验片段、单元测量检验、一些些的效劳代码编写效率上。

最终大家看看js中时间拉长的监督作用,同上篇小说介绍的相符,Sources面板和Elements面板同样有监督事件的功能,并且Sources中成效尤为助长,也进一步强有力。它的那部分效能集中在区域3中。笔者以下图为例,观望其效劳。

图片 13

 

从上到下,深灰圈内的数字的意思:

1、断点处的债仓库,正是从该函数起,逐级追寻调用到她的函数名。举例:

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

2、在区域第22中学你的断点调节和测量检验讯息。当某些断点在试行的时候对应的新闻会高亮,双击该处新闻方可在区域第22中学快速牢固。

3、增多的Dom监察和控制新闻。

4、击+ 并输入 U本田UR-VL 蕴涵的字符串就可以监听该 U哈弗L 的 Ajax
哀告,输入内容就一定于 U奥迪Q5L 的过滤器。若是什么都不填,那么就监听全部 XH逍客诉求。后生可畏旦 XH福睿斯 调用触发时就能够在 request.send() 之处暂停。

5、为网页加多各体系型的断点消息。如选中了Mouse中的某后生可畏项(click),当您在网页上起身这么些动作(单击网页率性地点),你浏览器正是那时候断点监察和控制该事件。

 

值得再度重复贰遍,Sources是相仿的作用开拓中最常用到也是最实用的效应面板,它里面包车型客车大队人马功能对于大家付出前端工程以来是老大有帮扶的。在web2.0时日的明日,笔者不推荐依然在温馨的代码里面写调试音讯的作为,因为那会然你的支出变得繁缛。Chrome开采工具给我们提供的苍劲作用,我们应当好好利用之。那篇著作就到此截止,即便有一点点麻烦,但终究基本发挥了卤煮使用经验和费尽心机,希望对您有帮忙。假设你以为不错,请推荐一下本文并再而三关切卤煮在的博客。在下后生可畏篇中自己将向我们介绍Chrome开辟工具中的品质方面包车型客车调弄整理。

1 赞 15 收藏 3
评论

图片 14

当您的连串曾经线上,现身了叁个bug,你修复了后头无法看见它真的在线上的作用,那么你能够在开荒线上的门类,间接在浏览器中期维更改代码然后看见效率。这样的成效往往是最直接的,这种艺术也能帮您省去频繁验证公布的分神,究竟身为前端码农的你也势必会听到过后台(经常状态下是后台公布)四弟的痛恨:“XXX,测试由此了没,不要现身了哈,发表二遍很麻烦的!”。而在Chrome里面,只要求在区域2种间接改进,你就能够表达你的代码在线上是还是不是行得通。卤煮在那只是提议该成效的用法之后生可畏。其余的就凭诸位的聪明智利去想了。

Developer Menu

模拟器开启Developer Menu

  • iOS模拟器
    • 能够透过Command⌘ + D赶快键来极快展开Developer Menu
  • android模拟器
    • 能够透过Command⌘ + M急忙键来急迅打开Developer
      Menu。也得以经过模拟器上的菜单键来打开

真机开启Developer Menu

  • iOS和Android真机通过摇拽手提式有线电话机来展开Developer Menu
Errors

React
Native程序运维时现身的Errors会被直接呈现在荧屏上,以浅米灰的背景展现,并会打印出错误新闻。
你也可以通过 console.error()来手动触发Errors。

图片 15

Errors.png

3、加多的Dom监察和控制消息。

断点

断点(Breakpoint)是在剧本中设置好的暂停处,在DevTools中应用断点能够调节和测量检验JavaScript代码

  • 拉长和移除断点

在 Sources
面板的公文导航面板中开辟二个JavaScript文件来调治,点击边栏(line gutter)
为当前进设置二个断点,已经设置的断点处会有一个宝石蓝的标签,单击灰绿标签,断点即被移除

image

右键点击银白标签会展开几个美食指南,菜单富含以下选项:实行到此(Continue to
Here),黑盒脚本(Blackbox scripts),移除断点(Remove Breakpoint),
编辑断点(Edit Breakpoint),和 禁用断点(Disable
Breakpoint)。在此边你能够对断点实行更加高等的操作

image

高端操作

  • Continue to Here

借使你想让程序及时跳到某黄金年代行时,这么些效果会帮到你。假如在该行在此之前还应该有其余断点,程序会相继通过前边的断点。别的索要提议的是那个功用在从心所欲大器晚成行代码的边栏(gutter
line)前单击右键都会见到

  • Blackbox scripts

黑盒脚本会从你的调用酒馆中隐讳第三方代码

  • Edit Breakpoint

经过该作用你能够创制多个法规断点,你也能够在边栏(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

高级操作

上文讲到右键点击普鲁士蓝标签会展开二个美食指南,下边就介绍一下该菜单下的高端级操作。

试行到此(Continue to Here):

万后生可畏你想让程序及时跳到某生龙活虎行时,这几个效用会帮到你。假使在该行早前还会有别的断点,程序会挨个通过前边的断点。此外索要提议的是以此意义在随便少年老成行代码的边栏(gutter
line)前单击右键都拜访到。

黑盒脚本(Blackbox scripts):

黑盒脚本会从您的调用饭馆中暗藏第三方代码。

编辑断点(Edit Breakpoint):

透过该意义你能够创制四个尺度断点,你也能够在边栏(gutter line)
右键并精选丰裕条件断点(Add Conditional Breakpoint)
。在输入框中,输入八个可拆解剖析为真或假的表达式。仅当准绳为真时,实践会在这里制动踏板。

图片 16

体验:若是您想让程序在某处平素都毫无暂停,能够编写三个尺度永久为false的准则断点。其余,你也能够在该行代码的边栏(gutter
line)前单击右键选取“Never pause here”就能够,你会发掘“Never pause
here”其实正是在该行代码上设了叁个长久为false的原则断点。

图片 17

3、跳入函数中去(F11)

控制台

DevTools调控台(Console)能够令你在近期已中断的情状下开展侦察。按 Esc
键张开/关闭控制台

你能够在调节台(Console)上打字与印刷变量,实行脚本等操作。在付出调节和测量试验中最常用

image

在真机上开启Developer Menu

在真机上您能够经过摇入手提式有线电话机来拉开Developer Menu。
预览图

图片 18

Developer Menu.jpg

在上海教室栗褐圆圈中数字,它们各自表示:

Sources面板

Sources面板提供了调治将养 JavaScript 代码的效果与利益

image

Sources面板可以令你看来你所要检查的页面包车型客车兼具脚本代码,并在面板采用栏下方提供了风度翩翩组正式控件,提供了中断,恢复生机,步进等成效。在窗口的最下方的按键能够在遇见非常(exception)时强制中止。源码显示在单独的标签页,通过点击
张开文件导航面板,导航栏中会呈现全体已开荒的台本文件

Chrome开荒着工具中的Sources面板差不离是最常用的机能面板。经常假使是支付碰着了js报错或许别的代码难题,在审美二回本身的代码而化为乌有之后,首先就能够展开Sources举办js断点调节和测验

实施调控工具

从上航海用体育场合可以观望’执行调控工具’按键在侧板顶端,令你能够按步实践代码,当您举办调试的时候那多少个开关特别管用:

  • 接轨(Continue): 继续实行代码直到境遇下叁个断点
  • 单步实施(Step over):
    步进代码以查看每后生可畏行代码对变量作出的操作,现代码调用另叁个函数时不会进去这一个函数,令你可以小心于当下的函数
  • 跳入(Step into): 与 Step over
    相同,可是现代码调用函数时,调节和测验器会步向那么些函数并跳转到函数的第生龙活虎行
  • 跳出(Step out): 当你步向二个函数后,你能够点击 Step out
    实施函数余下的代码并跳出该函数
  • 断点切换(Toggle breakpoints): 调整断点的拉开和停业,同临时候保险断点完好

查看js文件

若果您想在开荒者工具上预览你的js文件,能够在展开Sources
tab下的debuggerWorker.js选项卡,该选项卡下会展现当前调试项目标有着js文件,或然是用便捷键
cmd + o 调出文件找出直接开展搜寻,那一个尤其方便火速

Reloading JavaScript

在只是更改了js代码的动静下,假若要预览改革结果,你无需重新编写翻译你的接纳。在这里种情形下,你只须求告诉React
Native重新加载js就可以。

提示:假诺您改改了native
代码或涂改了Images.xcassets、res/drawable中的文件,重新加载js是不行的,这时候你须要再一次编写翻译你的花色了。

4、击+ 并输入 U福睿斯L 包涵的字符串就能够监听该 UCR-VL 的 Ajax
诉求,输入内容就也就是 ULANDL 的过滤器。如若什么都不填,那么就监听全体 XH逍客伏乞。少年老成旦 XH君越 调用触发时就能在 request.send() 之处暂停。

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⌘ + Odyssey 一点都不大概令你的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中还应该有生龙活虎项要求特意介绍的,就是’Enable Hot
Reloading’热加载,假如说Enable Live Reload解放了您的双手的话,那么Hot
Reloading不但解放了你的双臂并且还解放了您的年华。 当你每一回保存代码时Hot
Reloading功用便会转移此次修正代码的增量包,然后传输到手提式有线电电话机或模拟器上以落到实处热加载。相比Enable Live Reload需求每一趟都回去到运行页面,Enable Live
Reload则会在保证你的程序状态的情状下,就足以将风尚的代码安插到道具上,当你做布局的时候运营Enable
Live Reload成效你就足以实时的预览布局功用了,方便省时

Hot Reloading

图片 19

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做布局的实时预览相比美。

从上海体育场所能够看出js实行到断点处时各区的变动,首先是区域3中的Breakpoints记录消息会变高亮,然后是区域4中Scope 选项中列出了断点处私有和国有的变量音信,那样,作者得以很直观地通晓,一时js的实行意况。相像的,你能够把鼠标放到区域2种的某些变量上,浏览器会弹出一个小框框,框框里面则是您悬浮其上的变量全数音信:

React Native / React调节和测量检验本领

做过原生应用软件开荒的同室们都知情,大家在Xcode和studio中就足以一直对编写的代码实行断点调节和测量检验,很有利,但是web开荒断点调节和测验就不能够从来在开垦工具中完毕了,须要依附浏览器来产生,React相关的开垦断点调试和web开辟多数同样,也是在浏览器上开展调解,尽管还没有原生那么方便人民群众,可是也还算简单。React
Native调节和测量试验要求依附官方的Developer Menu,下面我们就来大约聊聊那一个Developer Menu
Chrome Developer Tools

在模拟器上开启Developer Menu

Android模拟器:
能够因而Command⌘ + M快捷键来急速展开Developer
Menu。也能够因而模拟器上的菜单键来打开。

感受:高版本的模拟器平常未有菜单键的,可是Nexus
S上是有菜单键的,倘使想利用菜单键,能够创制一个Nexus S的模拟器。

iOS模拟器:
能够通过Command⌘ + control + z赶快键来急迅打开Developer Menu。

在Snippets选项的空白点右键后选取弹出的new选项,构建四个您本人的新的公文,然后在区域2种编辑它。

哪些通过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

小技巧:Automatic reloading

图片 20

何以真机调节和测量试验

  • iOS上

配置好相应的调治将养证书,直接连接线连接到真机运营就可以

  • android

摆荡手提式有线电话机,调出Developer Menu面板,在’Developer Menu’下的’Dev
Settings’中Debug server host & prot for
device配置本人路由器ip地址。端口使用8081就能够

image

image

真机调节和测量试验

Sources作用面板是能源面板,他器重分为四个部分,多个部分实际不是单独的,他们互相关联,互动协作达成一个主要的机能:监察和控制js在实施期的活动。轻松的话就是断点啊。

造福时间

  • 小编React
    Native开源项目OneM地址(遵照公司费用标准搭建框架产生支付的):https://github.com/guangqiang-liu/OneM
    招待小友人们 star
  • 作者React Native QQ技艺交换群:620792950 应接小同伴进群调换学习
  • 提及底重申:**付出中有碰到CR-VN相关的技巧难点,接待小同伴到场交流群,在群里提问、相互沟通学习。交换群也定时更新最新的EvoqueN学习材料给大家,感激援救!
    **
Enable Live Reload

图片 21

Enable Live Reload.gif

React
Native意在为开辟者带来三个越来越好的开支体验。假设您感觉上文的加载js代码情势太low了或然非常不足方便,那么有未有风华正茂种更方便加载js代码的不二法门吧?
答案是迟早的。
在 Developer Menu中您拜会到”Enable Live Reload” 选项,该选取提供了React
Native动态加载的效用。当您的js代码发生变化后,React
Native会自动生成bundle然后传输到模拟器或手提式有线电话机上,是或不是以为很有利。

值得再一次重新三次,Sources是近似的效率开辟中最常用到也是最可行的职能面板,它个中的不少效果与利益对于我们开辟前端工程以来是非凡常有帮扶的。在web2.0时日的后天,作者不引入依然在友好的代码里面写调节和测验新闻的一言一行,因为那会然你的开销变得繁缛。Chrome开荒工具给我们提供的刚劲功能,我们应当能够利用之。那篇作品就到此停止,固然有个别麻烦,但到底基本发挥了卤煮使用经验和苦口孤诣,希望对你有帮助。若是您感觉不错,请推荐一下本文并承继关注卤煮在的博客。在下风度翩翩篇中自个儿将向我们介绍Chrome开垦工具中的质量方面的调和。

Chrome Developer Tools

Chrome 开拓工具

GoogleChrome开拓工具,是依赖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程序

其次步:展开Chrome开辟者工具

在该“http://localhost:8081/debugger-ui.”Tab页下开发开垦者工具。展开Chrome菜单->选择更加多工具->选取开拓者工具。你也能够由此神速键(Command⌘

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

图片 22

开采Chrome开采着工具之后您会看出如下分界面:

图片 23

6、程序运维时遇上极度时是或不是中断的按键

Warning

React
Native程序运维时现身的Warnings也会被向来体现在显示屏上,以色情的背景展现,并会打字与印刷出警告消息,你也得以由此console.warn()来手动触发Warnings,你也得以透过console.disableYellowBox = true来手动禁用Warnings的显得,或许经过console.ignoredYellowBox = ['Warning: ...']来忽视相应的Warning

img

Chrome Developer Tools

图片 24

Error

React
Native程序运营时现身的Error会被一向显示在显示器上,以樱桃红的背景展现,并会打字与印刷出错误新闻,
你也能够经过 console.error()来手动触发Error

img

注意: 在生育遭逢release下Error和Warning功能不在生效

Reload js

Reload
js就要你项目中js代码部分重新生成bundle,然后传输给模拟器或手提式有线电话机。
在Developer Menu中有Reload选项,单击Reload让React
Native重新加载js。对于iOS模拟器你也足以通过Command⌘ + R急忙键来加载js,对于Android模拟器能够由此双击r键来加载js。

提醒:假若Command⌘ + 中华V不能够令你的iOS模拟器加载js,则足以经过选中Hardware
menu中Keyboard选项下的 “Connect Hardware Keyboard” 。

发表评论

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

网站地图xml地图