>

React Native / React调节和测量检验技能

- 编辑:乐百家599手机首页 -

React Native / React调节和测量检验技能

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、击 并输入 UEvoqueL 饱含的字符串就可以监听该 UCR-VL 的 Ajax 央浼,输入内容就一定于 URAV4L 的过滤器。假诺什么都不填,那么就监听全部 XHCR-V乞求。一旦 XH卡宴 调用触发时就能够在 request.send() 的地点暂停。

5、为网页增加各体系型的断点新闻。如选中了Mouse中的某一项(click),当你在网页上出发这么些动作(单击网页放肆地点),你浏览器正是及时断点监察和控制该事件。

 

值得再一次重新一次,Sources是相似的作用开垦中最常用到也是最得力的成效面板,它在那之中的比比较多效果与利益对于大家开垦前端工程以来是可怜有协理的。在web2.0时代的明日,小编不引入仍旧在和睦的代码里面写调试音信的行为,因为那会然你的支付变得繁缛。Chrome开辟工具给我们提供的无敌成效,我们应有能够利用之。那篇小说就到此停止,即便有些麻烦,但究竟基本发挥了卤煮使用经验和主见,希望对你有帮带。即便您感觉不错,请推荐一下本文并继续关切卤煮在的博客。在下一篇中小编将向大家介绍Chrome开垦工具中的质量方面包车型地铁调节和测验。

1 赞 15 收藏 3 评论

图片 14

为了防止你的调整代码重复推行,大家得以在调节和测验时直接在console调节台上二回性地出口当前断点处的消息(推荐那样做)。为了证实大家在console面板中装有的是近来断点景况,小编门能够对照断点实施前后的this值变化。

React Native / React调节和测量试验技能

做过原生应用软件开荒的同学们都知道,我们在Xcode和studio中就能够直接对编写的代码进行断点调节和测量检验,很方便,可是web开荒断点调节和测量检验就不能够间接在开采工具中形成了,必要依据浏览器来产生,React相关的开支断点调节和测量试验和web开辟多数同样,也是在浏览器上拓宽调治,纵然尚无原生那么平价,可是也还算轻便。React Native调节和测量检验供给依靠官方的Developer Menu,上边大家就来大致聊聊这么些Developer MenuChrome Developer Tools

累积和移除断点

在 Sources 面板的文书导航面板中开荒二个JavaScript文件来调整,点击边栏(line gutter) 为当前行设置三个断点,已经设置的断点处会有三个茶色的竹签,单击深蓝标签,断点即被移除。

图片 15

感受:右键点击金黄标签会张开贰个菜谱,菜单满含以下选项:实行到此(Continue to Here),黑盒脚本(Blackbox scripts),移除断点(Remove Breakpoint), 编辑断点(艾德it Breakpoint),和 禁止使用断点(Disable Breakpoint)。在这里地您能够对断点进行更加高等的定制化的操作。

图片 16

就是在断点时,你也能够编写代码,按ctrl S保存之后,你会看出区域2的背景由铁黄变为浅色,而断点会重新早前施行。

Error

React Native程序运转时出现的Error会被直接展现在荧屏上,以革命的背景展示,并会打字与印刷出错误消息, 你也能够通过 console.error()来手动触发Error

img

注意: 在生产条件release下Error和Warning功效不在生效

有一种断点叫全局断点

大局断点的效率是,当程序出现分外时,会在老大的地方暂停,那对飞速定位异的常地点非常的低价。
做iOS开辟的同校都通晓在Xcode中能够安装全局断点,其实在Chrome 开荒者工具中也同样有与之相应的效果与利益,叫“Pause On Caught Exceptions”。假使勾选上此功效,则正是所发出运营时非凡的代码在 try/catch 范围内,Chrome 开垦者工具也能够在错误代码处停住。

图片 17

图片 18

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⌘ 陆风X8 很小概令你的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功效你就能够实时的预览布局作用了,方便省时

在做React Native开辟时,少不了的内需对React Native程序进行调和。调试程序是每壹个人开采者的基础,高效的调治不只好增长开辟功能,也能减低Bug率。本文将向大家分享React Native程序调节和测量试验的局地本事和体验。

图片 19

Developer Menu

模拟器开启Developer Menu

  • iOS模拟器
    • 能够经过Command⌘ D快速键来神速张开Developer Menu
  • android模拟器
    • 能够经过Command⌘ M急忙键来极快打开Developer Menu。也能够通过模拟器上的菜单键来展开

真机开启Developer Menu

  • iOS和Android真机通过摇拽手提式有线电话机来开启Developer Menu
小技巧:Automatic reloading

5、为网页增加种种类型的断点音讯。如选中了Mouse中的某一项(click),当你在网页上出发那个动作(单击网页大肆地点),你浏览器正是任何时候断点监察和控制该事件。

控制台

DevTools调整台(Console)能够令你在方今已暂停的气象下进展侦察。按 Esc 键展开/关闭调节台

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

image

Hot Reloading

图片 20

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断点功用令人兴奋不已,早前只好在IE中靠alert弹出窗口调节和测验js代码,那样的付出遭受对于前端程序猿来讲差没多少是一场恶梦。本篇介绍Sources的具体用法,援助各位在开拓进度中够高兴地调节和测量试验js代码,并不是因它而发狂。

断点

断点(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

无须忽略调控台

DevTools 调整台(Console) 能够令你在近些日子已中断的景观下开展侦查。按 Esc 键张开/关闭调控台。

图片 21

心得:你能够在调控台(Console)上打字与印刷变量,实施脚本等操作。在开辟调节和测量检验中十一分管用。

参考:
chrome-devtools
CN-Chrome-DevTools
Debugging
http://blog.csdn.net/quanqinyang/article/details/52215652

先是展开F12开垦工具切换来Sources面板中

怎么真机调节和测量试验

  • iOS上

配备好相应的调整证书,直接连接线连接到真机械运输营就可以

  • android

摇曳手提式有线话机,调出Developer Menu面板,在'Developer Menu'下的'Dev Settings'中Debug server host & prot for device配置自个儿路由器ip地址。端口使用8081就可以

image

image

第二步:张开Chrome开辟者工具

在该“http://localhost:8081/debugger-ui.”Tab页下开荒开垦者工具。张开Chrome菜单->选用更加多工具->选用开采者工具。你也能够透过快速键(Command⌘

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

图片 22

展开Chrome开拓着工具之后你拜谒到如下分界面:

图片 23

图片 24

Warning

React Native程序运转时出现的Warnings也会被直接呈现在荧屏上,以风骚的背景显示,并会打字与印刷出警告音讯,你也能够透过console.warn()来手动触发Warnings,你也能够经过console.disableYellowBox = true来手动禁止使用Warnings的彰显,恐怕通过console.ignoredYellowBox = ['Warning: ...']来忽视相应的Warning

img

Errors and Warnings

在development形式下,js部分的Errors 和 Warnings会直接打字与印刷在手提式有线话机或模拟器显示屏上,以红屏和黄屏呈现。

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

平价时间

  • 作者React Native开源项目OneM地址(依据公司支付规范搭建框架形成开采的):https://github.com/guangqiang-liu/OneM 接待小友大家 star
  • 作者React Native QQ本领交换群:620792950 迎接小同伴进群沟通学习
  • 最终重申:**支出中有遇到揽胜极光N相关的手艺难点,迎接小友西洋参与交换群,在群里提问、相互调换学习。调换群也定时更新最新的福特ExplorerN学习资料给大家,谢谢帮忙! **
Chrome 开拓工具

谷歌(Google) Chrome 开拓工具,是依据谷歌(Google)浏览器内含的一套网页制作和调理工科具。开拓者工具允许网页开垦者深切浏览器和网页应用程序的里边。该工具得以使得地追踪布局难点,设置 JavaScript 断点并可浓烈精通代码的最优化计谋。 Chrome 开采工具一共提供了8大组织工作具:

  • Element 面板: 用于查看和编辑当前页面中的 HTML 和 CSS 成分。
  • Network 面板:用于查看 HTTP 央求的详细音讯,如伏乞头、响应头及重返内容等。
  • Source 面板:用于查看和调节和测量检验当前页面所加载的脚本的源文件。
  • TimeLine 面板: 用于查看脚本的执行时间、页面成分渲染时间等音信。
  • Profiles 面板:用于查看 CPU 实行时间与内部存款和储蓄器占用等新闻。
  • Resource 面板:用于查看当前页面所诉求的财富文件,如 HTML,CSS 样式文件等。
  • 奥迪(Audi)ts 面板:用于优化前端页面,加快网页加载速度等。
  • Console 面板:用于体现脚本中所输出的调节和测量检验消息,或运营测验脚本等。

提示:对于调节和测验React Native应用来讲,Sources和Console是采纳频率很高的多少个工具。

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

图片 25

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 调出文件搜索直接实行找出,那几个更是简便易行高效

在iOS上

开发”RCTWebSocketExecutor.m “文件,将“localhost”改为您的管理器的ip,然后在Developer Menu下单击”Debug JS Remotely” 运营JS远程调节和测量检验功用。

第一大家来看区域1,它的机能有个别看似于Resources面板,主如若显得网页加载的剧本文件:举例css, js等能源文件(它不带有cookie,img等静态财富文件)。

怎么着通过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

Reloading JavaScript

在只是修改了js代码的气象下,假如要预览修改结果,你无需再度编写翻译你的运用。在此种场合下,你只需求告诉React Native重新加载js就能够。

晋升:倘令你改改了native 代码或改变了Images.xcassets、res/drawable中的文件,重新加载js是相当的,那时你需求再行编写翻译你的种类了。

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

Chrome Developer Tools

Chrome 开拓工具

GoogleChrome开荒工具,是依照谷歌(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程序

断点其实很简短

断点(Breakpoint) 是在本子中装置好的暂停处。在DevTools中使用断点能够调节和测量检验JavaScript代码,DOM更新和 network calls。

经验:你能够像使用Xcode/AndroidStudio调节和测量试验Native应用一样,来利用Chrome开采者工具通过断点对程序举行调节和测量检验。

本文由乐百家前段发布,转载请注明来源:React Native / React调节和测量检验技能