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占用情况了：

参考：

• Chrome Console API 
• Chrome Command Line API
• Chrome Console使用指南

原文地址:http://heikezhi.com/yuanyi/10%E4%B8%AAchrome%20console%E5%AE%9E%E7%94%A8%E5%B0%8F%E6%8A%80%E5%B7%A7