Chrome开发者工具不完全指南

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

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

原稿出处:
卖烧烤夫斯基   

不畏你不是一名前端开发工程师,相信你也不会对Chrome浏览器感到陌生。依照最新的一份(2015/06)的浏览器市场占有率报告,Chrome近乎占有浏览器天下的半壁江山。简单、急速使它成为了新时代大千世界的新宠。即使您是一名web开发人士,我推荐你使用Chrome。作为前端开发的”IDE”,你只须要搭配一个编辑器就能成就大致拥有的开发职务了。关于它的施用和作用分析要么都是大而不全,要么是细细的糜烦。本系会相比详细地分享卤煮的一对Chrome(F12开发者功效)使用经验,从局地基础的效劳起始到它的部分高等品质分析器(Timeline、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 事件源于

Chrome开发者工具不完全指南。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(转移以前的原本音信)、Cookies(该请求带的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,我知道的并不多,在支付中很少用到。若是你想询问那下边的音信,我引进您去读书那篇博客

1 赞 28 收藏 2
评论

图片 19

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

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

2015/07/06 · HTML5 ·
Chrome

原稿出处:
卖烧烤夫斯基   

前边介绍了Chrome开发者工具的多数情节工具,现在介绍最后两块作用AuditsConsole面板。

一、Audits

奥迪(Audi)ts面板会针对当前网页提出若干条优化的指出,那一个提出分为两大类,一类是网络加载质量,另一类是界面质量。首先开下它的主界面。

图片 20

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放入底部:

图片 21

升级界面品质对于用户体验的话越发关键。要是您根据了十四条提议来拍卖优化你的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视图角度。把鼠标放上去直接旋转模型。这几个功用暂时没察觉有甚卵用。

图片 22

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

图片 23

须求专注的是,Chrome浏览器模拟的只是界面,内核和原生的累累作用是模拟不了的,可是那对于做html5活动支付的来说早已够用了啊。

三、结束语

本篇小说主要介绍了移动支付测试的工具部分。chrome在模仿移动支付时效果有些欠缺。要是急需真机调试,诸位可以设想UC流浪器的支付版本(只襄助安卓),chrome的智尊版本(只扶助安卓),或者自己买台mac(露珠买不起呀)再买台iphone(露珠的是HTC的吊死机啊)合营联调。weinre那玩意儿只可以调样式,还得和谐加代码指出就无须去用了。好了,Chrome开发者工具都介绍的大半了,下一篇是本种类的尾篇。介绍三款插件用(包含高大上的开发者工具皮肤哦),敬请关心!

1 赞 8 收藏
评论

图片 24

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面板中:

图片 25

Sources职能面板是资源面板,他重视分为三个部分,多少个部分并不是单独的,他们互相关联,互动共同促成一个非同儿戏的效应:监控js在执行期的活动。不难的话就是断点啊。

第一大家来看区域1,它的机能有些近乎于Resources面板,紧即使显得网页加载的本子文件:例如css,
js等资源文件(它不包含cookie,img等静态资源文件)。

 

图片 26

 

 

 

区域1的导航条上有三个tab切换选项,他们都存有例外域名和条件下的js和css文件,大家第一来验证Sources(资源)选项的效益:

Sources:
蕴涵该项目标静态资源文件。双击选粤语件,该文件内容会在区域2中显示,要是您选中的是js文件,那么你可以在区域2种单击行号举办断点调试,只要js执行到了你所标记的这一行,它会告一段落向下执行并且等待你的通令:

图片 27

从上图可以见见js执行到断点处时各种区域的生成,首先是区域3中的Breakpoints记录新闻会变高亮,然后是区域4中Scope 接纳中列出了断点处私有和国有的变量新闻,这样,我得以很直观地通晓,此时此刻js的执行情形。同样的,你可以把鼠标放到区域2种的某部变量上,浏览器会弹出一个小框框,框框里面则是您悬浮其上的变量所有信息:

 

图片 28

接下来,你可以按F10随着js执行的不二法门一步一步地走下去,假若你碰着了一个函数包蕴着其余一个函数,那么您可以按F11跻身到个函数中去考察它的代码执行活动。你也可以由此点击区域1底层的依次图标对js代码举办跟踪。但是我指出您使用快捷键,故名思义,因为它比较火速方便。不过怎么用完全按照个人习惯来吗。下图是种种按钮的意义效果。

 

图片 29

 

 在上图黄色圆圈中数字,它们各自代表:

  1、甘休断点调试

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

  3、跳入函数中去(F11)

  4、从实践的函数中跳出

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

  6、程序运行时际遇越发时是还是不是中断的开关

接下去在区域4种切换来Watch
Expressions
 选项,它的功力是为当下断点添加表明式,使得每回断点往下走一步都会举行你写下的js代码。需求留意的是其一意义必须小心运用,因为这可能会造成您写下的督查代码段会不断地被执行。

图片 30

 

为了防止你的调节代码重复执行,大家可以在调节时直接在console控制台上四遍性地出口当前断点处的消息(推荐这样做)。为了注脚我们在console面板中负有的是时下断点环境,我门可以对照断点执行前后的this值变化。

图片 31   
  图片 32

只要你认为在断点的时候为了看一个变量必须借用console面板输出的点子来查看会相比费心,那么您可以创新最新版的Chrome,它曾经为大家解决了那些烦恼。为了方便开发者调试,在那一点上谷歌已经完结了极其,就在今日更新过Chrome将来,卤煮意外地觉察了断点时监控环境变量的其它一种办法,那种艺术极为清晰,在断点调试的时候,区域2中会自动展现每个变量的值,每便代码往下走的时候那个值都回时时更新。那让开发者对眼前环境变量大概可以说是吃透。(此功能有一个小瑕疵,那就是无力回天查看数组或者目标的具体索引和值,不过自己信任google会革新它的。)

图片 33

 

当您的花色已经线上,现身了一个bug,你修复了之后不可能看到它的确在线上的法力,那么您可以在开拓线上的序列,直接在浏览器中修改代码然后看到效能。那样的功能往往是最直白的,那种艺术也能帮你省去频仍验证公布的难为,毕竟身为前端码农的你也必将会听到过后台(平日状态下是后台公布)小弟的埋怨:“XXX,测试通过了没,不要出现了哈,公布几回很麻烦的!”。而在Chrome里面,只需求在区域2种直接改动,你就可以证实你的代码在线上是或不是行得通。卤煮在此地只是提议该功效的用法之一。其他的就凭诸位的聪明才智去想了。

图片 34   
 
  图片 35

即使在断点时,你也可以编制代码,按ctrl+S保存之后,你会看出区域2的背景由白色变为浅色,而断点会重新起施夷光行。

回到区域1,Content
script
 选项开里面包罗着有些第三方插件或者浏览器自身的js代码,日常它是被忽视的,实际上它的效益很少。我们得以更加多关切一下Snippets分选。还记得基础篇里面介绍的style啊?在里边我们能够编写界面的css代码并且即时观望它们的映照效果,同样地,在Sinppets中,大家也
可以编制(重写)js代码片段。这几个部分其实就一定于您的js文件一律,分歧的是地面的js文件在编辑器里面编辑的,而那边,你是在浏览器中编辑的。那几个代码片段在浏览器刷新的时候既不会不复存在,也不会实施,除非是你手动执行它。它可以存在你的本土浏览器中,即便关闭浏览器,再一次打开时它照旧还在那边。它的要紧职能能够使得大家编辑一些类其余测试代码时提供方便,你了然,如果您在编辑器上编制那么些代码,在昭示时你不可能不为它们拉长注释符号或者手动删除它们,而在浏览器上编制就不要求那样麻烦了。

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

图片 36

 

Snippets 的不胜成效强大,它的居多潜伏作用还有待挖掘。目前卤煮使用它是在挥之不去调试片段、单元测试、少量的功能代码编写功效上。

最后大家看看js中时间累加的督察作用,同上篇文章介绍的同一,Sources面板和Elements面板一样有监督事件的成效,而且Sources中效果尤为助长,也进一步强有力。它的那部分成效集中在区域3中。我以下图为例,观望其听从。

图片 37

 

从上到下,红色圈内的数字的意义:

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
评论

图片 38

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

发表评论

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

网站地图xml地图