Chrome开发者工具不完全指南(一、基础意义篇)

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

原稿出处:
卖烧烤夫斯基   

即使你不是一名前端开发工程师,相信你也不会对Chrome浏览器感到陌生。按照最新的一份(2015/06)的浏览器市场占有率报告,Chrome近乎占有浏览器天下的半壁江山。简单、急速使它成为了新时代芸芸众生的新宠。尽管您是一名web开发人士,我推荐你使用Chrome。作为前端开发的”IDE”,你只必要搭配一个编辑器就能不辱职责大致所有的花费职责了。关于它的使用和功用分析要么都是大而不全,要么是细细的糜烦。本系会相比详细地分享卤煮的局地Chrome(F12开发者功用)使用经验,从局地基础的意义伊始到它的一部分高档质量分析器(提姆eline、Profiles),在终极,将会推荐五款好的插件,希望对你的付出工作有微微的作用。假若你对有些面板模块功用已经很驾驭能够直接跳过去阅读你感兴趣的片段。

一、Elements
图片 1
在Element中举足轻重分两块大的有的
A:HTML结构面板
B:操作dom样式、结构、时间的来得面板
1.在A中,每当你的鼠标移动到其它一个元素上,对应的html视图中会给该因素棕色的背景。
图片 2
2.一旦你单击选中一个要素,在A部分的平底,会显示该因素在html结构中的地点关系
图片 3
3.然后你可以在B部分的styles选项中编辑该因素的样式,并且探望html结构的实时更新(大大的福利)
图片 4
4.您可以在B界面中切换来伊夫nt Listeners选项,观察该因素绑定的风浪。
图片 5

click 是事件名称

.div1 轩然大波是索引名称(也就是通过怎么着绑定的)

attachment 事件源点

handler里面包罗事件的毁损主体内容

useCapture代表该事件是还是不是向上冒泡
5.选中一个因素,右击鼠标,你相会到有一个弹出窗口出现,里面有好多抉择
图片 6
Add attribut : 为该因素添加属性
Edit attribute:修改该因素的质量
Force element state:
为元素激活某种情况(主要用在可以大致的要素比如a、input、button等)
Edit as
HTML:编辑该因素(你可以重写它的整套content)甚至修改它的标签名称
当中简单的掠过…….
Break
on:为该因素添加dom操作事件监听。包罗多少个拔取(树结构改变、属性改变、节点移除)。那个选项的效果是帮忙我们监控和一定操作元素的代码。请参考下图事例:
图片 7
6.在A界面的弹出选项窗口中拔取node removal,在B界面切换来DOM
Breakpoints 选项,可以见见有登记音信。然后大家点击click
me按钮触发删除div3的风云,可以见到浏览器自动为大家一定删除该因素的代码部分,并且甘休执行js代码:

图片 8

 

7.在B界面中切换来Properties选项,可以寓目选中元素的各个新闻(英文单词里面的介绍比较简单,就不一一介绍了)。

图片 9

 

8.点击A界面的肆意地点,按神速键ctrl+F能够观察底部有输入框,在输入框中输入你想要查找的其它内容,若是同盟到了,都回在A面板中高亮显示
图片 10
9.依旧你可以点击左上角的问号图标,然后把鼠标移动到视图界面中,对准元素按下鼠标左键,对应的A界面会定位到选用的因素。
图片 11

 

 

二、Network
图片 12
1.Network是一个督察当前网页所有的http请求的面版,它主体部分显得的是种种http请求,每个字段表示着该请求的不一致性质和气象
图片 13
Name:请求文件名称
Method:方法(常见的是get post)
Status:请求完毕的情状
Type:请求的花色
Initiator:请求源也就是说该链接通过什么样发送(常见的是Parser、Script)
Size:下载文件或者请求占的资源大小
提姆e:请求或下载的时光
提姆eline:该链接在发送进度中的时间状态轴(我们可以把鼠标移动到那几个红红绿绿的时间轴上,对应的会有它的详细新闻:最先下载时间,等待加载时间,自身下载耗时)
图片 14
2.单击面板中的任意一条http新闻,会在底层弹出一个新的面板,其中记录了该条http请求的详实参数header(表头新闻、重临新闻、请求基本意况—请参考http1.1商谈内容对号落座)、Preview(重临的格式化转移后文本音信)、response(转移此前的原本音信)、库克ies(该请求带的cookies)、提姆ing(请求时间转移)
图片 15
3.在主面板的顶部,有一对按钮从左到右它们的职能分别是:是不是启用继续http监控(默许高亮选中过)、清空主面板中的http消息、是或不是启用过滤音信选项(启用后方可对http新闻举行筛选)、列出多种特性、只列出name和time属性、preserve
log(近日不精晓啥用)、Dishable cahe(禁用缓存,所有的304重临会和fromm
cahe都回变成健康的乞请忽视cache conctrol 设定);

图片 16
4.结尾在主面板的最底层有记录了完全互连网请求状态的片段为主信息
图片 17

三、Resources

Resources部分较不难,他根本向大家浮现了本界面所加载的资源列表。还有cookie和local
storage 、SESSION
等本地存储音信,在那边,大家得以随心所欲地修改、伸张、删除本地存储。

图片 18 至于webSql,我驾驭的并不多,在支付中很少用到。如果你想询问那上头的音信,我引进您去读书那篇博客

Chrome开发者工具不完全指南,基础功能篇。 1 赞 28 收藏 2
评论

图片 19

Chrome开发者工具不完全指南(一、基础意义篇)

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

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

原文出处:
卖烧烤夫斯基   

上篇向我们介绍完了基础成效篇,这一次分享的是Chrome开发工具中最得力的面板Sources
 Sources面板大约是本人最常用到的Chrome功用面板,也是在我看来决解一般难点的重大功能面板。平日要是是开发碰到了js报错或者其余代码难点,在审视一遍自己的代码而一名不文之后,我首先就会打开Sources拓展js断点调试,而它也大概能化解本身80%的代码难题。Js断点那些效果令人欢喜不已,在未曾js断点效用,只好在IE(万恶的IE)中靠alert弹出窗口调试js代码的一时(更加alert一个object根本不会理你),那样的费用条件对于前端程序员来说几乎是一场恶梦。本篇文章讲会介绍Sources的现实用法,扶助各位在支付进度中够快乐地调试js代码,而不是因它而疯狂。首先打开F12开发工具切换来Sources面板中:

图片 20

Sources意义面板是资源面板,他主要分为多少个部分,八个部分并不是单身的,他们相互关联,互动共同促成一个重大的效果:监控js在执行期的移位。简而言之就是断点啊。

第一大家来看区域1,它的机能有些看似于Resources面板,紧假诺突显网页加载的本子文件:例如css,
js等资源文件(它不带有cookie,img等静态资源文件)。

 

图片 21

 

 

 

区域1的导航条上有多个tab切换选项,他们都存有两样域名和条件下的js和css文件,我们首先来注明Sources(资源)选项的机能:

Sources:
包罗该品种的静态资源文件。双击选中文件,该公文内容会在区域2中显得,借使您选中的是js文件,那么您可以在区域2种单击行号举行断点调试,只要js执行到了你所标记的这一行,它会告一段落向下举行并且等待你的吩咐:

图片 22

从上图可以看出js执行到断点处时各种区域的变迁,首先是区域3中的Breakpoints记录音信会变高亮,然后是区域4中Scope 选料中列出了断点处私有和国有的变量消息,那样,我得以很直观地驾驭,此时此刻js的进行景况。同样的,你可以把鼠标放到区域2种的某个变量上,浏览器会弹出一个小框框,框框里面则是你悬浮其上的变量所有新闻:

 

图片 23

接下来,你可以按F10继之js执行的不二法门一步一步地走下去,即便您遇见了一个函数包括着别的一个函数,那么你可以按F11进入到个函数中去观望它的代码执行活动。你也足以经过点击区域1尾部的顺序图标对js代码举行跟踪。但是我提议你选取飞快键,故名思义,因为它相比较高效便利。不过怎么用完全根据个人习惯来啊。下图是各样按钮的效劳听从。

 

图片 24

 

 在上图红色圆圈中数字,它们分别表示:

  1、停止断点调试

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

  3、跳入函数中去(F11)

  4、从执行的函数中跳出

  5、禁用所有的断点,不做任何调试

  6、程序运行时相遇尤其时是或不是中断的开关

接下去在区域4种切换来Watch
Expressions
 选项,它的功效是为当下断点添加表明式,使得每一次断点往下走一步都会进行你写下的js代码。须要留意的是那一个意义必须审慎选拔,因为那说不定会造成您写下的监督代码段会不断地被执行。

图片 25

 

为了幸免你的调节代码重复执行,大家得以在调试时平素在console控制台上三遍性地出口当前断点处的新闻(推荐那样做)。为了表达大家在console面板中持有的是近来断点环境,我门可以相比较断点执行前后的this值变化。

图片 26   
  图片 27

比方你认为在断点的时候为了看一个变量必须借用console面板输出的不二法门来查看会比较麻烦,那么你可以立异最新版的Chrome,它已经为我们缓解了那些烦恼。为了方便开发者调试,在那或多或少上谷歌(谷歌(Google))一度达成了无限,就在前日更新过Chrome将来,卤煮意外地意识了断点时监控环境变量的其它一种艺术,这种办法极为清晰,在断点调试的时候,区域2中会自动显示每个变量的值,每回代码往下走的时候这一个值都回时时更新。那让开发者对当下环境变量差不离可以说是洞察。(此作用有一个小缺点,这就是心有余而力不足查看数组或者目的的现实性索引和值,不过自己深信google会创新它的。)

图片 28

 

当你的种类现已线上,出现了一个bug,你修复精晓后无法看到它真的在线上的效能,那么您可以在打开线上的体系,直接在浏览器中修改代码然后看到成效。那样的功能往往是最直白的,那种方法也能帮您省去频仍验证发表的坚苦,毕竟身为前端码农的您也自然会听到过后台(平日状态下是后台发表)堂弟的埋怨:“XXX,测试通过了没,不要现身了哈,发布三遍很麻烦的!”。而在Chrome里面,只须要在区域2种间接修改,你就可以证实你的代码在线上是还是不是管用。卤煮在此间只是提出该意义的用法之一。其余的就凭诸位的聪明才智去想了。

图片 29   
 
  图片 30

尽管在断点时,你也足以编制代码,按ctrl+S保存之后,你会看出区域2的背景由白色变为浅色,而断点会重新起始实施。

归来区域1,Content
script
 选项开里面包涵着一些第三方插件或者浏览器自身的js代码,平时它是被忽略的,实际上它的出力很少。我们得以越多关切一下Snippets采纳。还记得基础篇里面介绍的style啊?在内部我们可以编写界面的css代码并且即时观察它们的投射效果,同样地,在Sinppets中,大家也
可以编写(重写)js代码片段。那些片段其实就一定于你的js文件一律,分裂的是地方的js文件在编辑器里面编辑的,而那里,你是在浏览器中编辑的。这么些代码片段在浏览器刷新的时候既不会熄灭,也不会履行,除非是您手动执行它。它可以存在你的本土浏览器中,固然关闭浏览器,再次打开时它依然还在那边。它的首要功用可以使得大家编辑一些品种的测试代码时提供便民,你精通,如若你在编辑器上编制那个代码,在颁发时你必须为它们增加注释符号或者手动删除它们,而在浏览器上编制就不须求这么麻烦了。

Snippets分选的空白点右键后选拔弹出的new选项,建立一个您自己的新的公文,然后在区域2种编辑它。

图片 31

 

Snippets 的不行功用强大,它的很多逃匿功能还有待打通。近年来卤煮使用它是在挥之不去调试片段、单元测试、少量的功效代码编写作用上。

终极我们看看js中时间累加的监控效率,同上篇作品介绍的相同,Sources面板和Elements面板一样有监督事件的职能,而且Sources中功效更是助长,也越来越强有力。它的那有的作用集中在区域3中。我以下图为例,观看其功用。

图片 32

 

从上到下,黄色圈内的数字的含义:

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、在区域2中您的断点调试音信。当某个断点在履行的时候对应的音讯会高亮,双击该处音信方可在区域2中快速稳定。

3、添加的Dom监控新闻。

4、击+ 并输入 URL 包涵的字符串即可监听该 URL 的 Ajax
请求,输入内容就相当于 URL 的过滤器。如若什么都不填,那么就监听所有 XHR
请求。一旦 XHR 调用触发时就会在 request.send() 的地点暂停。

5、为网页添加各类类型的断点新闻。如选中了Mouse中的某一项(click),当您在网页上出发这么些动作(单击网页任意地方),你浏览器就是当下断点监控该事件。

 

值得再一次重新一次,Sources是相似的机能开发中最常用到也是最有效的作用面板,它里面的洋洋效应对于大家付出前端工程以来是分外有帮带的。在web2.0时期的明天,我不推荐依旧在大团结的代码里面写调试音讯的表现,因为那会然你的开销变得繁琐。Chrome开发工具给我们提供的强劲功能,大家应该可以利用之。那篇文章就到此甘休,就算有些麻烦,但终归基本发挥了卤煮使用经验和设法,希望对您有帮带。要是你以为不错,请推荐一下本文并持续关切卤煮在的博客。在下一篇中自我将向大家介绍Chrome开发工具中的品质方面的调试。

1 赞 15 收藏 3
评论

图片 33

Chrome开发者工具不完全指南(五、移动篇)

2015/07/06 · HTML5 ·
Chrome

初稿出处:
卖烧烤夫斯基   

眼前介绍了Chrome开发者工具的绝一大半情节工具,现在牵线最终两块功效AuditsConsole面板。

一、Audits

奥迪ts面板会指向当下网页指出若干条优化的提出,这几个提议分为两大类,一类是网络加载质量,另一类是界面品质。首先开下它的主界面。

图片 34

Audits面板的互连网优化提出参考的是雅虎前端工程师的十四条黄金提出。为了表明那一点,大家得以做一遍不难的测试。依据十四条web质量指出中的其中一条:把css文件应当放入html文档的顶部,幸免网页在渲染dom后出现闪烁的题材。我们写如下不专业代码

XHTML

<!DOCTYPE html> <html> <head>
<title></title> </head> <body> </body>
<!– 把css文件放入尾部 –> <link rel=”stylesheet”
type=”text/css” href=”xuu.css”> </html>

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
 
</body>
<!– 把css文件放入底部 –>
<link rel="stylesheet" type="text/css" href="xuu.css">
</html>

下一场大家开首run了。你可以看出它会交到大家期待的建议,在web Page
Performance里面它交给了红点,前面的提出是:将css放入底部:

图片 35

晋级界面品质对于用户体验的话卓殊主要。借使您根据了十四条提议来拍卖优化你的web界面,那么现身在Audits中的新闻会变得很少。如果您还不明了那十四条提议,我推荐您去读书《web高质量建站》那本书。相信会对你有扶持。

二、Console

Console面版可以出口你协调代码。它可以合营其余面板一起行使。点击右上角的>_剪头可以启用或者吸收它。它也分了七个挑选:

Console:  用于出口和现实性调试音信
Search:  在域名下查找文件和情节
Emulation :  启用移动支付情势
Rendering:  在界面突显各个监督新闻

关于Console的玩法,已经有一位大神详细讲解过。我那里就不一一介绍。点击那里去拜读大神的小说吧。Search也相比不难,露珠就不啰嗦了。现在最紧要讲解一下Emulation情势下的运动支付。移动支付毫无疑问已经变成web开发的主力军了。所以,chrome也创造了一款匹配大家开发和测试的工具。

1.进来移动支付方式

手机支付格局我的提议是把控制面版右置。那样对手机支付来说是有益的。长按控制面板右上角类型标签(img4)可以切换控制面板的产出岗位。调整完控制面板的地方后。点击Emulation然后再点击出现在增选击面版中的文字。或者您一向点击开发者工具界面左上角的手机图标进入开发者形式。你可以见见当你切换来运动支付格局后,鼠标已经改为了小黑圈圈了。

2.调试设备

Device下拉菜单中挑选分裂的手机格局。里面包涵安卓和苹果系统的风靡机器。勾选Emulate
mobile选项能够适应屏幕。Resolution这一项能够调整手机显示屏的冲天和幅度。

3.效仿网络境况

Netword中精选模拟的互联网意况。包罗主流和非主流的各样互连网。(WIFI,3G,2G等)Sensors选项中自定义移动端的经纬度。在模型中可以设定3D视图角度。把鼠标放上去间接旋转模型。那几个功用暂时没察觉有吗卵用。

图片 36

许多调剂可以在界面进行,那也是露珠日常做的。实际运用到的选项chrome都人性化地列在了主界面。接纳了移动支付格局后界面会变成那样子:

图片 37

内需专注的是,Chrome浏览器模拟的只是界面,内核和原生的大队人马效果是模拟不了的,然则那对于做html5活动支付的来说早已充足了啊。

三、结束语

本篇文章主要介绍了活动支付测试的工具部分。chrome在模仿移动支付时效果有些欠缺。假如需求真机调试,诸位可以设想UC流浪器的开发版本(只协理安卓),chrome的活动版本(只帮衬安卓),或者自己买台mac(露珠买不起啊)再买台iphone(露珠的是小米的吊死机啊)协作联调。weinre那玩意儿只好调样式,还得投机加代码指出就毫无去用了。好了,Chrome开发者工具都介绍的几乎了,下一篇是本连串的尾篇。介绍四款插件用(包含高大上的开发者工具皮肤哦),敬请关切!

1 赞 8 收藏
评论

图片 38

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

网站地图xml地图