前端技术-调试工具（下）

页面制作之调试工具

五.Profiles

这个主要是做性能优化的，包括查看CPU执行时间与内存占用等。

例述如下：原文地址：http://www.smashingmagazine.com/2012/06/12/javascript-profiling-chrome-developer-tools/。

你的网站正常运转。现在我们来让它运转的更快。网站的性能由页面载入速度和代码执行效率决定。一些服务可以让你的网站载入更快，比如压缩JS和CDN，但是让代码执行的更快你要做的事情。
代码中很小的改动都可能对性能造成巨大的影响。快速灵活的网站和可怕的“无响应脚本”对话框可能只有几行代码的差别。这篇文章告诉你如何通过用Chrome开发者工具（Chrome Developer Tools）找到这几行关键的代码。

我们来看一个简单的“颜色排序器”应用，这个应用展示了一个由各种颜色构成的网格，你可以拖拽这些颜色进行混合。每一个点都是一个div标签加上一些让它看起来是圆的的CSS。

页面载入的很快，但还是花费了一些时间，在渲染之前还闪了一下。是时候对这个页面进行性能分析让它更快了。

+设置一个基线

在开始做性能优化的时候要设置一个基线，来明确这个页面的速度到底怎样。这个基线可以让你知道自己是否做了优化并帮助你权衡利弊。
性能分析器(profiler)是chrome开发者工具的一部分，点击小扳手下面的工具菜单就可以打开它。Firebug也有一些性能评测工具，但是webkit内核的浏览器（chrome和safari）在对代码进行性能分析和展示时间线方面是最棒的。Chrome还提供一种很棒的事件跟踪工具，叫做 speed tracer。
在时间线(timeline)标签下开始记录，载入页面然后停止记录，这样就设置了一个基线。（打开chrome开发者工具，点击“时间线”标签，然后点击窗口底部圆形的黑色“记录”图标开始记录）。我记录了三次然后取了平均值，以防我的电脑在第一次测试的时候运行的很慢。

用chrome开发者工具进行JS性能分析

我的平均基线，也就是从第一个请求到页面全部渲染结束所花费的时间是1.25秒。这个时间不是太长，但是对于这样一个小的页面来说也不算好。我想让代码执行的更快，但是我并不知道是什么让它慢下来的。性能分析器(profiler)帮助我找到原因。

+创建一个Profile

时间线(timeline)告诉我们代码运行花费的时间，但是并没有帮助我们知道代码运行的时候发生了什么。profiler告诉我们哪些函数的执行占用了大部分时间。让我们切换到chrome开发者工具的“Profiles”标签页开始性能测试，这里一共提供了三种类型的性能测试。


1、javascript cpu 性能测试
显示javascript占用了多少CPU

2、css选择器性能测试
显示处理CSS选择器占用的CPU

3、堆栈快照
显示javascript对象的内存占用情况

我们想要javascript代码执行的更快，所以我们进行CPU性能测试。我们开始性能测试，刷新页面然后停止。

用chrome开发者工具进行JS性能分析

通过性能分析首先知道很多函数在执行。我发现列表最顶端的是decimalToHex和makeColorSorter两个函数。这两个函数占用了CPU13.2%的时间，这是做优化的好地方。

我们可以点击函数调用旁边的“下一个”箭头来查看完整的函数调用堆栈。展开后，可以看到decimalToHex是被makeColorSorter调用的，makeColorSorter是通过$(document).ready调用的。

$(document).ready(function() {
    makeColorSorter(.05, .05, .05, 0, 2, 4, 128, 127, 121);
    makeSortable();
});

弄清楚这两个函数是哪里调用的，也就弄清楚了让颜色可以排序并不是最大的性能问题。通常情况下性能问题都是由多余的排序操作造成的，但是在我的代码中相比与排序增加DOM元素花费了更多时间。

我想要让这些函数执行的更快，但是首先我想要将我的改动区隔开。在页面载入过程中会发生很多事情，我不想要这些影响到我的性能分析。

+区隔问题

我做了第二个版本，这个版本中“颜色排序器”在我点击按钮之后才载入，而不是在document ready的时候载入。这就把文档载入的过程分离出去，让我可以只对颜色分类进行性能测试。调完性能之后我可以立刻改回去。让我们调用新的函数testColorSorter并把它绑定到一个可点击的按钮上。

function testColorSorter() {
    makeColorSorter(.05, .05, .05, 0, 2, 4, 128, 127, 121);
    makeSortable();
}
1
<button id="clickMe" onclick="testColorSorter();">Click me</button>

在我们进行性能分析之前改变应用可能导致意外的结果。这个改动看起来很安全，但是我还是要重新运行性能检测器来看看我是不是无意中改变了什么。我会开始一次新的性能分析，点击应用中的按钮然后停止。

用chrome开发者工具进行JS性能分析

我首先注意到decimalToHex函数的载入只占用了4.23%的时间。这是代码执行花费时间最多的地方。我们创建一个新的基线来看看这个方案对代码有多大的优化。

用chrome开发者工具进行JS性能分析

有些事件在我点击按钮之前有触发了，但是我只关注从我点击鼠标到浏览器渲染“颜色排序器”花费的时间。鼠标在390毫秒时点击，渲染事件在726毫秒处被触发。726减去390得到我的基线336毫秒。和第一个基线一样我重复了3次来取平均值。

这时，我知道如何获得并且得到了代码确切的运行时间，我们已经准备好开始解决问题了。

+让代码更高效

性能分析器只告诉我们哪个函数造成的问题，所以我们要查看下函数的源码来了解函数做了些什么。

function decimalToHex(d) {
    var hex = Number(d).toString(16);
    hex = "00".substr(0, 2 - hex.length) + hex; 
 
    console.log('converting ' + d + ' to ' + hex);
    return hex;
}

“颜色排序器”中的每一个颜色点都有一个16进制的色彩值，例如#86F01B和#2345FE.这些值表示一种颜色中红，绿，蓝三原色各自的数值。例如的背景色是#2456FE,代表红色的值是36，绿色的值是86，蓝色的是254，每一个数值必须是0到255之间的。

decimalToHex函数把这用RGB值表示的颜色转化为页面中我们使用的16进制颜色。这个函数十分的简单，但是我还是留下了一个可以去掉的调试代码console.log在那里。

decimalToHex 函数还在数字之前加上了补位。这是很重要的一点，因为有些10进制数字对应的是1个16进制数字。比如十进制中的10对应着16进制中的C，但是在CSS中需要一个两位数。为了让这个进制换算更快速，我们让这段代码不是那么泛化。我知道每个需要补位的数字长度都为1，所以我们可以这样重写这个函数。

function decimalToHex(d) {
    var hex = Number(d).toString(16);
    return hex.length === 1 ? '0' + hex : hex; }

第三个版本的“颜色排序器”只有在需要补位的时候才改变字符串，并且不用调用substr函数。有了这个新函数，运行时间是137毫秒。再次对代码进行性能测试，可以发现decimalToHex函数只占用了总时间的%0.04,到了列表的下部。用chrome开发者工具进行JS性能分析

我们还可以发现占用CPU最多的函数是 jQuery的e.extend.merge。我不知道这个函数的作用，因为代码是压缩过的。我可以使用开发版本的jQuery，但是我发现这个函数是被makeColorSorter调用的。所以下一步我们先让这个函数执行的更快。

+减小改动

“颜色排序器”中的多彩颜色是用过正弦曲线生成的。在光谱中设置一个中心点，然后以一定的偏移来创建这个曲线。这就把颜色变成了一个“彩虹模型”。我们还可以通过改变红绿蓝三原色的使用频率来改变颜色。

function makeColorSorter(frequency1, frequency2, frequency3,
                         phase1, phase2, phase3,
                         center, width, len) {
 
    for (var i = 0; i < len; ++i)
    {
       var red = Math.floor(Math.sin(frequency1 * i + phase1) * width + center);
       var green = Math.floor(Math.sin(frequency2 * i + phase2) * width + center);
       var blue = Math.floor(Math.sin(frequency3 * i + phase3) * width + center);
 
       console.log('red: ' + decimalToHex(red));
       console.log('green: ' + decimalToHex(green));
       console.log('blue: ' + decimalToHex(blue));
 
       var div = $('<div class="colorBlock"></div>');
       div.css('background-color', '#' + decimalToHex(red) + decimalToHex(green) + decimalToHex(blue));
       $('#colors').append(div);
 
    }
}

我们要去掉console.log函数。这些调用非常的糟糕，因为每次执行都会调用decimalToHex函数，这意味着decimalToHex函数会被多调用2倍的次数。这个函数大幅度的改变了DOM结构。每次循环，都向id为colors的div中添加一个新的div。这就让我怀疑这就是e.extend.mergefunction做的事情。用性能分析器做一个小实验就可以搞清楚。

我想要一次把所有的div添加进去，而不是在每个循环中添加一个新的div。创建一个变量来存储数据，然后在最后一次性添加进去。

function makeColorSorter(frequency1, frequency2, frequency3,
                         phase1, phase2, phase3,
                         center, width, len) {
 
    var colors = "";
    for (var i = 0; i < len; ++i)
    {
       var red = Math.floor(Math.sin(frequency1 * i + phase1) * width + center);
       var green = Math.floor(Math.sin(frequency2 * i + phase2) * width + center);
       var blue = Math.floor(Math.sin(frequency3 * i + phase3) * width + center);
 
       colors += '<div class="colorBlock" style="background-color: #' + 
           decimalToHex(red) + decimalToHex(green) + decimalToHex(blue) + '"></div>';
    }
 
    $('#colors').append(colors);
}

这个小改动意味着DOM只在添加所有div的时候做一次改变。用时间线进行测试，我们发现从点击到渲染花费了31毫秒。这个dom变动，使得第四个版本的运行时间降低了86%。我可以再次打开性能分析器(profiler)，发现e.extend.merge函数占用了很少的时间，在列表中已经看不到它了。

我们还可以完全移除decimalToHex函数让代码更快一点。因为CSS支持RGB颜色，所以我们不需要把他们转换到16进制。现在我们可以这样写makeColorSorter函数。

function makeColorSorter(frequency1, frequency2, frequency3,
                         phase1, phase2, phase3,
                         center, width, len) {
 
    var colors = "";
    for (var i = 0; i < len; ++i)
    {
       var red = Math.floor(Math.sin(frequency1 * i + phase1) * width + center);
       var green = Math.floor(Math.sin(frequency2 * i + phase2) * width + center);
       var blue = Math.floor(Math.sin(frequency3 * i + phase3) * width + center);
 
       colors += '<div class="colorBlock" style="background-color: rgb(' + 
           red + ',' + green + ',' + blue + ')"></div>';
    }
 
    $('#colors').append(colors);
}

第五个版本的执行只用了26毫秒而且代码行数从28行减少到18行。

在你的应用中进行Javascript性能分析

实际工作中的应用要比“颜色排序器”复杂的多，但是做性能分析要遵循同样的基本原则

1、设置一个基线，这样你就知道你是从何处开始的。

2、把问题从应用的其他代码隔离出来。

3、在一个可控的环境下进行优化，频繁的使用时间线（timelines）和性能分析器（profiles）

还有一些性能优化的准则

1、从最慢的部分开始，这样在时间优化上可以得到最大的提升。

2、控制环境。如果你换了电脑或者做了任何大的改动，都要设置新的基线。

3、多次分析以防你电脑的异常导致得到不正确的结果。

每个人都想要他的网站更快，你必须开发新的功能，但是新的功能通常会让网站更慢。所以花费时间来做性能优化是有价值的。

六.Resource

资源面板展示了页面中的所有资源。

image_thumb10_thumb

1、资源面板tab；
2、左侧栏分类列出页面资源。如“框架”、“session存储”，如果前面有箭头点击展开还可以看到更多信息。注意左侧栏的大小是可以调整的；
3、页面资源包括字体、图片、js、css和页面本身。如果页面中有frame或iframe，展开Frames会看到其对应的frame和iframe。页面层次结构更清晰
4、数据库显示页面相关的SQL数据库数据信息；
5、相应IndexedDB 也展示页面的IndexedDB 信息；
6、以键/值 形式列表展示本地存储的数据；
7、以键/值列表显示session存储数据；
8、根据域名列举cookie；
9、显示通过manifest缓存的资源。包括很多信息，如js库文件会显示文件地址、大小和类型；
10、右侧用来显示每个资源对应的详细信息。

虽然现在由frame组成的页面越来越少见了，但查看框架内容的方法还是有必要了解的。下面截图，是一个由frame组成的页面。

image_thumb12_thumb

+每个frame都相关的资源都在一个文件夹下，同样点击展开可以了解页面的资源、js、css、图片文件和字体情况。点击选中一个框架，页面中其对应的区域会高亮显示。
注：不会列出系统已有的，如“arial”“Helvetica”等，只会列出浏览器需要下载安装的

+保存和查看资源

image_thumb131_thumb

+cookies

查看某个网站的cookie信息。如http://study.163.com/.

image_thumb17_thumb

[name]-字段名。如字段名为“remember_checked”,其值为1，这可能说明用户在登陆的时候选择了记住我；
[value]-字段所对应的值。如“_twitter_sess”所对应的值为一串加密了的session ID；
[domain]-cookie所在的域。上图的“.twitter.com”表明其子域也是可以访问该cookie的；
[path]-跟域相同，设置有效的路径。设置为“/”表明允许所在路径下都可以访问cookie；
[expires]-浏览器可以删除该cookie的日期；
[size]-cookie的大小，单位bytes；
[HTTP]-cookie的访问允许HTTP协议。这可以防止跨站js获取cookie攻击；
[secure]]-只允许加密连接访问cookie，如HTTPS；

+缓存应用

[resource]-资源的完整路径。典型的资源包括静态资源和html文件，manifest文件也属于其中；
[type]-可以改变。Manifest文件的文件类型是Manifest，其他的manifest文件中定义的文件类型为explicit。Fallback类型的文件是那些需要回调资源文件的回调文件；
[size]-资源文件的大小，单位bytes；

七.Audits

用于优化前端页面，加速网页加载速度等。

使用Chrome浏览器对页面性能进行检测，根据测试的结果进行优化。当然这个结果只是参考，在实际的项目中肯定有特殊情况存在，并不能为了满足某项测试结果而忽略特定情况的存在。

1、Chrome检测工具

点击Audits然后出现了如下界面，选中重载页面开始检测按钮，然后点击Run按钮，之后就是等待结果。

image_thumb22_thumb

2、检测结果

这个检测结果分为2类，一个是网络，一个是网页性能；

检测结果不仅列出了问题，还定位问题在哪里，可以很快入手解决对应的问题。

1）合并JS文件：Combine external JavaScript（总共有29个可以压缩的JS文件）
2）There are multiple resources served from same domain. Consider combining them into as few files as possible.一个域名有多个文件，可以考虑将他们压缩为尽可能少的文件。

3）

4）启用gzip压缩：Enable gzip compression
5）Compressing the following resources with gzip could reduce their transfer size by about two thirds (~715 B).启用gzip压缩降低传输大小。

image_thumb26_thumb

6）

image_thumb29_thumb

7）浏览器缓存：Leverage browser caching
8）The following resources are missing a cache expiration. Resources that do not specify an expiration may not be cached by browsers。资源没有指定过期时间，浏览器可能不会缓存。

网页性能部分
1）优化样式和脚本的顺序：Optimize the order of styles and scripts (4)

2）把CSS放到head中：Put CSS in the document head (3)
CSS in the document body adversely impacts rendering performance.

3）删除没用的CSS：Remove unused CSS rules (44)
44 rules (19%) of CSS not used by the current page.

4）Use normal CSS property names instead of vendor-prefixed ones (3)

应用：自己Css代码的审核；下载复制别人代码，去除无用的Css样式。可以使用FireFox的Dust-Me selectors去除无用的Css样式。

八.Console

1.console.log

大家都会用log，但鲜有人很好地利用console.error , console.warn 等将输出到控制台的信息进行分类整理。
他们功能区别不大，意义在于将输出到控制台的信息进行归类，或者说让它们更语义化。
各个所代表的语义如下：

console.log：普通信息
console.info：提示类信息
console.error：错误信息
console.warn：警示信息

当合理使用上述log方法后，可以很方便地在控制台选择查看特定类型的信息。

image_thumb33_thumb

如果再配合console.group 与console.groupEnd，可以将这种分类管理的思想发挥到极致。这适合于在开发一个规模很大模块很多很复杂的Web APP时，将各自的log信息分组到以各自命名空间为名称的组里面。

image_thumb37_thumb

console.log第一个参数可以包含一些格式化的指令比如%c，给hello word加了很炫的样式（全是纯CSS用来控制样式的）：

如果还不够过瘾，那咱们来log一些图片:

jdfw_thumb5_thumb1

除此，console.table 更是直接以表格的形式将数据输出，不能赞得太多！

var data = [{'品名': 'X', '数量': 4}, {'品名': 'Y', '数量': 3}];
console.table(data);

image_thumb41_thumb

2.console.assert

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

image_thumb45_thumb

3.console.count

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

image_thumb50_thumb

4.console.dir

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

image_thumb63_thumb

5.console.time & console.timeEnd

输出一些调试信息是控制台最常用的功能，当然，它的功能远不止于此。当做一些性能测试时，同样可以在这里很方便地进行。
比如需要考量一段代码执行的耗时情况时，可以用console.time与 console.timeEnd来做此事。

这里借用官方文档的例子：

image_thumb60_thumb

当然，我们也可以选择自己写代码来计时：

image_thumb59_thumb

6.console.profile & console.timeLime

当想要查看CPU使用相关的信息时，可以使用console.profile配合 console.profileEnd来完成这个需求。
这一功能可以通过UI界面来完成，Chrome 开发者工具里面有个tab便是Profile。

与此类似的功能还有console.timeLine配合 console.timeLineEnd,它的作用是开始记录一段时间轴，同样可以通过Chrome开发者工具里的Timeline 标签来进行相应操作。

所以在我看来这两个方法有点鸡肋，因为都可以通过操作界面来完成。但至少他提供了一种命令行方式的交互，还是多了种姿势供选择吧。

7.console.trace

堆栈跟踪相关的调试可以使用console.trace。这个同样可以通过UI界面完成。当代码被打断点后，可以在Call Stack面板中查看相关堆栈信息。

上面介绍的都是挂在window.console这个对象下面的方法，统称为Console API，接下来的这些方法确切地说应该叫命令，是Chrome内置提供，在控制台中使用的，他们统称为Command Line API。

$

似乎美刀总是被程序员及各种编程语言所青睐「你看看PHP代码就知道PHPer有多爱钱了」，在Chrome的控制台里，$用处还真是蛮多且方便的。
$_命令返回最近一次表达式执行的结果，功能跟按向上的方向键再回车是一样的，但它可以做为一个变量使用在你接下来的表达式中：

image_thumb66_thumb

上面的$_需要领悟其奥义才能使用得当，而$0~$4则代表了最近5个你选择过的DOM节点。
什么意思？在页面右击选择审查元素，然后在弹出来的DOM结点树上面随便点选，这些被点过的节点会被记录下来，而$0会返回最近一次点选的DOM结点，以此类推，$1返回的是上上次点选的DOM节点，最多保存了5个，如果不够5个，则返回undefined。

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

image_thumb69_thumb

$(selector)返回的是满足选择条件的首个DOM元素。
剥去她伪善的外衣，其实$(selector)是原生JavaScript document.querySelector() 的封装。
同时另一个命令$$(selector)返回的是所有满足选择条件的元素的一个集合，是对document.querySelectorAll() 的封装。

copy

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

copy(document.body);

keys & values

这是一对基友。前者返回传入对象所有属性名组成的数据，后者返回所有属性值组成的数组。具体请看下面的例子：

image_thumb71_thumb

monitor & unmonitor

monitor(function)，它接收一个函数名作为参数，比如function a,每次a被执行了，都会在控制台输出一条信息，里面包含了函数的名称a及执行时所传入的参数。

而unmonitor(function)便是用来停止这一监听。

jdfw_thumb11_thumb1

debug & undebug

debug同样也是接收一个函数名作为参数。当该函数执行时自动断下来以供调试，类似于在该函数的入口处打了个断点，可以通过debugger来做到，同时也可以通过在Chrome开发者工具里找到相应源码然后手动打断点。
而undebug 则是解除该断点。

而其他还有好些命令则让人没有说的欲望，因为好些都可以通过Chrome开发者工具的UI界面来操作并且比用在控制台输入要方便。

移动设备模式

现在很多的网页都要适配移动端，Chrome的移动设备模式对开发者来说无疑是一个很大的惊喜。

点击image_thumb_thumb，可以模拟各种各样的移动设备

image_thumb7_thumb

拖动模拟屏幕的标记的两块东西能任意调节设备屏幕大小

顶部橙色部分的选项，这个是选择各种要模拟的设备

下面的是当前设备的显示屏像素

image_thumb1
去掉前面的勾，或者点击这个删除的按钮，网页将会回到你现在的浏览器显示大小

image_thumb2[1]
点这个还能快速切换横屏竖屏

image_thumb3
这个是当前模拟的设备的像素比，例如：iPhone3GS是1、iphone4是2、iPhone6是3....

image_thumb4
如果你在操作的时候遇到这个警告，那么你需要刷新下网页才能看到实际的显示效果

image_thumb6

这里的这个Fit是如果你选择的模拟设备像素的显示范围超过了你的浏览器框框，那么就会根据你当前的显示器高度和宽度自适应的缩放显示比例。去掉勾选就是实际像素的显示了。

image_thumb7[1]

然后我们来看看右边蓝色的部分 第一个Network是用来模拟网络环境的。你可以模拟各种网络环境以测试网页的加载速度，甚至可以模拟断网的状态...

image_thumb8_thumb

移动设备模式暂时就介绍到这里。

---------------------------------------------------

就像开始说的，最主要的是自己多打开调试工具多点点，相信用多了就会熟悉。

前端技术-调试工具（上）

更多阅读：

http://segmentfault.com/a/1190000000683599

http://www.ibm.com/developerworks/cn/web/1410_wangcy_chromejs/

posted @ 2015-05-17 09:42  jingwhale  阅读(5103)  评论(8)  编辑  收藏  举报