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’)时间点间的性能。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2016.03.28 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
