图片 63

谷歌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界面中切换到Event 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:下载文件或者请求占的资源大小
Time:请求或下载的时间
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

Chrome(F12开发者工具)是非常实用的开发辅助工具,对于前端开发者简直就是神器,但苦于开发者工具是英文界面,且没有中文,这让很多朋友都不知道怎么用。下载吧小编为大家带来Chrome开发者工具基础功能和高级性能分析器(Timeline、Profiles)的图文详解教程,下面是基础功能篇。

很抱歉,这文章是我好久之前写的
图片是存在有道云的,不知道为什么在移动端无法加载

二、Network

图片 20

1.Network是一个监控当前网页所有的http请求的面版,它主体部分展示的是每个http请求,每个字段表示着该请求的不同属性和状态图片 21

Timeline:该链接在发送过程中的时间状态轴(我们可以把鼠标移动到这些红红绿绿的时间轴上,对应的会有它的详细信息:开始下载时间,等待加载时间,自身下载耗时)

图片 22

2.单击面板中的任意一条http信息,会在底部弹出一个新的面板,其中记录了该条http请求的详细参数header(表头信息、返回信息、请求基本状态---请参看http1.1协议内容对号入座)、Preview(返回的格式化转移后文本信息)、response(转移之前的原始信息)、Cookies(该请求带的cookies)、Timing(请求时间变化)

图片 23

3.在主面板的顶部,有一些按钮从左到右它们的功能分别是:是否启用继续http监控(默认高亮选中过)、清空主面板中的http信息、是否启用过滤信息选项(启用后可以对http信息进行筛选)、列出多种属性、只列出name和time属性、preserve
log(目前不清楚啥用)、Dishable cahe(禁用缓存,所有的304返回会和fromm
cahe都回变成正常的请求忽视cache conctrol 设定);

图片 24

4.最后在主面板的底部有记录了整体网络请求状态的一些基本信息

图片 25

Network

图片 26

Network是一个监控当前网页所有的http请求的面版,它主体部分展示的是每个http请求,每个字段表示着该请求的不同属性和状态

Name:请求文件名称
Method:方法(常见的是get post)
Status:请求完成的状态
Type:请求的类型
Initiator:请求源也就是说该链接通过什么发送(常见的是Parser、Script)
Size:下载文件或者请求占的资源大小
Time:请求或下载的时间
Timeline:该链接在发送过程中的时间状态轴(我们可以把鼠标移动到这些红红绿绿的时间轴上,对应的会有它的详细信息:开始下载时间,等待加载时间,自身下载耗时)

图片 27

2.单击面板中的任意一条http信息,会在底部弹出一个新的面板,其中记录了该条http请求的详细参数header(表头信息、返回信息、请求基本状态—请参看http1.1协议内容对号入座)、Preview(返回的格式化转移后文本信息)、response(转移之前的原始信息)、Cookies(该请求带的cookies)、Timing(请求时间变化)

图片 28

图片 29

位置1:filter过滤器,可在输入框中输入关键字搜索对应请求的文件。
位置2:请求文件的列表里进行了分类,个人常用的是查看XHR的分类,查看Ajax请求。
位置3:设置网络的通信方式。默认”No
thirotting”不节流。这里可以设置断网模式,或者模拟3G,4G网络等情况下页面加载的速度。网速可以在”settings”里面设置。

三、Resources

Resources部分较简单,主要向我们展示了本界面所加载的资源列表。还有cookie和local
storage 、SESSION
等本地存储信息,在这里,我们可以自由地修改、增加、删除本地存储。

图片 30

常用快捷键

图片 31

chrome快捷键

来源:

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");

图片 32

另外值得一赞的是,Chrome
控制台中原生支持类jQuery的选择器,也就是说你可以用$加上熟悉的css选择器来选择DOM节点,多么滴熟悉。

$(‘body’)

图片 33

copy

通过此命令可以将在控制台获取到的内容复制到剪贴板。

copy(document.body)

然后你就可以到处粘了:

图片 34

这里的控制台命令只能在控制台中环境中执行,因为他不依附于任何全局变量比如window,所以其实在JS代码里是访问不了这个copy方法的,所以从代码层面来调用复制功能也就无从谈起。

图片 35

一、Elements

图片 36

在Element中主要分两块大的部分:HTML结构面板(A)和操作dom样式、结构、时间的显示面板(B)。

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

图片 37

2.如果你单击选中一个元素,在A部分的底部,会显示该元素在html结构中的位置关系

图片 38

3.然后在B部分的styles选项中编辑该元素的样式,并且看到html结构的实时更新。

图片 39

4.在B界面中切换到Event Listeners选项,观察该元素绑定的事件。

图片 40

click 是事件名称

.div1 事件是索引名称(也就是通过什么绑定的)

attachment 事件来源

handler里面包含事件的毁掉主体内容

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

5.选中一个元素,右击鼠标,你会看到有一个弹出窗口出现,里面有若干选项。

图片 41

Break
on:为该元素添加dom操作事件监听。包含三个选项(树结构改变、属性改变、节点移除)。这个选项的作用是帮助我们监控和定位操作元素的代码。请参看下图事例:

图片 42

6.在A界面的弹出选项窗口中选择node removal,在B界面切换到DOM Breakpoints
选项,可以看到有注册信息。然后我们点击click
me按钮触发删除div3的事件,可以看到浏览器自动为我们定位删除该元素的代码部分,并且停止执行js代码:

图片 43

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

图片 44

8.点击A界面的任意地方,按快捷键ctrl+F可以看到底部有输入框,在输入框中输入你想要查找的任何内容,如果匹配到了,都回在A面板中高亮显示

图片 45

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

图片 46

设备传感仿真

设备模式的另一个很酷的功能是模拟移动设备的传感器,例如触摸屏幕和加速计。你甚至可以恶搞你的地理位置。这个功能位于元素标签的底部,点击“show
drawer”按钮,就可看见Emulation标签 –> Sensors.

图片 47

有道云真的给我印象很不好
参考这个吧

图片 48

timeline
工具详解

提示:右键点击图片选择在新窗口或新标签页中打开可查看大图。

Elements

常用方法:
1.鼠标移动到元素上会在原网页上显示蓝色印记;
2.在开发者工具下面显示元素在HTML里的位置关系;
3.在styles选项中编辑该元素的样式,并且看到html结构的实时更新;
4.左上角的箭头,鼠标点击后,移动到网页,下面会自动跳转到相应的元素上;

选中一个元素,右击鼠标,你会看到有一个弹出窗口出现,里面有若干选项

图片 49

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中间来回切换颜色的格式

图片 50

就像这样。。。。

图片 51

DevTools有一个可以模拟CSS状态的功能,例如元素的hover和focus,可以很容易的改变元素样式。在CSS编辑器中可以利用这个功能

图片 52

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

待读

很多的技巧 英文
https://umaar.com/dev-tips/

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("测试用时");

图片 53

关闭Console界面

console.log:普通信息
console.log(‘%c你好’,’color:red;’,’小明’,’你知道被妈妈打了么’);
console.info:提示类信息
console.error:错误信息
console.warn:警示信息

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

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

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.count

除了条件输出的场景,还有常见的场景是计数。
当你想统计某段代码执行了多少次时也大可不必自己去写相关逻辑,内置的console.count可以很地胜任这样的任务。

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

图片 54

有趣功能

Sources

图片 55

sources面板是调试中最常用的地方。
位置1:查看页面中加载的资源文件
位置2:如果浏览器装了插件,插件所需要的JS文件会在这里显示
位置3:使用ctrl+p/ctrl+o 打开某个文件
位置4:断点的操作
位置5:查看异步请求时所设置的定时器
位置6:点击右边的加号,可以增加监听的变量。不过鼠标放到JS文件中的变量时也会显示对应的值。
位置7:设置各种不同的断点。
当勾选XHR Breakpoints里的any XHR时,页面中触发Ajax请求时都会中断。
当勾选”Event listener breakpoint” 下的 Mouse(鼠标)下的 Click
(单击)事件时,触发某个按钮的点击事件就会中断。
位置8:一般线上的代码都是打包后的代码,不利于调试。点击{}后格式化该文件。

这里我再就说一下怎么使用sources这个面板进行一些js的调试:

图中的4号区域有6个按键(有的版本这几个按键位置在source下面)
当你调试时按下第一个暂停(快捷键f8),js停止运行,然后点击第三个想箭头一样的按钮(快捷键f10),javascript执行下一句,同理另一个箭头按钮表示向上执行,返回上一句js的状态。
设置断点:(当4号区域第五个按钮按下时)点击sources中间的代码行数,就会在这里设置一个断点,蓝色时表示激活断点,再次点击取消,这样刷新页面直接执行到你设置的断点处。

然后我就必须提一个比较可爱的功能了。。。。。代码美化。。。。。

以前看源码跟个鬼一样 所有js
css全堆在一起,是个正常人都看不懂,但chrome在sources源代码的部分下面有一个按键
“{}” 点击后你就会发现世界美好了,,,,,

想快速的找到你点击某个特定的按钮或者链接的运行代码,只需要在你点击按钮前启用“Event
listener breakpoint” Mouse:mouseover还有mouseout

图片 56

我在div上写了一个mouseover的js当js检测到有运行到mouseover时就会显示出mouseover执行的function()
你就可以看看事件是怎么执行的了
但使用这个功能可能会进入到第三方的代码库像jQuery,这时候你就需要花费一些调试的时间来到达真正的事件处理函数。最好的方法是标记“Blackbox
Script”避免进入到第三方的脚本。调试时就再不会进入第三方的脚本库了,代码会一直运行到没有标记blackboxed的文件为止。你可以blackbox脚本通过右击调用栈里的第三方库的文件,并从上下文菜单中选择“Blackbox
Script”即可:
然而一般我不用jquery

图片 57

Timeline

Timeline面板是查看动态流的。在这里可以测试页面的性能问题。比如页面的渲染速度,动画的流畅度等。

图片 58

位置1:点击这个按钮开始Record,按钮变成红色,再次点击停止记录。
位置2:选择记录生成的图表模式
位置3:需要记录的类型
位置4:fps指每秒的帧数,这个可以衡量页面的渲染速度。如果超过60fps,则页面可能需要优化下了。如果超过30fps,则页面的卡顿现象会比较严重。
位置5:记录期间页面加载的比重。看哪个范围的值特别大,占用时间最长,然后有针对性的优化。

console.assert

图片 59

当你想代码满足某些条件时才输出信息到控制台,那么你大可不必写if或者三元表达式来达到目的,cosole.assert便是这样场景下一种很好的工具,它会先对传入的表达式进行断言,只有表达式为假时才输出相应信息到控制台。

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

console.dir

将DOM结点以JavaScript对象的形式输出到控制台
而console.log是直接将该DOM结点以DOM树的结构进行输出,与在元素审查时看到的结构是一致的。不同的展现形式,同样的优雅,各种体位任君选择反正就是方便与体贴。

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

图片 60

远程调试

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); // 成对出现,配合使用

图片 61

Settings

勾选下面这个选项后就会在控制台中打印出所有的Ajax请求地址。

图片 62

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

Audits 加载速度优化参照的是雅虎前端工程师的十四条黄金建议