console命令总结

当涉及到调试您的前端Web应用程序时。
控制台控制台有一个API，提供了许多方法，使调试更容易。
开发人员使用console.log（）或console.dir（）来调查问题并不罕见;
但开发人员工具控制台还有更多功能可供使用，console.trace来追踪调用栈、console.profile分析性能、console.time计算时间、console.warn输出警告信息…..
这里对console一些常用命令进行了总结。
本文翻译自Mastering The Developer Tools Console并稍微进行了一些改动，更多可以参考原文。

打开控制台

检查元素或者F12
windows: Ctrl + Shift + I
mac: Alt + Command + I

控制台输入多行js

Shift+Enter

console.log(object [, object, …])

可以逗号隔开输出多个，第一个参数可以包含格式说明符，用于定义后续对象的格式和位置。

第一个参数	支持的格式说明符
%s	字符串
%d or %i	整数
%f	浮点值
%o	可扩展的dom元素（如开发工具的’元素’选项卡中所示）
%O	可扩展的JavaScript对象
%c	使用您提供的CSS样式格式化输出

console.log('Hello Treehouse');

console.log('This is a string', { foo: 'bar' }, { bar: 'foo' });

var number = 11 * 9;
var color = 'red';


console.log('%d %s balloons', number, color);

console.log('%cThis text is styled!', 'color: #86CC00; background-color: blue; font-size: 20px; padding: 3px;')

console.assert(expression, object)

console.assert（）方法接受两个参数，一个布尔表达式和一个对象。
如果表达式的结果为false，则该对象将被打印在控制台中。

var count = 5;
console.assert(count > 10, 'count is not larger than 10');

console.clear()

清空控制台
- console.clear();
- windows: Ctrl+L     Mac: CMD + K

console.count(label)

console.count（）方法将输出调用count（）方法的次数。此方法可用于查看函数在代码中被调用的次数。

for (var i = 0; i < 3; i++) {
    clickHandler();
}

console.dir(object)

console.dir（）方法会将提供的对象的javascript表示形式打印到控制台。
此方法对检查html元素特别有用，因为它将显示元素的dom表示，而不是使用console.log（）时显示的xml表示。

console.dir(document.body);

console.dirxml(object)

console.dirxml（）方法打印对象上的xml表示形式。

console.dirxml(document.body);

console.error(object [, object, …])

console.error（）方法接受一个或多个对象并将其打印到控制台。
此方法与console.log（）类似，但是console.error（）也会从调用方法的位置打印堆栈跟踪。
输出也将被标记为控制台中的错误。

console.error('Page not found (404)');

console.info(object [, object, …])

console.info（）方法的功能与console.log（）方法相同，只是日志消息被赋予info标志。
这可以很方便，因为开发人员工具控制台具有允许使用标志过滤日志消息的功能。

console.profile([profile]) & console.profileEnd()

如果开发人员工具处于打开状态，console.profile（）方法将启动一个新的JavaScript cpu配置文件。
如果您愿意，您可以选择为配置文件指定标签。
console.profileend（）方法将完成配置文件。

function animationUI() {
    console.profile('Animating');


    // Animate something...


    console.profileEnd();
}
animationUI();

console.table(data)

console.table（）方法允许将结构化数据作为控制台中的交互式表格输出。

var data = [
    {first_name: 'Matt', last_name: 'West', occupation: 'Programmer'},
    {first_name: 'Vince', last_name: 'Vaughn', occupation: 'Actor'},
    {first_name: 'Larry', last_name: 'Page', occupation: 'CEO'}  
];


console.table(data);

console.time(label) & console.timeEnd(label)

console.time（）和console.timeEnd（）方法为您提供了一种计算代码执行所需时间的方法。
time（）和timeEnd（）方法都应该传递相同的标签参数。
label参数：
给新计时器的名字。这将识别计时器;调用console.timeEnd（）来停止计时器并将时间输出到控制台时使用相同的名称。

console.time('Draw frame');


// Execute some code...


console.timeEnd('Draw frame');

console.trace()

输出堆栈跟踪。

function foo() {
  function bar() {
    console.trace();
  }
  bar();
}


foo();

console.warn(object [, object, …])

最后，console.warn（）方法将使用警告标志将消息记录到控制台。

console.warn(‘This is a warning.’);

翻译自

Mastering The Developer Tools Console

参考阅读

MDN: Console Documentation
Google Developers: Console API Reference
Google Developers: Dev Tools Tips and Tricks
CHROME开发者工具的小技巧