chrome的debug工具Profiles使用方法

简介

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

Profiles是什么

Profiles在哪里
如下图

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

Profiles具体可以干什么

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

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

使用方法一

我们想查看点击一个按钮后，到展示页面的性能，我们可以打开工具，如下图，点击start ，然后点击按钮

完整内容展示后，点击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’)时间点间的性能。