chrome的debug工具Profiles使用方法

简介

本文介绍下chrome的debug工具Profiles，很多人应该没用过，甚至不知道。

Profiles是什么

Profiles在哪里
如下图

没错，就在我们最长使用的导航里面，大家基本没有用到过吧。

Profiles具体可以干什么

定位性能问题，借助它我们可以

• 可以借助Profiles定位出比较耗时的函数
• 查找页面卡顿的原因

使用方法一

我们想查看点击一个按钮后，到展示页面的性能，我们可以

1. 打开工具，如下图，点击start ，然后点击按钮
   
2. 完整内容展示后，点击stop（注意，中间不要有其他操作，避免干扰)，然后就会生成一个性能分析的数据

实战
我们使用一段简单的代码：

var test1 = function () {
    var p = 0;
    for(var i =0;i< 5000000;i ++) {
        p = p + i;
    }
    console.log(p)
}
var test2 = function () {
    var p = 0;
    for(var i =0;i< 1000000;i ++) {
        p = p + i;
    }
    console.log(p)
}
test1();
test2();

下图是生成的报告

使用方法二

使用

console.profile(name)和console.profileEnd(name)

参数数是一个字符串，记录这次性能监控的名字

例如上面代码可以修改为

console.profile('test')
var test1 = function () {
    var p = 0;
    for(var i =0;i< 5000000;i ++) {
        p = p + i;
    }
    console.log(p)
}
var test2 = function () {
    var p = 0;
    for(var i =0;i< 1000000;i ++) {
        p = p + i;
    }
    console.log(p)
}
test1();
test2();
console.profileEnd('test')

这样就能可以不适用人肉点击start和stop去记录。
这个命名为test的Profiles就是记录console.profile(‘test’)时间点到console.profileEnd(‘test’)时间点间的性能。

举一个实践中用到的例子

这个例子我也拿过来做过面试题，作为开放式题目：

我们在发出ajax时，打一个点作为开始，我们监听到ajax回来打第二个点作为结束，这两个点的时间是1000ms，但是我们通过network查看网络耗时，是300ms，请问中间700ms去哪里了？

其实这个问题我想了解两层，第一是js是单线程，阻塞；
第二个是如何定位问题，那么如果能借助这个工具分析，我就觉得很厉害了

微信公众号