六、插件篇
最后更新于：2022-04-01 04:50:20
> 原文：http://www.cnblogs.com/constantince/p/4641796.html
本篇是Chrome开发者工具的结尾篇，最后为大家介绍几款功能强大的插件。在chrome商店里面有很多插件，没事建议大家去逛逛。不过需要FQ，所以诸位请自备神器。
## 一、皮肤插件
首先是大家期盼已久，翘首以盼的皮肤插件。这款插件叫DevTools Theme: Zero Dark Matrix.在商店中下载之，然后打开这个地址:chrome://flags,找到Enable Developer Tools experments （可以查找enable-devtools-experiments关键字迅速锁定之）勾选启用复选框。重启浏览器，打开开发者选项，点击小齿轮，可以看到Experments这选项，选择后在弹出面板中勾选 Allow custom UI themes，重启浏览，然后看到:
高达上的皮肤就是这样出来滴。据说还有许多方式可以更改，不过露珠目前就用的事这种方式。有兴趣的同学可以去试试看。
## 二、Performance-Analyser(网页性能分析)
这款插件是用来分析你的网页加载性能的，包括http请求，执行期的时间，以及每种http请求文件的大小，占比。首先下载之，随意打开一个界面，按下插件图标，可以看到分析页面：
你可以利用这款插件来分析你的界面资源加载的整体情况，并试着做一些优化和调整。
## 三、(FeHelper)WEB前端助手
这款插件包括了一系列功能，很丰富。是国人开发的，功能包括：json格式化，html格式化，二维码生成，编码规范检测等等不一而足。当你在浏览器中打开一个后台接口的时候，如果该接口返回的是json字符串，那么它会自动将其格式化。下面是它的一些功能列表，不具体一一示范：
## 四、POSTMAN
该插件是模拟发送请求的，后台和前台开发人员都可以用到。它是一个简化版的fiddler，功能虽然没有它强大，但是界面胜之，操作性也胜之，还有规范的API，更新也一直在继续。所以用之有木有:
## 五、Visual Event
网页事件监听，能帮你捕获到目前网页上的各个元素的事件监听状况。打开一个界面，按下扩展按钮:
把鼠标放到有背景色的元素上去，可以看到它们的时间来源和绑定的函数。对于一些简单的事件检测还是蛮有用的。比较复杂的就没什么卵用了。
## 六、二维码扫描
这个功能对手机开发来说还是不错的。扫一扫就在浏览器中打开了。在FF浏览器中自带的功能，对于Chrome来说怎么可以木有呢？不过这功能太简单，太低档次，太多了（不过很有用）。就不上图了。
## 七、WhatFont
找到网页的字体。开启功能后把鼠标停留在文本上，会弹出该字体名称。所以你可以所以copy你喜欢的字体啦。
## 八、Speed Tracer
这个是一个强大版本的性能分析器，比Profiles还强大。可以跟踪事件，查看css样式，找到js中内存泄露，检测js语法。功能之强大，无出其右！Speed Tracer是一款很强大的网页性能分析工具，通过它你可以找到你的网页运行缓慢的原因。针对它们改善网站。不过因为它的功能强大，所以操作比较复杂。篇幅原因露珠不做介绍。感兴趣的同学可以自己去捉摸捉摸。下面是盗图一张：
## 结束语
到此为止，露珠的Chrome开发者工具不完全指南系列宣告结束，露珠通过了六篇博文，向诸位比较想尽地介绍了chrome开发者工具的功能使用。从基础的dom查找到性能分析，大体上涵括了前端开发的各个方面。在如今前端开发日益复杂的趋势下，掌握了几件好的工具，是可以能够事半功倍的。而chrome毫无疑问的是这些好工具中的一个。讲到这里露珠想到《庄子》里面的一个故事：有一天孔子的学生子贡经过一块菜畦，看到有一位老者为了浇水而打了一条通向水井的地道，然后抱着水瓮来回于水井和菜畦之间，为的是给菜畦浇水。子贡见了就对老者说这样打水太累，为什么不自己做一个打水的机器呢？种菜的老人说：“有机械之事者必有机心。机心存与胸，大道不载也”。意思是有了偷懒的心，人就变得懒，这不是人的本性，也不是天的本性，所以大道也就不会充实他的心田。其实露珠想说运用工具和偷懒或机心是两回事儿，时代在变迁，人类早就不再是刀耕火种的人类了，如果一直停在旧的时代，跟不到新时代的进步，不学会与时俱进这样只有被历史淘汰。这跟我们现在处的环境是一样的，特别是前端开发，技术更新跟翻书一样快，隔三差五的新框架出现，几年的时间就有一大堆新鲜的东西跳将出来把你们吓一跳，不仅仅开发的时间在增加，学习的成本也在不停增加，所以时间变得尤其宝贵。如果有好的工具可以在少付出的情况下为我们达到同样的目的，何乐而不为呢？毕竟大家的目标都一样，只是殊途同归罢了。当然，庄子是道家人物，借个故事来调侃儒家也是理所当然，断章取义还是不行滴哈。
五、移动篇
最后更新于：2022-04-01 04:50:18
> 原文：http://www.cnblogs.com/constantince/p/4624241.html
前面介绍了Chrome开发者工具的大部分内容工具，现在介绍最后两块功能**Audits**和**Console**面板。
## 一、Audits
Audits面板会针对目前网页提出若干条优化的建议，这些建议分为两大类，一类是网络加载性能，另一类是界面性能。首先开下它的主界面。
**Audits**面板的网络优化建议参照的是雅虎前端工程师的十四条黄金建议。为了验证这一点，我们可以做一次简单的测试。根据十四条web性能建议中的其中一条:把css文件应该放入html文档的顶部，避免网页在渲染dom后出现闪烁的问题。我们写如下不规范代码
~~~
<!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放入头部:
提升界面性能对于用户体验来说非常重要。如果你按照了十四条建议来处理优化你的web界面，那么出现在**Audits**中的信息会变得很少。如果你还不知道这十四条建议，我推荐你去阅读《web高性能建站》这本书。相信会对你有帮助。
## 二、Console
**Console**面版可以输出你自己代码。它可以配合其他面板一起使用。点击右上角的>_剪头可以启用或者收起它。它也分了四个选项:
***Console*: 用于输出和现实调试信息
*Search*: 在域名下查找文件和内容
*Emulation : 启用移动开发模式
Rendering*: 在界面显示各种监控信息
关于**Console**的玩法，已经有一位大神详细讲解过。我这里就不一一介绍。[点击这里](http://www.cnblogs.com/Wayou/p/chrome-console-tips-and-tricks.html)去拜读大神的文章吧。*Search*也比较简单，露珠就不啰嗦了。现在主要讲解一下*Emulation*模式下的移动开发。移动开发毫无疑问已经成为web开发的主力军了。所以，chrome也打造了一款配合我们开发和测试的工具。
**1.进入移动开发模式**
手机开发模式我的建议是把控制面版右置。这样对手机开发来说是方便的。长按控制面板右上角类型标签（img4）可以切换控制面板的出现位置。调整完控制面板的位置后。点击Emulation然后再点击出现在选项击面版中的文字。或者你直接点击开发者工具界面左上角的手机图标进入开发者模式。你可以看到当你切换到移动开发模式后，鼠标已经变成了小黑圈圈了。
**2.调试设备**
在*Device*下拉菜单中选择不同的手机模式。里面包括安卓和苹果系统的流行机器。勾选Emulate mobile选项可以适应屏幕。Resolution这一项可以调整手机屏幕的高度和宽度。
**3.模拟网络状况**
*Netword*中选择模拟的网络状况。包括主流和非主流的各种网络。（WIFI，3G，2G等）Sensors选项中自定义移动端的经纬度。在模型中可以设定3D视图角度。把鼠标放上去直接旋转模型。这个功能暂时没发现有啥卵用。
很多调试可以在界面进行，这也是露珠通常做的。实际应用到的选项chrome都人性化地列在了主界面。选择了移动开发模式后界面会变成这样子:
需要注意的是，Chrome浏览器模拟的只是界面，内核和原生的很多功能是模拟不了的，不过这对于做html5移动开发的来说已经足够了吧。
## 三、结束语
本篇文章主要介绍了移动开发测试的工具部分。chrome在模拟移动开发时效果有些欠缺。如果需要真机调试，诸位可以考虑UC流浪器的开发版本（只支持安卓），chrome的移动版本（只支持安卓），或者自己买台mac（露珠买不起啊）再买台iphone（露珠的是小米的吊死机啊）配合联调。weinre那玩意儿只能调样式，还得自己加代码建议就不要去用了。好了，Chrome开发者工具都介绍的差不多了，下一篇是本系列的尾篇。介绍几款插件用（包括高大上的开发者工具皮肤哦），敬请关注！
四、性能进阶篇
最后更新于：2022-04-01 04:50:16
> 原文：http://www.cnblogs.com/constantince/p/4607497.html
## 前言
**Profiles**面板功能的作用主要是监控网页中各种方法执行时间和内存的变化，简单来说它就是**Timeline**的数字化版本。它的功能选项卡不是很多（只有三个），操作起来比较前面的几块功能版本来说简单，但是里面的数据确很多，很杂，要弄懂它们需要花费一些时间。尤其是在内存快照中的各种庞杂的数据。在这篇博客中卤煮将继续给大家分享Chrome开发者工具的使用经验。如果你遇到不懂的地方或者有不对的地方，可以在评论中回复卤煮，文章最后卤煮会最后把秘籍交出来。下面要介绍的是**Profiles**。首先打开**Profiles**面板。
**Profiles**界面分为左右两个区域，左边区域是放文件的区域，右边是展示数据的区域。在开始检测之前可以看到右边区域有三个选项，它们分别代表者不同的功能:
**1.(Collect JavaScript CPU Profile)监控函数执行期花费的时间**
**2.(Take Heap Snapshot)为当前界面拍一个内存快照**
**3.(Record Heap Allocations)实时监控记录内存变化(对象分配跟踪)**
## 一、Collect JavaScript CPU Profile（函数收集器）
首先来关注第一个功能，(Collect JavaScript CPU Profile**)**监控函数执行期花费的时间。讲道理不如举例子，为了更清楚地了解它的功能概况，我们可以编写一个测试列子来观察它们的作用。这个列子简单一些，使得我们分析的数据更清晰一些。
~~~
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button id="btn"> click me</button>
<script type="text/javascript">
function a() {
console.log('hello world');
}
function b() {
a();
}
function c() {
b();
}
document.getElementById('btn').addEventListener('click', c, true);
</script>
</body>
</html>
~~~
在右边区域中选择*Collect JavaScript CPU Profile* 选项，点击下方的Start按钮（也可以点击左边的黑色圆圈），这时候Chrome会开始记录网页的方法执行，然后我们点击界面的按钮来执行函数。最后再点击右边区域的Stop按钮（或者左边的红色圆圈），这时监控就结束了。左边**Profiles**会列出一个文件，单击可以看到如下界面：
生存了一个数据表格，它们的意义在上图中已经标记出来了。它记录的是函数执行的时间以及函数执行的顺序。通过右边区域的类型选项可以切换数据显示的方式。有正包含关系，逆包含关系，图表类型三种选项。我们可以选择其中的图表类型：
可以看到这个面板似曾相识，没错，它跟之前的**TimeLine**面板很像，的确，虽然很像，但功能不一样，不然也就没必要重复做了。从上图可以看到点击按钮执行的各个函数执行的时间，顺序，包含关系和CUP变化等。你可以在生成文件之后在左边区域中保存该文件记录，下次只需要在区域2这中点击load按钮便可以加载出来。也就是说你可以本地永久地记录该段时间内的方法执行时间。第一个功能大概就这么多，比较其他两个来说简单。
## 二、Take Heap Snapshot（内存快照）
下面我们来介绍一下第二个功能的用法。第二个功能是给当前网页拍一个内存快照.选择第二个拍照功能，按下 Take Snapshot 按钮，给当前的网页拍下一个内存快照，得到如下图。
可以看到左边区域生成个文件，文件名下方有数字，表示这个张快照记录到的内存大小（此时为3.2M）。右边区域是个列表，它分为五列，表头可以按照数值大小手动排序。在这张表格中列出的一些列数字和标识，以及表头的意义比较复杂，涉及到一些js和内存的知识，我们就先从这些表头开始了解他们。从左到右的顺序它们分别表示:
**Constructor**(构造函数)表示所有通过该构造函数生成的对象
**Distance** 对象到达GC根的最短距离
**Objects Count** 对象的实例数
**Shallow size** 对应构造函数生成的对象的shallow sizes(直接占用内存)总数
**Retained size** 展示了对应对象所占用的最大内存
CG根！是神马东西？在google的官方文档中的建议是CG根不必用到开发者去关心。但是我们在这里可以简单说明一下。大家都知道js对象可以互相引用，在某个对象申请了一块内存后，它很可能会被其他对象应用，而其他对象又被另外的对象应用，一层一层，但它们的指针都是指向同一块内存的，我们把这最初引用的那块内存就可以成为GC根。用代码表示是这样的:
~~~
var obj = {a:1};
obj.pro = { a : 100 };
obj.pro.pro = { b : 200 };
var two = obj.pro.pro;
//这种情况下 {b:200} 就是被two引用到了，{b:200}对象引用的内存就是CG根
~~~
用一张官方的图可以如下表示：
构成这张关系网的元素有两种：
**Nodes**：节点，对应一个对象，用创建该对象的构造方法来命名
**Edges**：连接线，对应着对象间的引用关系，用对象属性名来命名
从上图你也可以看到了第二列的表头Dishtance的意义是什么，没错，它指的就是CG根和引用对象之间的距离。根据这条解释，图中的对象5到CG根的距离就是2！那么什么是直接占用内存(**Shallow size**)和最大占用内存(**Retained size**)呢？直接占用内存指的是对象本身占用的内存，因为对象在内存中会通过两种方式存在着，一种是被一个别的对象保留（我们可以说这个对象依赖别的对象）或者被Dom对象这样的原生对象隐含保留。在这里直接占有内存指的就是前一种。(通常来讲，数组和字符串会保留更多的直接占有内存)。而最大内存(**Retained size**)就是该对象依赖的其他对象所占用的内存。你要明白这些都是官方的解释，所以即使你觉得云里雾里也是正常的，官方解释肯定是官腔嘛。按照卤煮自己的理解是这样的：
~~~
function a() {
var obj = [1,2,.......n];
return function() {
//js作用域的原因，在此闭包运行的上下文中可以访问到obj这个对象
console.log(obj);
}
}
//正常情况下，a函数执行完毕 obj占用的内存会被回收，但是此处a函数返回了一个函数表达式（见Tom大叔的博客函数表达式和函数声明），其中obj因为js的作用域的特殊性一直存在，所以我们可以说b引用了obj。
var b = a();
//每次执行b函数的时候都可以访问到obj，说明内存未被回收 所以对于obj来说直接占用内存[1,2,....n], 而b依赖obj，所obj是b的最大内存。
b()
~~~
在dom中也存在着引用关系:我们通过代码来看下这种引用关系:
~~~
<html>
<body>
<div id="refA">
<ul>
<li><a></a></li>
<li><a></a></li>
<li><a id="#refB"></a></li>
</ul>
</div>
<div></div>
<div></div>
</body>
</html>
<script>
var refA = document.getElementById('refA');
var refB = document.getElementById('refB');//refB引用了refA。它们之间是dom树父节点和子节点的关系。
</script>
~~~
现在，问题来了，如果我现在在dom中移除div#refA会怎么样呢？答案是dom内存依然存在，因为它被js引用。那么我把refA变量置为null呢？答案是内存依然存在了。因为refB对refA存在引用，所以除非在把refB释放，否则dom节点内存会一直存在浏览器中无法被回收掉。上图:
所以你看到Constructor这一列中对象如果有红色背景就表示有可能被JavaScript引用到但是没有被回收。以上只是卤煮个人理解，如果不对头，请你一定要提醒卤煮好即时更新，免得误人子弟！接着上文，**Objects Count**这一列是什么意思呢？**Objects Count**这一列的意义比较好理解，从字面上我们就知道了其意义。就是对象实例化的数量。用代码表示就是这样的:
~~~
var ConstructorFunction = function() {};//构造函数
var a = new ConstructorFunction();//第一个实例
var b = new ConstructorFunction();//第二个实例
.......
var n = new ConstructorFunction();//第n个实例
~~~
可以看到构造函数在上面有n个实例，那么对应在**Objects Count**这列里面就会有数字n。在这里，ConstructorFunction是我们自己定义的构造函数。那么这些构造函数在哪里呢，聪明的你一定可以猜到就在第一列**Constructor**中。实际上你可以看到列表中的**Constructor**这一列，其中多数都是系统级别的构造函数，有一部分也是我们自己编写的:
global property - 全局对象(像 ‘window’)和引用它的对象之间的中间对象。如果一个对象由构造函数Person生成并被全局对象引用，那么引用路径就是这样的：[global] > (global property > Person。这跟一般的直接引用彼此的对象不一样。我们用中间对象是有性能方面的原因，全局对象改变会很频繁，非全局变量的属性访问优化对全局变量来说并不适用。
roots - constructor中roots的内容引用它所选中的对象。它们也可以是由引擎自主创建的一些引用。这个引擎有用于引用对象的缓存，但是这些引用不会阻止引用对象被回收，所以它们不是真正的强引用(FIXME)。
closure - 一些函数闭包中的一组对象的引用
array, string, number, regexp - 一组属性引用了Array,String,Number或正则表达式的对象类型
compiled code - 简单来说，所有东西都与compoled code有关。Script像一个函数，但其实对应了的内容。SharedFunctionInfos (SFI)是函数和compiled code之间的对象。函数通常有内容，而SFIS没有(FIXME)。
HTMLDivElement, HTMLAnchorElement, DocumentFragment 等 – 你代码中对elements或document对象的引用。
点击展开它们查看详细项，@符号表示该对象ID。:
一个快照可以有多个试图，在左边区域的右上角我们可以看到点击下拉菜单可以得到四个个任务视图选项：
他们分别代表：
Summary(概要) - 通过构造函数名分类显示对象；
Comparison(对照) - 显示两个快照间对象的差异；
Containment(控制) - 探测堆内容；
Statistic(图形表)-用图表的方式浏览内存使用概要**Comparison**是指对比快照之间的差异，你可以首先拍一个快照A，操作网页一段时间后拍下另外一个快照B，然后在B快照的右边距区域的左上角选择该选项。然后就可以看到对比图。上面显示的是每个列，每一项的变化。在对照视图下，两个快照之间的不同就会展现出来了。当展开一个总类目后，增加和删除了的对象就显示出来了：
尝试一下[官方示例](https://developer.chrome.com/devtools/docs/heap-profiling-comparison)帮助你了解对比的功能。
你也可以尝试着查看**Statistic**选项，它会以图表的方式描述内存概况。
## 三、Record Heap Allocations.（对象跟踪器）
好了，第二个功能也介绍完了，最后让我们来瞧瞧最后一个功能*Record Heap Allocations*.这个功能是干啥的呢。它的作用是为为我们拍下一系列的快照（频率为50ms），为我们检测在启用它的时候每个对象的生存情况。形象一点说就是假如拍摄内存快照的功能是照相那么它功能相当于录像。当我们启用start按钮的时候它便开始录像，直到结束。你会看到左侧区域上半部分有一些蓝色和灰色的柱条。灰色的表示你监控这段时间内活跃过的对象，但是被回收掉了。蓝色的表示依旧没有没回收。你依旧可以滑动滚轮缩放时间轴。
对象跟踪器功能的好处在于你可以连续不断的跟踪对象，在结束时，你可以选择某个时间段内（比如说蓝色条没有变灰）查看期间活跃的对象。帮助你定位内存泄露问题。
## 四、结束
好了，差不多把**Profiles**讲完了。这东西对我们查找内存泄露来说还是蛮有作用的。对于工具来说，主要是多用，熟能生巧嘛。如果你觉得不过瘾，我推荐你去阅读[官方文档](https://developer.chrome.com/devtools/docs/javascript-memory-profiling)，里面有N多的例子，N多的说明，非常详细。前提是你能跳到墙外去。当然也有[翻译文档](http://www.open-open.com/lib/view/open1421734578984.html#_label13)（卤煮的秘籍都给你了，推荐一下吧）。最后真的是要像一片文章里面写的一样“感谢发明计算机的人，让我们这些剪刀加浆糊的学术土匪变成了复制加粘贴版的学术海盗。”下期是**Console**和**Audits**。敬请关注。
三、性能篇
最后更新于：2022-04-01 04:50:13
> 原文：http://www.cnblogs.com/constantince/p/4585983.html
卤煮在前面已经向大家介绍了Chrome开发者工具的一些功能面板，其中包括**Elements**、**Network**、**Resources**基础功能部分和**Sources**进阶功能部分，对于一般的网站项目来说，其实就是需要这几个面板功能就可以了（再加上**console**面板这个万精油）。它们的作用大多数情况下是帮助你进行功能开发的。然而在你开发应用级别的网站项目的时候，随着代码的增加，功能的增加，性能会逐渐成为你需要关注的部分。那么网站的性能问题具体是指什么呢？在卤煮看来，一个网站的性能主要关乎两项，一是加载性能、二是执行性能。第一项可以利用**Network**来分析，我以后会再次写一篇关于它的文章分享卤煮的提高加载速度的经验，不过在此之前，我强烈推荐你去阅读《web高性能开发指南》这本书中的十四条黄金建议，这是我阅读过的最精华的书籍之一，虽然只有短短的一百多页，但对你的帮助确实无法估量的。而第二项性能问题就体现在内存泄露上，这也是我们这篇文章探讨的问题——通过**Timeline**来分析你的网站内存泄露。
虽然浏览器日新月异，每一次网站版本的更新就意味着JavaScript、css的速度更加快速，然而作为一名前端人员，是很有必要去发现项目中的性能的鸡肋的。在众多性能优化中，内存泄露相比于其他性能缺陷（网络加载）不容易发现和解决，因为内存泄露设计到浏览器处理内存的一些机制并且同时涉及到到你的编写的代码质量。在一些小的项目中，当内存泄露还不足以让你重视，但随着项目复杂度的增加，内存问题就会暴露出来。首先内存占有过多导致你的网站响应速度（非ajax）变得慢，就感觉自己的网页卡死了一样；然后你会看到任务管理器的内存占用率飙升；到最后电脑感觉死了机一样。这种情况在小内存的设备上情况会更加严重。所以，找到内存泄露并且解决它是处理这类问题的关键。
在本文中，卤煮会通过个人和官方的例子，帮助诸位理解**Timeline**的使用方法和分析数据的方法。首先我们依然为该面板区分为四个区域，然后对它们里面的各个功能进行逐一介绍:
虽然**Timeline**在执行它的任务时会显得花花绿绿让人眼花缭乱，不过不用担心，卤煮用一句话概括它的功能就是：描述你的网站在某些时候做的事情和呈现出的状态。我们看下区域1中的功能先：
在区域1主题是一个从左到右的时间轴，在运行时它里面会呈现出各种颜色块（下文中会介绍）。顶部有一条工具栏，从左到右，一次表示：
1、开始运行**Timeline**检测网页。点亮圆点，**Timline**开始监听工作，在此熄灭圆点，Timeline展示出监听阶段网站的执行状态。
2、清除所有的监听信息。将**Timeline**复原。
3、查找和过滤监控信息。点击会弹出一个小框框，里面可以搜索或者显示隐藏你要找的信息。
4、手动回收你网站内内存垃圾。
5、View：监控信息的展示方式，目前有两种，柱状图和条状图，在展示的事例中，卤煮默认选择条状图。
6、在侦听过程中希望抓取的信息，js堆栈、内存、绘图等。。。。
区域2是区域1的完全版，虽然他们都是展示的信息视图，在在区域2种，图示会变得更加详细，更加精准。一般我们查看监控视图都在区域2种进行。
区域3是展示的是一些内存信息，总共会有四条曲线的变化。它们对应表示如下图所示:
区域4中展示的是在区域2种某种行为的详细信息和图表信息。
在对功能做了简单的介绍之后我们用一个测试用例来了解一下**Timeline**的具体用法。
~~~
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div{
height: 20px;
widows: 20px;
font-size: 26px;
font-weight: bold;
}
</style>
</head>
<body>
<div id="div1">
HELLO WORLD0
</div>
<div id="div2">
HELLO WORLD2
</div>
<div id="div3">
HELLO WORLD3
</div>
<div id="div4">
HELLO WORLD4
</div>
<div id="div5">
HELLO WORLD5
</div>
<div id="div6">
HELLO WORLD6
</div>
<div id="div7">
HELLO WORLD7
</div>
<button id="btn">click me</button>
<script type="text/javascript">
var k = 0;
function x() {
if(k >= 7) return;
document.getElementById('div'+(++k)).innerHTML = 'hello world'
}
document.getElementById('btn').addEventListener('click', x);
</script>
</body>
</html>
~~~
新建一个html项目，然后再Chrome中打开它，接着按F12切换到开发者模式，选择**Timeline**面板，点亮区域1左上角的那个小圆圈，你可以看到它变成了红色，然后开始操作界面。连续按下button执行我们的js程序，等待所有div的内容都变成hello world的时候再次点击小圆圈，熄灭它，这时候你就可以看到**Timeline**中的图表信息了，如下图所示:
在区域1中，左下角有一组数字2.0MB-2.1MB,它的意思是在你刚刚操作界面这段时间内，内存增长了0.1MB。底部那块浅蓝色的区域是内存变化的示意图。从左到右，我们可以看到刚刚浏览器监听了4000ms左右的行为动作，从0~4000ms内区域1中列出了所有的状态。接下来我们来仔细分析一下这些状态的具体信息。在区域2种，滚动鼠标的滚轮，你会看到时间轴会放大缩小，现在我们随着滚轮不断缩小时间轴的范围，我们可以看到一些各个颜色的横条:
在操作界面时，我们点击了一次button，它耗费了大约1ms的时间完成了从响应事件到重绘节目的一些列动作，上图就是在789.6ms-790.6ms中完成的这次click事件所发生的浏览器行为,其他的事件行为你同样可以通过滑动滑轮缩小区域来观察他们的情况。在区域2种，每一种颜色的横条其实都代表了它自己的独特的意义:
每次点击都回到了上面的图一样执行若干事件，所以我们操作界面时发生的事情可以做一个大致的了解,我们滑动滚轮把时间轴恢复到原始尺寸做个总体分析:
可以看到，每一次点击事件都伴随着一些列的变化：html的重新渲染，界面重新布局，视图重绘。很多情况下，每个事件的发生都会引起一系列的变化。在区域2种，我们可以通过点击某一个横条，然后在区域4种更加详细地观察它的具体信息。我们以执行函数x为例观察它的执行期的状态。
随着在事件发生的，除了dom的渲染和绘制等事件的发生之外，相应地内存也会发生变化，而这种变化我们可以从区域3种看到：
在上文中已经向大家做过区域3的介绍，我们可以看到js堆在视图中不断地再增长，这时因为由事件导致的界面绘制和dom重新渲染会导致内存的增加，所以每一次点击，导致了内存相应地增长。同样的，如果区域3种其他曲线的变化会引起蓝色线条的变化，这是因为其他（绿色代表的dom节点数、黄色代表的事件数）也会占有内存。因此，你可以通过蓝色曲线的变化形势来确定其他个数的变化，当然最直观的方式就是观察括号中的数字变化。js内存的变化曲线是比较复杂的，里面参杂了很多因素。我们所列出来的例子实际上是很简单的。目前相信你对**Timeline**的使用有了一定的认识，下面我们通过一些Google浏览器官方的实例来更好的了解它的作用（因为观看示例都必须FQ，所以卤煮把js代码copy出来，至于简单的html代码你可以自己写。如果可以FQ的同学就无所谓了！）
（[官方测试用例一](https://developer.chrome.com/devtools/docs/demos/memory/example1)） 查看内存增长，代码如下：
~~~
var x = [];
function createSomeNodes() {
var div,
i = 100,
frag = document.createDocumentFragment();
for (;i > 0; i--) {
div = document.createElement("div");
div.appendChild(document.createTextNode(i + " - "+ new Date().toTimeString()));
frag.appendChild(div);
}
document.getElementById("nodes").appendChild(frag);
}
function grow() {
x.push(new Array(1000000).join('x'));
createSomeNodes();//不停地在界面创建div元素
setTimeout(grow,1000);
}
~~~
通过多次执行grow函数，我们在**Timeline**中看到了一张内存变化的图:
通过上图可以看出js堆随着dom节点增加而增长，通过点击区域1中顶部的垃圾箱，可以手动回收一些内存。正常的内存分析图示锯齿形状（高低起伏，最终回归于初始阶段的水平位置）而不是像上图那样阶梯式增长，如果你看到蓝色线条没有回落的情况，并且DOM节点数没有返回到开始时的数目，你就可以怀疑有内存泄露了。
下面是一个用异常手段展示的正常例子，说明了内存被创建了又如何被回收。你可以看到曲线是锯齿型的上下起伏状态，在最后js内存回到了初始的状态。（[官方示例二](http://www.cnblogs.com/:https:/developer.chrome.com/devtools/docs/demos/memory/example2%20)） js代码如下:
~~~
var intervalId = null, params;
function createChunks() {
var div, foo, i, str;
for (i = 0; i < 20; i++) {
div = document.createElement("div");
str = new Array(1000000).join('x');
foo = {
str: str,
div: div
};
div.foo = foo;
}
}
function start() {
if (intervalId) {
return;
}
intervalId = setInterval(createChunks, 1000);
}
function stop() {
if (intervalId) {
clearInterval(intervalId);
}
intervalId = null;
}
~~~
执行start函数若干次，然后执行stop函数，可以生成一张内存剧烈变化的图:
还有很多[官方实例](https://developer.chrome.com/devtools/docs/demos/memory/)，你可以通过它们来观察各种情况下内存的变化曲线，在这里我们不一一列出。在这里卤煮选择试图的形式是条状图，你可以在区域1中选择其他的显示方式，这个全靠个人的爱好了。总而言之，**Timeline**可以帮助我们分析内存变化状态（Timeline直译就是时间轴的意思吧），通过对它的观察来确定我的项目是否存在着内存泄露以及是什么地方引起的泄露。图表在展示上虽然很直观但是缺少数字的精确，通过示图曲线的变化我们可以了解浏览器上发生的事件，最主要的是了解内存变化的趋势。而如果你希望进一步分析这些内存状态，那么接下来你就可以打开**Profiles**来干活了。这将是我们这个系列的下一篇文章要介绍的。
二、进阶篇
最后更新于：2022-04-01 04:50:11
> 原文：http://www.cnblogs.com/constantince/p/4579121.html
上篇向大家介绍完了基础功能篇，这次分享的是Chrome开发工具中最有用的面板**Sources**。 **Sources**面板几乎是我最常用到的Chrome功能面板，也是在我看来决解一般问题的主要功能面板。通常只要是开发遇到了js报错或者其他代码问题，在审视一遍自己的代码而一无所获之后，我首先就会打开**Sources**进行js断点调试，而它也几乎能解决我80%的代码问题。Js断点这个功能让人兴奋不已，在没有js断点功能，只能在IE（万恶的IE）中靠alert弹出窗口调试js代码的时代（特别alert一个object根本不会理你），那样的开发环境对于前端程序员来说简直是一场噩梦。本篇文章讲会介绍**Sources**的具体用法，帮助各位在开发过程中够愉快地调试js代码，而不是因它而发疯。首先打开F12开发工具切换到**Sources**面板中:
**Sources**功能面板是资源面板，他主要分为四个部分，四个部分并不是独立的，他们互相关联，互动共同实现一个重要的功能:监控js在执行期的活动。简单来说就是断点啦。
首先我们来看区域1，它的功能有些类似于**Resources**面板，主要是显示网页加载的脚本文件：例如css， js等资源文件（它不包含cookie，img等静态资源文件）。
区域1的导航条上有三个tab切换选项，他们都存有不同域名和环境下的js和css文件，我们首先来说明*Sources*（资源）选项的作用:
*S**ources*: 包含该项目的静态资源文件。双击选中文件，该文件内容会在区域2中显示，如果你选中的是js文件，那么你可以在区域2种单击行号进行断点调试，只要js执行到了你所标记的这一行，它会停止向下执行并且等待你的命令:
从上图可以看到js执行到断点处时各个区域的变化，首先是区域3中的*Breakpoints*记录信息会变高亮，然后是区域4中*Scope *选项中列出了断点处私有和公有的变量信息，这样，我可以很直观地知道，此时此刻js的执行状态。同样的，你可以把鼠标放到区域2种的某个变量上，浏览器会弹出一个小框框，框框里面则是你悬浮其上的变量所有信息:
然后，你可以按**F10**跟着js执行的路径一步一步地走下去，如果你遇到了一个函数包含着另外一个函数，那么你可以按**F11**进入到个函数中去观察它的代码执行活动。你也可以通过点击区域1底部的各个图标对js代码进行跟踪。不过我建议你使用快捷键，故名思义，因为它比较快捷方便。不过怎么用完全按照个人习惯来吧。下图是各个按钮的作用功能。
在上图蓝色圆圈中数字，它们分别代表:
1、停止断点调试
2、不跳入函数中去，继续执行下一行代码（F10）
3、跳入函数中去（F11）
4、从执行的函数中跳出
5、禁用所有的断点，不做任何调试
6、程序运行时遇到异常时是否中断的开关
接下来在区域4种切换到*Watch Expressions* 选项，它的作用是为目前断点添加表达式，使得每次断点往下走一步都会执行你写下的js代码。需要注意的是这个功能必须谨慎使用，因为这可能会导致你写下的监控代码段会不断地被执行。
为了避免你的调试代码重复执行，我们可以在调试时直接在**console**控制台上一次性地输出当前断点处的信息（推荐这样做）。为了验证我们在**console**面板中拥有的是当前断点环境，我门可以对比断点执行前后的this值变化。
 
如果你觉得在断点的时候为了看一个变量必须借用console面板输出的方式来查看会比较麻烦，那么你可以更新最新版的Chrome，它已经为我们解决了这个烦恼。为了方便开发者调试，在这一点上谷歌已经做到了极致，就在前几天更新过Chrome以后，卤煮意外地发现了断点时监控环境变量的另外一种方式，这种方式极为清晰，在断点调试的时候，区域2中会自动显示每个变量的值，每次代码往下走的时候这个值都回时时更新。这让开发者对当前环境变量几乎可以说是一目了然。（此功能有一个小缺陷，那就是无法查看数组或者对象的具体索引和值，不过我相信google会改进它的。）
当你的项目已经线上，出现了一个bug，你修复了之后无法看到它真正在线上的效果，那么你可以在打开线上的项目，直接在浏览器中修改代码然后看到效果。这样的效果往往是最直接的，这种方法也能帮你省去频繁验证发布的麻烦，毕竟身为前端码农的你也一定会听到过后台（通常情况下是后台发布）大哥的抱怨：“XXX，测试通过了没，不要出现了哈，发布一次很麻烦的！”。而在Chrome里面，只需要在区域2种直接修改，你就可以验证你的代码在线上是否可行。卤煮在此处只是指出该功能的用法之一。其他的就凭诸位的聪明才智去想了。
 
即使在断点时，你也可以编辑代码，按ctrl+S保存之后，你会看到区域2的背景由白色变为浅色，而断点会重新开始执行。
回到区域1，*Content script* 选项开里面包含着一些第三方插件或者浏览器自身的js代码,经常它是被忽略的，实际上它的作用很少。我们可以更多关注一下*Snippets*选项。还记得基础篇里面介绍的*style*吗？在里面我们可以编辑界面的css代码并且即时看到它们的映射效果，同样地，在*Sinppets*中，我们也 可以编辑（重写）js代码片段。这些片段实际上就相当于你的js文件一样，不同的是本地的js文件在编辑器里面编辑的，而此处，你是在浏览器中编写的。这些代码片段在浏览器刷新的时候既不会消失，也不会执行，除非是你手动执行它。它可以存在你的本地浏览器中，即使关闭浏览器，再次打开时它依然还在那里。它的主要作用可以使得我们编写一些项目的测试代码时提供便捷，你知道，如果你在编辑器上编写这些代码，在发布时你必须为它们添加注释符号或者手动删除它们，而在浏览器上编写就不需要这样繁琐了。
在*Snippets*选项的空白处右键后选择弹出的new选项，建立一个你自己的新的文件，然后在区域2种编辑它。
Snippets 的非常功能强大，它的许多隐藏功能还有待发掘。目前卤煮使用它是在记住调试片段、单元测试、少量的功能代码编写功能上。
最后我们看看js中时间丰富的监控功能，同上篇文章介绍的一样，**Sources**面板和**Elements**面板一样有监控事件的功能，而且Sources中功能更加丰富，也更加强大。它的这部分功能集中在区域3中。我以下图为例，观察其作用。
从上到下，紫色圈内的数字的意义：
1、断点处的债堆栈，就是从该函数起，逐级追寻调用到他的函数名。例如:
`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开发工具中的性能方面的调试。
一、基础功能篇
最后更新于：2022-04-01 04:50:09
> 原文：http://www.cnblogs.com/constantince/p/4565261.html
就算你不是一名前端开发工程师，相信你也不会对Chrome浏览器感到陌生。根据最新的一份（2015/06）的浏览器市场占有率报告，Chrome近乎占有浏览器天下的半壁江山。简单、快捷使它成为了新时代人们的新宠。如果你是一名web开发人员，我推荐你使用Chrome。作为前端开发的"IDE"，你只需要搭配一个编辑器就能完成几乎所有的开发任务了。关于它的使用和功能分析要么都是大而不全，要么是巨细糜烦。本系会比较详细地分享卤煮的一些Chrome（F12开发者功能）使用经验，从一些基础的功能开始到它的一些高级性能分析器（Timeline、Profiles）,在最后，将会推荐几款好的插件，希望对您的开发工作有些许的作用。如果你对一些面板模块功能已经很了解可以直接跳过去阅读你感兴趣的部分。
## 一、Elements
在Element中主要分两块大的部分
A：HTML结构面板
B：操作dom样式、结构、时间的显示面板
1.在A中，每当你的鼠标移动到任何一个元素上，对应的html视图中会给该元素蓝色的背景。
2.如果你单击选中一个元素，在A部分的底部，会显示该元素在html结构中的位置关系
3.然后你可以在B部分的styles选项中编辑该元素的样式，并且看到html结构的实时更新（大大的福利）
4.你可以在B界面中切换到Event Listeners选项，观察该元素绑定的事件。
click 是事件名称
.div1 事件是索引名称（也就是通过什么绑定的）
attachment 事件来源
handler里面包含事件的毁掉主体内容
useCapture表示该事件是否向上冒泡
5.选中一个元素，右击鼠标，你会看到有一个弹出窗口出现，里面有若干选项
Add attribut : 为该元素添加属性
Edit attribute：修改该元素的属性
Force element state： 为元素激活某种状态（主要用在可以几乎的元素比如a、input、button等）
Edit as HTML：编辑该元素（你可以重写它的整个content）甚至修改它的标签名称
中间简单的掠过.......
Break on：为该元素添加dom操作事件监听。包含三个选项（树结构改变、属性改变、节点移除）。这个选项的作用是帮助我们监控和定位操作元素的代码。请参看下图事例：
6.在A界面的弹出选项窗口中选择node removal，在B界面切换到DOM Breakpoints 选项，可以看到有注册信息。然后我们点击click me按钮触发删除div3的事件，可以看到浏览器自动为我们定位删除该元素的代码部分，并且停止执行js代码：
7.在B界面中切换到Properties选项，可以看到选中元素的各种信息（英文单词里面的介绍比较简单，就不一一介绍了）。
8.点击A界面的任意地方，按快捷键ctrl+F可以看到底部有输入框，在输入框中输入你想要查找的任何内容，如果匹配到了，都回在A面板中高亮显示
9.或者你可以点击左上角的问号图标，然后把鼠标移动到视图界面中，对准元素按下鼠标左键，对应的A界面会定位到选择的元素。
## 二、Network
1.Network是一个监控当前网页所有的http请求的面版，它主体部分展示的是每个http请求，每个字段表示着该请求的不同属性和状态
Name：请求文件名称
Method：方法（常见的是get post）
Status：请求完成的状态
Type：请求的类型
Initiator：请求源也就是说该链接通过什么发送（常见的是Parser、Script）
Size：下载文件或者请求占的资源大小
Time：请求或下载的时间
Timeline：该链接在发送过程中的时间状态轴（我们可以把鼠标移动到这些红红绿绿的时间轴上，对应的会有它的详细信息：开始下载时间，等待加载时间，自身下载耗时）
2.单击面板中的任意一条http信息，会在底部弹出一个新的面板，其中记录了该条http请求的详细参数header（表头信息、返回信息、请求基本状态---请参看http1.1协议内容对号入座）、Preview（返回的格式化转移后文本信息）、response（转移之前的原始信息）、Cookies（该请求带的cookies）、Timing（请求时间变化）
3.在主面板的顶部，有一些按钮从左到右它们的功能分别是：是否启用继续http监控（默认高亮选中过）、清空主面板中的http信息、是否启用过滤信息选项（启用后可以对http信息进行筛选）、列出多种属性、只列出name和time属性、preserve log（目前不清楚啥用）、Dishable cahe（禁用缓存，所有的304返回会和fromm cahe都回变成正常的请求忽视cache conctrol 设定）；
4.最后在主面板的底部有记录了整体网络请求状态的一些基本信息
## 三、Resources
Resources部分较简单，他主要向我们展示了本界面所加载的资源列表。还有cookie和local storage 、SESSION 等本地存储信息，在这里，我们可以自由地修改、增加、删除本地存储。
至于webSql，我知道的并不多，在开发中很少用到。如果你想了解这方面的信息，我推荐你去阅读这篇博客
http://www.cnblogs.com/chuncn/archive/2010/11/22/1884783.html*