菜单

[转]谷歌(谷歌(Google))Chrome浏览器开发者工具教程—基础意义篇

2019年2月2日 - 金沙前端

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:请求或下载的时日
Timeline:该链接在发送进程中的时间状态轴(我们得以把鼠标移动到这一个红红绿绿的时间轴上,对应的会有它的详细音讯:开始下载时间,等待加载时间,自身下载耗时)
金沙国际 14
2.单击面板中的任意一条http新闻,会在底层弹出一个新的面板,其中记录了该条http请求的事无巨细参数header(表头音讯、重临新闻、请求基本情形—请参考http1.1共谋内容对号落座)、Preview(再次回到的格式化转移后文本音信)、response(转移此前的本来面目音讯)、Cookies(该请求带的cookies)、Timing(请求时间转移)
金沙国际 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

来源:

很对不起,那小说是自家久久事先写的
图片是存在有道云的,不知底怎么在活动端不可能加载

谷歌浏览器近期是Web开发者们所运用的最流行的网页浏览器。伴随每七个星期日遍的揭发周期和不断扩展的兵不血刃的支出效益,Chrome变成了一个务必的工具。一大半或者熟练有关chorme的不少风味,例如使用console和debugger在线编辑CSS。在那篇小说中,大家将享受部分很酷的技术,让你可见更好的改良工作流程。

Chrome(F12开发者工具)是不行实用的付出协理工具,对于前端开发者大概就是神器,但苦恼开发者工具是英文界面,且尚未汉语,那让许多对象都不知情怎么用。下载呢小编为我们带来Chrome开发者工具基础成效和高级质量分析器(提姆eline、Profiles)的图文详解教程,下边是基础意义篇。

常用火速键

金沙国际 20

chrome快捷键

金沙国际 21

唤醒:右键点击图片选拔在新窗口或新标签页中开辟可查看大图。

chrome神速键 左右切换tag页

left: ctrl + pgup
right: ctrl + pgdn
new tab: ctrl + t

1.文书火速切换
神速键Ctrl + P 就足以火速搜索你的工程文件。

2.源代码内部查找
若果你想要查找源代码的始末,你可以应用Ctrl + Shift + F (Cmd + Opt +
F)并输入字符串关键词。

3.到某一行
当您在Chrome DevTools中开辟一个源文件,你可以指定到任意一行,用很快键
Ctrl + G (Windows 和 Linux), 或者 Cmd + L (Mac)并输入你想跳到哪一行。
你也得以示用Ctrl + O,并输入“:”+第几行。

4.在控制纽伦堡当选元素
在DevTools中你可以手动选项DOM元素。
$() 再次来到符合当下CSS采纳器的首先个要素,例如 $(‘div’)
会再次来到页面中第二个div元素。
$$() 重返符合当下CSS选择器的一串 好七个 不是一个因素。

(下边的图是我在网上收集的,自己写一定没有这一个配图说的领悟)

透过console面板修改页面元素及要素内容:

一、Elements

金沙国际 22

在Element中紧要性分两块大的一对:HTML结构面板(A)和操作dom样式、结构、时间的体现面板(B)。

1.在A中,每当你的鼠标移动到其余一个元素上,对应的html视图中会给该因素紫色的背景。

金沙国际 23

2.如果您单击选中一个因素,在A部分的最底层,会来得该因素在html结构中的地点关系

金沙国际 24

3.然后在B部分的styles选项中编辑该因素的体裁,并且看来html结构的实时更新。

金沙国际 25

4.在B界面中切换来伊夫nt Listeners选项,观察该因素绑定的风浪。

金沙国际 26

click 是事件名称

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

attachment 事件源点

handler里面包蕴事件的毁伤主体内容

useCapture表示该事件是不是向上冒泡

5.选中一个因素,右击鼠标,你会看出有一个弹出窗口现身,里面有几多选项。

金沙国际 27

Break
on:为该因素添加dom操作事件监听。包涵两个选拔(树结构改变、属性改变、节点移除)。那几个选项的功效是扶助我们监控和一定操作元素的代码。请参考下图事例:

金沙国际 28

6.在A界面的弹出选项窗口中精选node removal,在B界面切换来DOM Breakpoints
选项,可以观察有注册音信。然后我们点击click
me按钮触发删除div3的风云,可以看出浏览器自动为大家一定删除该因素的代码部分,并且甘休实施js代码:

金沙国际 29

7.在B界面中切换来Properties选项,可以见到选中元素的各样音信(英文单词里面的介绍比较不难,就不一一介绍了)。

金沙国际 30

8.点击A界面的人身自由地点,按神速键ctrl+F可以见到底部有输入框,在输入框中输入你想要查找的其余内容,若是同盟到了,都回在A面板中高亮显示

金沙国际 31

9.或者你可以点击左上角的问号图标,然后把鼠标移动到视图界面中,对准元素按下鼠标左键,对应的A界面会定位到采取的因素。

金沙国际 32

开发者工具面板各种板块介绍

得到元素节点

二、Network

金沙国际 33

1.Network是一个督查当前网页所有的http请求的面版,它主体部分显得的是各样http请求,每个字段表示着该请求的不比属性和景况金沙国际 34

提姆eline:该链接在发送进度中的时间状态轴(咱们可以把鼠标移动到那个红红绿绿的时间轴上,对应的会有它的详细音信:初阶下载时间,等待加载时间,自身下载耗时)

金沙国际 35

2.单击面板中的任意一条http信息,会在尾部弹出一个新的面板,其中记录了该条http请求的详尽参数header(表头信息、再次回到新闻、请求基本意况---请参考http1.1商议内容对号落座)、Preview(重临的格式化转移后文本音讯)、response(转移从前的本来面目音讯)、Cookies(该请求带的cookies)、提姆ing(请求时间转移)

金沙国际 36

3.在主面板的顶部,有一部分按钮从左到右它们的效应分别是:是还是不是启用继续http监控(默许高亮选中过)、清空主面板中的http音讯、是或不是启用过滤音讯选项(启用后得以对http音信进行筛选)、列出各个品质、只列出name和time属性、preserve
log(近日不明了什么用)、Dishable cahe(禁用缓存,所有的304重返会和fromm
cahe都回变成健康的伸手忽视cache conctrol 设定);

金沙国际 37

4.说到底在主面板的最底层有记录了完全互联网请求状态的一些骨干新闻

金沙国际 38

Elements

常用方法:
1.鼠标移动到元素上会在原网页上突显肉色印记;
2.在开发者工具上面突显元素在HTML里的义务关系;
3.在styles选项中编辑该因素的体裁,并且探望html结构的实时更新;
4.左上角的箭头,鼠标点击后,移动到网页,上边会活动跳转到相应的元素上;

当选一个要素,右击鼠标,你会看到有一个弹出窗口出现,里面有几多抉择

金沙国际 39

Add attribut: 为该因素添加属性
Edit attribute:修改该因素的属性
Force element state:
为因素激活某种情况(主要用在能够大约的要素比如a、input、button等)
Edit as
HTML:编辑该因素(你可以重写它的总体content)甚至修改它的价签名称
Break on:为该因素添加dom操作事件监听。

在element里可以调剂css查看html的DOM,这一个都是常常最常用的机能
接下来chrome最迷人的css颜色选取,当你点击一个css的color属性后,就会见世下图,你就可以拔取自己喜好的颜料了,而且此时你活动鼠标到页面上随意地方会现出一个放大镜一样的取景器,点击就会在elelment面板上出示你点击地点的颜料相关音讯。。。。。
点击color属性可以在rgbahslhexadecimal中档来回切换颜色的格式

金沙国际 40

就像是这么。。。。

金沙国际 41

DevTools有一个足以效仿CSS状态的功效,例如元素的hover和focus,可以很简单的更改元素样式。在CSS编辑器中可以使用这一个职能

金沙国际 42

右键选拔Edit as HTML或者Edit Text

金沙国际,三、Resources

Resources部分较简单,首要向我们来得了本界面所加载的资源列表。还有cookie和local
storage 、SESSION
等地面存储新闻,在此处,我们可以无限制地修改、增添、删除本地存储。

金沙国际 43

Network

金沙国际 44

Network是一个督查当前网页所有的http请求的面版,它主体部分显得的是每个http请求,每个字段表示着该请求的不比性质和意况

Name:请求文件名称
Method:方法(常见的是get post)
Status:请求已毕的事态
Type:请求的项目
Initiator:请求源也就是说该链接通过怎么样发送(常见的是Parser、Script)
Size:下载文件或者请求占的资源大小
提姆e:请求或下载的时光
提姆eline:该链接在殡葬进度中的时间状态轴(我们得以把鼠标移动到这几个红红绿绿的时间轴上,对应的会有它的详细讯息:开首下载时间,等待加载时间,自身下载耗时)

金沙国际 45

2.单击面板中的任意一条http音讯,会在尾部弹出一个新的面板,其中记录了该条http请求的详尽参数header(表头音讯、重临新闻、请求基本气象—请参考http1.1商事内容对号落座)、Preview(再次回到的格式化转移后文本新闻)、response(转移以前的原始新闻)、Cookies(该请求带的cookies)、提姆ing(请求时间变化)

金沙国际 46

金沙国际 47

岗位1:filter过滤器,可在输入框中输入关键字搜索对应请求的公文。
岗位2:请求文件的列表里展开了归类,个人常用的是翻开XHR的分类,查看Ajax请求。
职分3:设置互联网的通信形式。默许”No
thirotting”不节流。那里可以设置断网格局,或者模拟3G,4G网络等气象下页面加载的快慢。网速可以在”settings”里面安装。

修改后的始末会实时反映在页面和Elements面板上

Sources

金沙国际 48

sources面板是调节中最常用的地点。
任务1:查看页面中加载的资源文件
岗位2:如果浏览器装了插件,插件所急需的JS文件会在此地浮现
地点3:使用ctrl+p/ctrl+o 打开某个文件
职分4:断点的操作
地点5:查看异步请求时所设置的定时器
地点6:点击左边的加号,可以追加监听的变量。然则鼠标放到JS文件中的变量时也会展示相应的值。
地方7:设置种种不一致的断点。
当勾选XHR Breakpoints里的any XHR时,页面中触发Ajax请求时都会暂停。
当勾选”伊夫nt listener breakpoint” 下的 Mouse(鼠标)下的 Click
(单击)事件时,触发某个按钮的点击事件就会暂停。
任务8:一般线上的代码都是包裹后的代码,不便宜调试。点击{}后格式化该公文。

那边自己再就说一下怎么利用sources那么些面板举办一些js的调试:

图中的4号区域有6个按键(有的版本这多少个按键地点在source上面)
当您调试时按下率先个暂停(快速键f8),js甘休运作,然后点击第多少个想箭头一样的按钮(快速键f10),javascript执行下一句,同理另一个箭头按钮表示发展执行,重回上一句js的景况。
设置断点:(当4号区域第八个按钮按下时)点击sources中间的代码行数,就会在那里设置一个断点,蓝色时表示激活断点,再一次点击裁撤,那样刷新页面平素实施到你设置的断点处。

然后我就务须提一个相比讨人喜欢的功效了。。。。。代码美化。。。。。

先前看源码跟个鬼一样 所有js
css全堆在同步,是个常人都看不懂,但chrome在sources源代码的部分上面有一个按键
“{}” 点击后您就会意识世界美好了,,,,,

想快捷的找到你点击某个特定的按钮或者链接的周转代码,只须求在你点击按钮前启用“伊芙nt
listener breakpoint” Mouse:mouseover还有mouseout

金沙国际 49

自身在div上写了一个mouseover的js当js检测到有运行到mouseover时就会显得出mouseover执行的function()
您就足以看看事件是怎么执行的了
但拔取这么些功能可能会跻身到第三方的代码库像jQuery,这时候你就必要花费一些调节的小运来临达确实的事件处理函数。最好的艺术是标志“Blackbox
Script”避免进入到第三方的本子。调试时就再不会进入第三方的脚本库了,代码会一向运行到没有标记blackboxed的文本甘休。你可以blackbox脚本通过右击调用栈里的第三方库的公文,并从上下文菜单中选用“Blackbox
Script”即可:
唯独一般自己不要jquery

金沙国际 50

金沙国际 51

console

Rainbow Text(一个小效用)

console.log('%cRainbow Text ', 'background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), 
color-stop(0.15, #f2f), 
color-stop(0.3, #22f), 
color-stop(0.45, #2ff),
color-stop(0.6, #2f2),
color-stop(0.75, #2f2), 
color-stop(0.9, #ff2),
color-stop(1, #f22) );
color:transparent;-webkit-background-clip: text;font-size:5em;');

console.time & console.timeEnd 计算耗时

![console.time](http://upload-images.jianshu.io/upload_images/1889471-7372ce7da5b0b345.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

对代码执行的耗时情状展开测试时,处理手工在代码中开创前后七个小时戳举办对照,在dev
tools中,大家可以运用console.time与 console.timeEnd完结。

console.time("测试用时");
var array= new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
array[i] = new Object();
};
console.timeEnd("测试用时");

金沙国际 52

关闭Console界面

console.log:普通消息
console.log(‘%c你好’,’color:red;’,’小明’,’你通晓被大姨打了么’);
console.info:提醒类音讯
console.error:错误音信
console.warn:警示新闻

var data = [{'品名': ‘室友', '数量': 4}, {'品名': '电脑', '数量': 9}];
console.table(data);显示图表

其余,console.log()
接收不定参数,参数间用逗号分隔,最后会输出会将它们以空白字符连接。

inspect()/copy()/values()和Ctrl + L

console.assert

金沙国际 53

当你想代码满足某些原则时才输出音信到控制台,那么你大可不必写if或者长富表达式来完毕目标,cosole.assert便是这么场景下一种很好的工具,它会先对传播的表明式进行预知,唯有表明式为假时才输出相应信息到控制台。

var isDebug=false;
console.assert(isDebug,'开发中的log信息。。。');

在console面板使用inspect(elem)跳转到elements面板的指定元素节点

console.count

除了标准输出的情景,还有大面积的光景是计数。
当您想计算某段代码执行了不怎么次时也大可不必自己去写相关逻辑,内置的console.count可以很地胜任那样的天职。

function foo(){
//其他函数逻辑blah blah。。。
console.count('foo 被执行的次数:');
}
foo();
foo();
foo();

金沙国际 54

在console面板使用copy(values)将数据复制到剪贴板

console.dir

将DOM结点以JavaScript对象的款式出口到控制台
而console.log是直接将该DOM结点以DOM树的布局进行输出,与在要素审查时观望的结构是相同的。分裂的变现情势,同样的古雅,各个体位任君选拔反正就是有益与关注。

console.dir(document.body);
console.log(document.body);

金沙国际 55

在console面板使用values(object)获取对象的具备属性值,重临数组

console.time & console.timeEnd

输出一些调试音信是控制台最常用的功效,当然,它的职能远不止于此。当做一些特性测试时,同样可以在此间很便利地展开。
譬如说要求勘查一段代码执行的耗时景况时,可以用console.time与
console.timeEnd来做此事。

此地借用官方文档的事例:

console.time("Array initialize");
var array= new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
array[i] = new Object();
};
console.timeEnd("Array initialize");

金沙国际 56

其它值得一赞的是,Chrome
控制莱比锡原生协助类jQuery的选拔器,也就是说你可以用$加上熟谙的css选用器来接纳DOM节点,多么滴熟习。

$(‘body’)

金沙国际 57

copy

经过此命令可以将在控制台获取到的情节复制到剪贴板。

copy(document.body)

下一场你就能够四处粘了:

金沙国际 58

此间的操纵台命令只好在控制斯特拉斯堡环境中履行,因为他置之度外附于任何全局变量比如window,所以其实在JS代码里是访问不了这么些copy方法的,所以从代码层面来调用复制功能也就无从谈起。

金沙国际 59

动用Ctrl + L清空当前的console面板

Timeline

提姆eline面板是翻开动态流的。在此间可以测试页面的质量难点。比如页面的渲染速度,动画的流畅度等。

金沙国际 60

地点1:点击这几个按钮开头Record,按钮变成绿色,再一次点击为止记录。
地方2:接纳记录生成的图片方式
任务3:要求记录的序列
岗位4:fps指每秒的帧数,那一个可以衡量页面的渲染速度。若是跨越60fps,则页面可能须要优化下了。即使跨越30fps,则页面的卡顿现象会相比严重。
岗位5:记录时期页面加载的比例。看哪个范围的值尤其大,占用时间最长,然后有针对的优化。

金沙国际 61

Settings

勾选下边那个选项后就会在控制巴尔的摩打印出所有的Ajax请求地址。

金沙国际 62

JS 文件打开和文书内的急速跳转

Profile(品质优化)

质量分析(Profiler)就是分析程序各类部分的运转时刻,找出瓶颈所在,使用的不二法门是console.profile()。

   1: <script type="text/javascript">
   2:       function All(){
   3:             alert(11);
   4:          for(var i=0;i<10;i++){
   5:                 funcA(1000);
   6:              }
   7:         funcB(10000);
   8:       }
   9:
  10:       function funcA(count){
  11:         for(var i=0;i<count;i++){}
  12:       }
  13:
  14:       function funcB(count){
  15:         for(var i=0;i<count;i++){}
  16:       }
  17:
  18:       console.profile('性能分析器');
  19:       All();
  20:       console.profileEnd();
  21:     </script>

金沙国际 63

奥迪ts 加载速度优化参照的是雅虎前端工程师的十四条黄金提议

在Sources面板使用CMD + O飞快键打开搜索框

诙谐成效

检索框下会提醒当前页面的涉及的 JS 文件,输入文件名即可打开

长距离调试

Android与PC双向同步

辅助在手机浏览器/native
app中调剂,协助端口转载,接济虚拟主机名映射(virtual host mapping)

预备条件:

1. Chrome32+
2. Android USB连接
3. 浏览器调试需要Android4.0+,以及Android Chrome(PC的Chrome要比Android版本高才行)
4. app调试需要Android4.4+,以及WebView.setWebContentsDebuggingEnabled(true);

步骤:

1. 开启USB调试,手机打开Chrome进入需要调试的页面
2. PC打开Chrome进入chrome://inspect,勾选Discover USB devices
3. 在设备列表中点击inspect开始远程调试
4. 计时console.time/timeEnd(str); // 成对出现,配合使用

金沙国际 64

如若输入:5:9,则象征跳转到文件的第五行第九个字符

设施传感仿真

装备形式的另一个很酷的效应是人云亦云移动装备的传感器,例如5K屏幕和加快计。你依旧足以恶搞你的地理地点。那些职能位于元素标签的最底层,点击“show
drawer”按钮,就可看见Emulation标签 –> Sensors.

金沙国际 65

有道云真的给自家记念很不佳
参照这些啊

金沙国际 66

timeline
工具详解

金沙国际 67

待读

不少的技艺 英文
https://umaar.com/dev-tips/

在Sources面板使用使用Alt + -和Alt +
=可以在上一个鼠标地点和下一个鼠标地方之间跳转

金沙国际 68

在Elements面板使用CMD +
F打开搜索框,除了常规字符串还足以选取选拔器来摘取 HTML 元素

金沙国际 69

相关文章

发表评论

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

网站地图xml地图