[转]GoogleChrome浏览器开拓者工具教程—JS调节和测验篇

2019-11-26 16:08栏目:龙电竞官网
TAG:

Chrome开垦者工具不完全指南(二、进级篇卡塔 尔(英语:State of Qatar)

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: 包蕴该项指标静态财富文件。双击选汉语件,该文件内容会在区域2中突显,如若您选中的是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,你修复精通后无法看见它的确在线上的机能,那么您能够在开发线上的品类,直接在浏览器中期维改进代码然后看见效用。那样的作用往往是最直接的,这种形式也能帮您省去频仍验证发表的劳动,究竟身为前端码农的你也终将会听到过后台(经常状态下是后台公布卡塔 尔(英语:State of Qatar)四弟的痛恨:“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汉兰达L 饱含的字符串就能够监听该 U瑞鹰L 的 Ajax 央浼,输入内容就约等于 U奥迪Q5L 的过滤器。倘若什么都不填,那么就监听全体 XHOdyssey央求。黄金年代旦 XH奥迪Q7 调用触发时就能够在 request.send() 的地点暂停。

5、为网页增添各体系型的断点音讯。如选中了Mouse中的某生龙活虎项(click卡塔尔国,当你在网页上起身这些动作(单击网页跋扈地方卡塔 尔(阿拉伯语:قطر‎,你浏览器就是即时断点监察和控制该事件。

 

值得再次重新二次,Sources是相仿的职能开拓中最常用到也是最得力的效能面板,它个中的浩大功用对于我们开辟前端工程以来是非常有助于的。在web2.0一代的几日前,小编不引入依旧在团结的代码里面写调节和测量检验新闻的行为,因为那会然你的支付变得烦琐。Chrome开垦工具给大家提供的无敌作用,大家相应能够利用之。那篇随笔就到此甘休,即便某个麻烦,但总算基本发挥了卤煮使用涉世和主张,希望对你有帮扶。若是您以为不错,请推荐一下本文并继续关注卤煮在的博客。在下意气风发篇中本人将向大家介绍Chrome开垦工具中的品质方面包车型地铁调节和测验。

1 赞 15 收藏 3 评论

图片 14

来源:

React Native / React调节和测验本领

做过原生应用软件开辟的同学们都知情,大家在Xcode和studio中就足以平素对编写的代码进行断点调试,很实惠,可是web开采断点调节和测量检验就不能够一直在开拓工具中做到了,须要依赖浏览器来完毕,React相关的支出断点调节和测量试验和web开荒好多同样,也是在浏览器上开展调节和测量检验,就算尚未原生那么方便,然则也还算轻易。React Native调试需求正视官方的Developer Menu,上边大家就来简单聊聊那一个Developer MenuChrome Developer Tools

上后生可畏篇大家上学了谷歌(Google卡塔 尔(英语:State of Qatar)Chrome浏览器开拓者工具的底子成效,下边介绍的是Chrome开采工具中最实惠的面板Sources。 Sources面板大概是最常用到的Chrome功用面板,也是消除通常难题的首要成效面板。常常借使是支付境遇了js报错或许其余代码难题,在审美二回代码而一无所获之后打开Sources举办js断点调节和测验,差十分的少能解决8成的代码难点。

Developer Menu

模拟器开启Developer Menu

  • iOS模拟器
    • 能够因而Command⌘ + D飞快键来急迅展开Developer Menu
  • android模拟器
    • 能够因而Command⌘ + M火速键来相当慢展开Developer Menu。也能够透过模拟器上的菜单键来展开

真机开启Developer Menu

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

js断点成效令人欢喜不已,从前只好在IE中靠alert弹出窗口调节和测验js代码,那样的支付碰着对于前端技术员来讲大致是一场惊恐不已的梦。本篇介绍Sources的具体用法,帮忙各位在开垦进程中够欢喜地调节和测量试验js代码,并不是因它而疯狂。

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⌘ + 奥迪Q7 不能使您的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功效你就足以实时的预览布局功效了,方便省时

率先张开F12开垦工具切换来Sources面板中

Warning

React Native程序运转时出现的Warnings也会被一向展现在荧屏上,以色情的背景体现,并会打字与印刷出警报消息,你也得以通过console.warn()来手动触发Warnings,你也足以由此console.disableYellowBox = true来手动禁止使用Warnings的显得,大概经过console.ignoredYellowBox = ['Warning: ...']来忽视相应的Warning

img

图片 15

Error

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

img

注意: 在生育情形release下Error和Warning成效不在生效

Sources效用面板是财富面板,他注重分为七个部分,多个部分并不是单身的,他们互相关联,相互作用合营促成贰个重视的职能:监察和控制js在实行期的活动。同理可得就是断点啊。

如何真机调节和测量检验

  • iOS上

配置好相应的调和证书,直接连接线连接到真机械运输维就可以

  • android

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

image

image

率先我们来看区域1,它的功用有个别形似于Resources面板,首要是展现网页加载的本子文件:例如css, js等能源文件(它不包蕴cookie,img等静态能源文件)。

Chrome Developer Tools

Chrome 开辟工具

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

图片 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

区域1的导航条上有八个tab切换选项,他们都存有例外域名和条件下的js和css文件,大家首先来评释Sources(能源)选项的效果:

Sources面板

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

image

Sources面板能够令你看来你所要检查的页面包车型大巴兼具脚本代码,并在面板选取栏下方提供了风姿洒脱组正式控件,提供了中断,恢复生机,步进等效率。在窗口的最下方的按键能够在遇见极度(exception)时强制中止。源码展现在单独的标签页,通过点击 展开文件导航面板,导航栏中会呈现全数已打开的台本文件

Chrome开垦着工具中的Sources面板差相当少是最常用的机能面板。平常固然是支付碰着了js报错只怕别的代码难题,在审美壹遍自个儿的代码而瓦解冰消之后,首先就能够张开Sources进行js断点调试

施行调控工具

从上图可以看见'实施调节工具'按键在侧板最上部,让你能够按步实行代码,当您进行调节和测量试验的时候那多少个开关非常管用:

  • 后续(孔蒂nue): 继续执行代码直到碰到下一个断点
  • 单步推行(Step over): 步进代码以查看每生机勃勃行代码对变量作出的操作,今世码调用另二个函数时不会进去这一个函数,令你能够当心于当下的函数
  • 跳入(Step into): 与 Step over 相像,可是今世码调用函数时,调节和测验器会踏入那一个函数并跳转到函数的第生龙活虎行
  • 跳出(Step out): 当你走入多个函数后,你能够点击 Step out 实践函数余下的代码并跳出该函数
  • 断点切换(Toggle breakpoints): 调控断点的拉开和破产,同一时间保持断点完好

查看js文件

借使您想在开辟者工具上预览你的js文件,能够在展开Sources tab下的debuggerWorker.js选项卡,该选项卡下会突显当前调节和测量试验项目标有着js文件,或然是用便捷键 cmd + o 调出文件寻找直接开展搜寻,那些更是便利连忙

Sources: 满含该项目标静态能源文件。双击选中文件,该文件内容会在区域第22中学展现,假如您选中的是js文件,那么你能够在区域2种单击行号进行断点调节和测量检验,只要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

图片 17

控制台

DevTools调整台(Console)能够让你在近日已暂停的图景下展开考试。按 Esc 键张开/关闭调整台

您能够在调节台(Console)上打印变量,实行脚本等操作。在开荒调节和测量检验中最常用

image

从上海教室可以看来js施行到断点处时每个地区的变化,首先是区域3中的Breakpoints记录消息会变高亮,然后是区域4中Scope 选项中列出了断点处私有和国有的变量音讯,那样,小编得以很直观地明白,一时一刻js的履市价况。相像的,你能够把鼠标放到区域2种的某部变量上,浏览器会弹出三个小框框,框框里面则是您悬浮其上的变量全数音讯:

福利时间

  • 笔者React Native开源项目OneM地址(根据公司支付标准搭建框架产生开荒的):https://github.com/guangqiang-liu/OneM 款待小同伴们 star
  • 笔者React Native QQ本领调换群:620792950 应接小同伴进群沟通学习
  • 末尾重申:**开拓中有遇上QashqaiN相关的本事问题,应接小同伴参预沟通群,在群里提问、相互交流学习。调换群也按时更新最新的奥迪Q3N学习资料给大家,谢谢扶助! **

图片 18

下一场,你能够按F10随时js实施的门路一步一步地走下来,假诺你碰着了三个函数包涵着此外一个函数,那么您能够按F11进来到个函数中去观看它的代码实施活动。你也足以因此点击区域1平底的逐一Logo对js代码举办跟踪。不过自个儿提出您利用急迅键,故名思义,因为它比较灵通实惠。不过怎么用完全依据个人习贯来啊。下图是种种按钮的效果与利益功效。

图片 19

在上海教室浅灰褐圆圈中数字,它们各自代表:

版权声明:本文由龙竞技官网发布于龙电竞官网,转载请注明出处:[转]GoogleChrome浏览器开拓者工具教程—JS调节和测验篇