澳门新莆京手机网站-新蒲京娱乐场 > 联系我们 > React Native / React调节和测量试验技术

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现在,卤煮意各地发掘了断点时监察和控制意况变量的别的豆蔻梢头种艺术,这种方法极为清晰,在断点调节和测量试验的时候,区域2中会自动展现每个变量的值,每便代码往下走的时候这几个值都回时时更新。那让开荒者对现阶段境况变量大约能够说是吃透。(此意义有一个小劣势,那便是回天乏术查看数组大概目的的切切实实索引和值,可是小编深信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(State of Qatar { c(State of Qatar; } 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、击+ 并输入 UCRUISERL 包罗的字符串就能够监听该 URL 的 Ajax 央浼,输入内容就相当于 UOdysseyL 的过滤器。借使什么都不填,那么就监听全体 XH凯雷德央浼。一旦 XHTiggo 调用触发时就能在 request.send(卡塔尔 的地点暂停。

5、为网页增多各体系型的断点新闻。如选中了Mouse中的某后生可畏项(click),当您在网页上起身这一个动作(单击网页大肆地点),你浏览器正是及时断点监察和控制该事件。

 

值得再一次重复一回,Sources是相同的效果开垦中最常用到也是最有效的效应面板,它当中的洋洋功效对于我们开辟前端工程以来是特别有帮衬的。在web2.0一代的今天,笔者不引入还是在团结的代码里面写调节和测量试验消息的作为,因为那会然你的付出变得繁缛。Chrome开采工具给我们提供的兵不血刃成效,大家应当好好利用之。那篇小说就到此截止,尽管有个别麻烦,但毕竟基本发挥了卤煮使用阅历和设法,希望对你有协理。假如您认为不错,请推荐一下本文并接二连三关切卤煮在的博客。在下生龙活虎篇中自个儿将向大家介绍Chrome开垦工具中的质量方面包车型地铁调治。

1 赞 15 收藏 3 评论

澳门新莆京手机网站 14

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

平价时间

  • 小编React Native开源项目OneM地址(依据公司开辟标准搭建框架形成开拓的卡塔尔(قطر‎:https://github.com/guangqiang-liu/OneM 接待小同伴们 star
  • 小编React Native QQ技巧调换群:620792950 迎接小友人进群调换学习
  • 聊起底强调:**开采中有遇上RAV4N相关的技能难题,招待小友人出席交流群,在群里提问、互相沟通学习。交换群也定时更新最新的XC90N学习材质给我们,多谢支持! **

运用Chrome调节和测验JavaScript的断点设置和调整工夫,chromejavascript

你是怎么调节和测验 JavaScript 程序的?最原始的办法是用 alert(卡塔尔国在页面上打字与印刷内容,稍稍校正一点的主意是用 console.log(卡塔尔国 在 JavaScript 调整台上输出内容。嗯~,用那三种土措施真正化解了广大微型 JavaScript 脚本的调解难题。可是放着 Chrome 中功能尤为强盛的开采者工具不用实在太缺憾了。本文首要介绍此中的 JavaScript断点设置和调解效用,也便是内部的 Sources Panel(从前叫 Scripts)。假如你理解 Eclipse 中的各类 Java 调试技艺,那么这里的概念都以周围。写作本文时接纳的 Chrome 版本为 25.0.1364.172。

基本条件

澳门新莆京手机网站 15

SourcesPanel 的左边是内容源,包蕴页面中的种种能源。此中,又分 Sources 和 Content scripts。Sources 就是页面自身带有的各个财富,它是根据页面中现身的域来协会的,这是我们要关怀的。异步加载的 js 文件,在加载后也会见世在这里边的。Content scripts 是 Chrome 的生机勃勃种增添程序,它是比照扩张的ID来集团的,那类扩大实际也是放置在页面中的能源,它们也能够读写DOM。编写、调节和测验那类扩大的开垦者才要关怀它们,如若您的浏览器没设置别的扩展,那么Content scripts 就看不到任何事物。

Sources Panel 的中间主区域用来呈现侧边财富文件的内容。

Sources Panel 的左侧是调整成效区,最上边的一排开关分别是制动踏板/继续、单步施行、单步跳入、单步跳出、禁止使用/启用全体断点。上边是各样现实的成效区。稍后介绍。

注意,左右两侧的区域私下认可恐怕缩短在两边未有出示出来,点击两边的伸缩开关澳门新莆京手机网站 16澳门新莆京手机网站 17体现出来。左侧区域突显出来时暗许是半自动收缩状态,点击旁边的 pin 按键澳门新莆京手机网站 18就不会缩回去了。

最下边还应该有部分功用开关很有用。

在源代码上安装断点

透过左侧的内容源,张开对应的 JavaScript 文件,鼠标点击文件的行号就足以设置和删除断点。加多的种种断点都会冒出在侧边调节和测量试验区的 Breakpoints 列表中,点击列表中断点就能够稳定到内容区的断点上。即使您有三个文本、七个断点的话,利用Breakpoints 列表中的断点赶快牢固特别便利。

澳门新莆京手机网站 19

对此每种已加多的断点都有二种情景:激活和剥夺。刚加多的断点都以激活状态,禁用状态就是保留断点但临时撤消该断点功用。在Breakpoints 列表中种种断点前边都有贰个复选框,撤除选中就将禁止使用该断点。断点地方的右键菜单中也得以禁止使用断点。也足以在侧边作用区上边澳门新莆京手机网站 20开关有的时候禁止使用全数已加多的断点,再点一下恢复生机原状态。

基准断点:在断点地方的右键菜单中选取“Edit Breakpoint...”能够设置触发断点的规范化,便是写三个表明式,表明式为 true 时才触发断点。查看断点的条件调用栈(Call Stack):在断点停下来时,侧边调节和测量检验区的 Call Stack 会突显当前断点所处的章程调用栈,比方有一个函数 g(卡塔尔(قطر‎ 此中又调用了函数 f(卡塔尔,而小编在 f(卡塔尔 中设置了三个断点,那么笔者在 console 中推行函数 g()的时候会触发断点,其调用栈呈现如下:

澳门新莆京手机网站 21

最上边是 f(卡塔尔,然后是 g(卡塔尔(قطر‎。调用栈中的每生龙活虎层叫做二个 frame,点击每一个 frame 可以跳到该 frame 的调用点上。

澳门新莆京手机网站 22

别的,仍是可以够在 frame 上用右键菜单重新开头实行当前 frame,也正是从该 frame 的早先处实行。例如在函数 f(State of Qatar 的 frame 上 Restart Frame, 断点就能够跳到 f(卡塔尔 的始发重新奉行,context 中的变量值也会借尸还魂。那样组合变量改革和编写制定代码等效果,就足以在当前 frame 中屡屡开展调治,而不用刷新页面重新触发断点了。查看变量

澳门新莆京手机网站 23

Call Stack 列表的江湖是 Scope Variables 列表,在这里间可以查阅这时候部分变量和全局变量的值。推行采用的代码

澳门新莆京手机网站 24

在断点调节和测量检验时,能够用鼠标选择想要查看的变量或表明式,然后右键菜单奉行“Evaluate in Console”,就能够看出该表明式的如今的值了。中断下一次要实践的 JavaScript 语句右边调节和测量检验区的上边的“中断/继续”按键还大概有多个效果,在未曾触发断点时,点一下那几个按键就能够跻身“计划”中断的景色,页面后一次推行JavaScript 语句时会自动行车制动器踏板,举个例子触发了二个点击动作时会实行的代码。一时改善JavaScript 代码平常我们在调解代码时习于旧贯:修正代码→刷新页面→重新检讨,这么三个周而复始。但实则 Chrome 中能够不常更正 JS 文件中的内容,保存(Ctrl+S)就能够立时生效,结合 Console 等作用就能够及时重新调节和测量检验了。但注意那么些订正是权且的,刷新页面改良就没了。

分外时断点

在分界面下方能来看澳门新莆京手机网站 25按键,它是安装程序运转时相遇非常时是或不是中断的按键。点击该按键会在3种状态间切换:

澳门新莆京手机网站 26暗中同意碰着非常不暂停

澳门新莆京手机网站 27遇上具备非常都会暂停,包蕴已抓获的气象

澳门新莆京手机网站 28仅在产出未捕获的非常时才中断

根本解释一下状态2和气象3的分别

try{
throw 'a exception';
}catch(e){
console.log(e);
}

上面 try 里面包车型客车代码会遭遇极其,不过后边的 catch 代码能够捕获该极其。假诺是具有非常都中断,那么代码推行到会发生特其他throw 语句时就能够活动脚刹踏板;而只倘诺仅蒙受未捕获万分才中断,那么这里就不会中断。经常大家会更爱抚碰到未捕获格外的景况。

在 DOM 成分上设置断点

不常候大家须要监听某些 DOM 被改进景况,而不关心是哪行代码做的改良(也说不佳有多处都会对其做修改)。那么大家得以一向在 DOM 上安装断点。

澳门新莆京手机网站 29

如图所见,在要素核查的 Elements Panel 中在某些成分上右键菜单里可以安装二种不一致情形的断点:子节点改过自个儿性质改正自己节点被删去选中之后,Sources Panel 中右边的 DOM Breakpoints 列表中就能够现出该 DOM 断点。大器晚成旦施行到要对该 DOM 做相应修改时,代码就能够在那边停下来,如下图所示。澳门新莆京手机网站 30

XHR 断点

出手调节和测量检验区有一个 XH翼虎 Breakpoints,点击+ 并输入 UCRUISERL 富含的字符串就可以监听该 ULX570L 的 Ajax 必要,输入内容就一定于 U本田UR-VL 的过滤器。假诺什么都不填,那么就监听全体 XHHighlander 诉求。生龙活虎旦 XHPRADO调用触发时就能在 request.send(卡塔尔(قطر‎ 的地点暂停。

按事件类型触发断点

动手调节和测量检验区的伊芙nt Listener 列表,这里列出了各类只怕的平地风波类型。勾选对应的事件类型,当接触了该项指标风浪的 JavaScript 代码时就能够自动制动踏板。

调解急速键

澳门新莆京手机网站 31享有开采工具中的快速键都得以在分界面右下角的设置中查到。断点调试时平时用的是 F8、F10、F11或 Shitf+F11,但在 Mac OS 上 F10 等功用键或者与系统私下认可的火速键矛盾。不要紧,它们各自能够用 Cmd+/ 、Cmd+'、Cmd+; 、Shift+Cmd+; 取代。//@ sourceUEnclaveL 给 eval 出来的代码命名不时候某些不胜动态的代码是以字符串的款式通过 eval(State of Qatar函数在当前 Javascript context 中开创下来,而不是用作三个独立的 js 文件加载的。那样您在左手的内容区就找不到这几个文件,因此很难调节和测量试验。其实大家只要在 eval 创立的代码末尾加多生龙活虎行 “//@ sourceU中华VL=name“就可以给这段代码命名(浏览器会特殊对待这种格外形式的解说),那样它就能冒出在侧面的内容区了,就就像你加载了一个点名名字的 js 文件豆蔻梢头律,能够安装断点和调度了。下图中,大家通过 eval 执行了后生可畏段代码,并应用sourceU瑞鹰L 将它取名称为dynamicScript.js ,实施后侧边内容区就现身了那么些“文件”,而它的从头到尾的经过就是 eval 的中的内容。澳门新莆京手机网站 32还足以看看这一个给动态编写翻译出来的CoffeeScript 代码命名的现身说法:

var coffee = CoffeeScript.compile(code.value)+ "//@ sourceURL=" + (evalName.value || "Coffeeeeeeee!");
eval(coffee);

实则,//@ sourceU君越L 不仅能够用在 eval 的代码中,任何 js 文件、以至是 Javascript Console 输入的代码都足以用,效果等同!格式化代码(Pretty Print)澳门新莆京手机网站 33开关用于把杂乱的代码重新格式化为雅观的代码,举例有个别已被减去的 js 文件主题没有办法看、更无法调节和测验。点一下格式化,再点一下就撤销格式化。澳门新莆京手机网站 34美化前
澳门新莆京手机网站 35美化后参谋资料:Chrome Developer Tools 官方文书档案

你是怎么调节和测量试验 JavaScript 程序的?最原始的方法是用 alert(卡塔尔(قطر‎在页面上打字与印刷内容,稍...

澳门新莆京手机网站 36

Chrome Developer Tools

Chrome 开垦工具

谷歌(Google卡塔尔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程序

值得再度重新一遍,Sources是相近的功能开采中最常用到也是最可行的功效面板,它当中的浩大体义对于大家付出前端工程以来是非常有帮衬的。在web2.0时日的几日前,小编不引入照旧在投机的代码里面写调节和测量检验新闻的作为,因为那会然你的付出变得烦琐。Chrome开拓工具给大家提供的无敌功效,大家应有好好利用之。那篇作品就到此截止,尽管有个别麻烦,但终究基本发挥了卤煮使用经历和设法,希望对你有赞助。若是您以为不错,请推荐一下本文并三番五次关心卤煮在的博客。在下生龙活虎篇中作者将向大家介绍Chrome开辟工具中的品质方面包车型地铁调护治疗。

Developer Menu

模拟器开启Developer Menu

  • iOS模拟器
    • 能够因此Command⌘ + D快捷键来急迅张开Developer Menu
  • android模拟器
    • 可以透过Command⌘ + M连忙键来相当慢展开Developer Menu。也能够通过模拟器上的菜单键来展开

真机开启Developer Menu

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

?

断点

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

  • 加上和移除断点

在 Sources 面板的文书导航面板中开辟一个JavaScript文件来调整,点击边栏(line gutter)为当前进设置贰个断点,已经设置的断点处会有三个水绿的标签,单击铁灰标签,断点即被移除

image

右键点击深黄标签会张开贰个菜单,菜单包蕴以下选项:实践到此(Continue to Here卡塔尔(قطر‎,黑盒脚本(布莱克box scripts卡塔尔(قطر‎,移除断点(Remove Breakpoint卡塔尔(قطر‎, 编辑断点(Edit Breakpoint卡塔尔国,和 禁止使用断点(Disable Breakpoint卡塔尔(قطر‎。在这里地您能够对断点举行更加高端的操作

image

高级操作

  • Continue to Here

举个例子您想让程序及时跳到某意气风发行时,那几个职能会帮到你。假如在该行在此之前还会有别的断点,程序会相继通过前边的断点。其余需求提出的是其风度翩翩成效在任性风姿洒脱行代码的边栏(gutter lineState of Qatar前单击右键都走访到

  • Blackbox scripts

黑盒脚本会从您的调用商旅中潜藏第三方代码

  • Edit Breakpoint

透过该成效你能够创建一个条件断点,你也足以在边栏(gutter line卡塔尔国右键并精选丰富条件断点(Add Conditional Breakpoint卡塔尔(قطر‎。在输入框中,输入多少个可深入剖判为真或假的表明式。仅当准则为真时,实施会在这里制动踏板

image

假诺您想让程序在某处一贯都毫无暂停,能够编写制定叁个规范永久为false的法规断点。此外,你也足以在该行代码的边栏(gutter lineState of Qatar前单击右键选取“Never pause here”就可以,你会意识“Never pause here”其实正是在该行代码上设了多少个千古为false的规格断点

image

管制断点

您能够透过Chrome开荒者工具的右左侧板来合併保管你的断点

image

你可以由此断点前的复选框来启用和剥夺断点,也足以单击右键来进展越来越多的操作(如:移除断点,移除全部断点,启用禁用断点等卡塔尔

大局断点

全局断点的功力是,当程序现身万分时,会在格外的地点暂停,这对高速定位异的常地点异常的低价。
做iOS开采的同校都领悟在Xcode中可以设置全局断点,其实在Chrome 开采者工具中也大器晚成律有与之对应的效力,叫'Pause On Caught Exceptions'。若是勾选上此作用,则便是所发出运转时十分的代码在 try/catch 范围内,Chrome 开荒者工具也能够在错误代码处停住

image

2、不跳入函数中去,继续施行下风流倜傥行代码(F10State of Qatar

Sources面板

Sources面板提供了调弄整理 JavaScript 代码的意义

image

Sources面板能够让您看看您所要检查的页面包车型大巴有所脚本代码,并在面板选拔栏下方提供了生龙活虎组正式控件,提供了暂停,复苏,步进等作用。在窗口的最下方的按键可以在遇见特别(exceptionState of Qatar时抑遏中止。源码显示在独立的标签页,通过点击 展开文件导航面板,导航栏中会呈现全数已开发的剧本文件

Chrome开辟着工具中的Sources面板差相当的少是最常用的机能面板。平常就算是开垦境遇了js报错或然别的代码难点,在审美二遍本身的代码而瓦解冰消之后,首先就可以张开Sources实行js断点调试

实行调整工具

从上航海用图书馆能够观察'执行调控工具'按键在侧板顶端,让您能够按步试行代码,当你进行调治的时候那多少个按键极度管用:

  • 后续(Continue卡塔尔国: 继续试行代码直到际遇下八个断点
  • 单步施行(Step overState of Qatar: 步进代码以查看每生机勃勃行代码对变量作出的操作,现代码调用另四个函数时不会进去那么些函数,使您能够小心于方今的函数
  • 跳入(Step into卡塔尔: 与 Step over 相同,不过现代码调用函数时,调节和测量检验器会进去那一个函数并跳转到函数的率先行
  • 跳出(Step outState of Qatar: 当你进来三个函数后,你能够点击 Step out 试行函数余下的代码并跳出该函数
  • 断点切换(Toggle breakpoints卡塔尔(قطر‎: 调整断点的打开和停业,同不时候保险断点完好

查看js文件

如果你想在开辟者工具上预览你的js文件,能够在开荒Sources tab下的debuggerWorker.js选项卡,该选项卡下会呈现当前调节和测量试验项指标有着js文件,只怕是用便捷键 cmd + o 调出文件搜索直接开展搜寻,那一个越发方便高效

澳门新莆京手机网站 37

怎么着真机调节和测验

  • iOS上

布署好相应的调治将养证书,直接连接线连接到真机械运输转就能够

  • android

挥舞手提式无线电话机,调出Developer Menu面板,在'Developer Menu'下的'Dev Settings'中Debug server host & prot for device配置本身路由器ip地址。端口使用8081就可以

image

image

1、结束断点调节和测验

Warning

React Native程序运转时现身的Warnings也会被直接呈现在显示屏上,以色情的背景体现,并会打字与印刷出警报新闻,你也能够透过console.warn()来手动触发Warnings,你也能够通过console.disableYellowBox = true来手动禁止使用Warnings的显得,或然经过console.ignoredYellowBox = ['Warning: ...']来忽视相应的Warning

img

接下去在区域4种切换成Watch Expressions 选项,它的功能是为当下断点增添表明式,使得每便断点往下走一步都会施行你写下的js代码。需求潜心的是以此作用必得小心选拔,因为那可能会促成你写下的监督检查代码段会不断地被实践。

控制台

DevTools调整台(ConsoleState of Qatar能够令你在近来已中断的景况下进展试验。按 Esc 键张开/关闭调整台

你能够在调整台(Console卡塔尔国上打字与印刷变量,施行脚本等操作。在支付调节和测量检验中最常用

image

归来区域1,Content script 选项开里面富含着某个第三方插件或许浏览器自个儿的js代码,平日它是被忽略的,实际上它的效能超少。我们能够更加多关怀一下Snippets选项。还记得基本功篇里面介绍的style吗?在此中大家能够编写制定界面包车型大巴css代码况且即时看见它们的映照效果,同样地,在Sinppets中,我们也 能够编写制定(重写State of Qatarjs代码片段。那几个部分其实就一定于您的js文件黄金年代律,分歧的是本地的js文件在编辑器里面编辑的,而那边,你是在浏览器中编辑的。这一个代码片段在浏览器刷新的时候既不会销声匿迹,也不会履行,除非是你手动实践它。它能够存在你的本地浏览器中,尽管关闭浏览器,再一次展开时它依然还在这里边。它的显要成效能够使得我们编辑一些品种的测量检验代码时提供方便人民群众,你驾驭,假若你在编辑器上编写制定这个代码,在昭示时你必得为它们拉长注释符号可能手动删除它们,而在浏览器上编写制定就无需如此麻烦了。

React Native / React调节和测量检验才具

做过原生应用程式开辟的同室们都明白,咱们在Xcode和studio中就足以直接对编写的代码举办断点调节和测量试验,很有利,可是web开垦断点调节和测量试验就无法一向在开辟工具中成功了,需求借助浏览器来完结,React相关的开销断点调节和测量试验和web开拓好些个相符,也是在浏览器上海展览中心开调解,即便尚无原生那么方便人民群众,然则也还算轻易。React Native调节和测验需求依赖官方的Developer Menu,下边大家就来大约聊聊这些Developer MenuChrome Developer Tools

澳门新莆京手机网站 38

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⌘ + Koleos 不可能让你的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效用你就可以实时的预览构形成效了,方便省时

在上海体育场所大青圆圈中数字,它们各自代表:

Error

React Native程序运转时现身的Error会被直接突显在荧屏上,以革命的背景展示,并会打字与印刷出错误信息, 你也足以通过 console.error(卡塔尔(قطر‎来手动触发Error

img

注意: 在生养条件release下Error和Warning效能不在生效

澳门新莆京手机网站 39

什么样通过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

上一篇:没有了 下一篇:没有了

Copyright © 2015-2019 http://www.carrefourstation.com. 澳门新莆京手机网站-新蒲京娱乐场有限公司 版权所有