10个chrome console实用小技巧
1. 基本输出
让我们先从最常见的console.log开始,console.log负责将输入的一个或多个参数写入console,因此,如果你需要输出较为复杂的表达式,可以直接将它们分割为多个参数,而不需要用+进行手动拼接:
console.log("Node count:", document.childNodes.length, "and the current time is:", Date.now());
除此之外,你也可以使用格式化字符来达到同样效果:
console.log("Node count: %d, and the current time is: %s", document.childNodes.length, Date.now());
除了d%和是%s,chrome console支持以下格式化字符,后面我们会详细说明:
- %s,字符串
- %d/%i,整数
- %f,浮点数
- %o,DOM元素
- %O,JS对象
- %c,CSS样式
2. DOM元素和JS对象
就如前面提到的,我们可是使用%o和%O来输出DOM元素和JS对象,实际上不用这么麻烦,你可以直接传递DOM元素给console.log,对于JS对象,则可以使用console.dir或者dir。
console.log(document.body.firstElementChild)
console.dir(document.body.firstElementChild);
除了dir,chrome console还封装了Object.keys和Object.values,因此你可以直接使用keys和values来检查某个对象的键/值。
3. CSS
如果你希望console的输出更绚丽多彩一些,甚至可以使用css来控制输出的样式:
console.log("%cThis will be formatted with large, blue text", "color: blue; font-size: x-large");
如果你是markdown爱好者,可以试试Github上的 这个Log项目,它可以让你使用markdown语法来格式化输出:
项目地址: https://github.com/adamschwartz/log
4. console.assert & console.count
如果你读过jQuery作者John Resig和Bear Bibeault写的“ Secrets of the JavaScript Ninja”这本书,想必还记得全书就是从一个assert函数定义开始的,使用chrome,你可以省去自定义assert的麻烦,直接使用console.assert来进行断言:
console.assert(list.childNodes.length < 500, "Node count is > 500");
除了console.assert,chrome console还提供了一个很有用的API:console.count,有时候你可能想要知道某个函数执行了多少次,这时候console.count就派上用场了:
function login(user) {
console.count("Login called");
// login() code...
}
你还可以传递不同的label,每个label都会进行单独计数 :
5. 分组输出
你可能在JS的单元测试框架中见过这样的输出,如果你希望你的输出信息也像这样有条例,只需要使用console.group和console.groupEnd来对输出进行分组就可以了:
var user = "jsmith", authenticated = true, authorized = true;
// Top-level group
console.group("Authenticating user '%s'", user);
if (authenticated) {
console.log("User '%s' was authenticated", user);
// Start nested group
console.group("Authorizing user '%s'", user);
if (authorized) {
console.log("User '%s' was authorized.", user);
}
// End nested group
console.groupEnd();
}
// End top-level groupconsole.groupEnd();
console.log("A group-less log trace.");
如果希望分组默认是折叠起来的,只需要用console.groupCollapsed代替console.group就可以了。
6. 测量时间
如果想要知道某段代码执行了多少时间,console.time和console.timeEnd可以很好的帮到你:
console.time("Array initialize");
var a = new Array();
for(var i=0;i<10000;i++) a[i] = "element" + i;
console.timeEnd("Array initialize");
7. 选取元素
即使当前页面没有加载jQuery,你也依然可以使用$和$$函数来选取元素,实际上,这两个函数只是对 document.querySelector()和 document.querySelectorAll()的简单封装,$用于选取单个元素,$$则用于选取多个:
8. 检查元素
如果需要在DOM树中快速查找某个DOM元素,除了在那个元素上通过右键点击“检查元素”菜单外(有时这样会很低效),你还可以使用inspect方法,它会为你在DOM树中快速定位到你要检查的那个元素:
上面这个例子使用了$_来引用最近的一个表达式,除了$_,你还可以使用$0,$1,$2,$3,$4,$5这5个变量来引用最近选取过的5个DOM元素。
9. 事件监控和检查
如果你需要监控某个对象上的事件,可以使用monitorEvents,下面的例子会在console中输出所有的resize事件:
monitorEvents(window, "resize");
要停止监控,可以调用 unmonitorEvents()
unmonitorEvents(window);
如果想要了解某个对象绑定了那些事件处理函数,chrome console提供了getEventListeners函数用来检查某个对象上的所有事件处理函数:
10. CPU profile
最后,如果你希望了解某段代码的CPU占用情况,可以使用profile和profileEnd来生成CPU profile:
profile("Array initialize");
var a = new Array();
for(var i=0;i<10000;i++) a[i] = "element" + i;
profileEnd("Array initialize");
现在就可以在Profiles Tab下查看这段代码的CPU占用情况了:
参考: