开发者工具控制台是调试前端Web应用程序时可用的最强大的工具之一。 控制台有一个API，它提供了一些使调试更容易的方法。 看到开发者使用console.log()或console.dir()来调查问题并不罕见; 但是开发者工具控制台还有更多的提供。

在本博文中，你将学习到如何使用控制台API提供的方法来调试Web应用程序。 有些浏览器比其他浏览器支持更多的功能，所以我会指出任何兼容性问题。

让我们开始吧！

使用开发者工具控制台

如果你以前没有使用过开发者工具控制台，那就别担心。 在本节中，我将向你展示如何访问和使用控制台。 如果你已经熟悉了这一点，请随时跳到下一节。

你可以通过多种不同的方式打开浏览器的开发者工具。 最简单的只需右键单击页面上的某个位置，然后在出现的功能菜单中选择“检查元素”。

你也可以通过键盘快捷键启动开发者工具。Mac上大多数的浏览器的快捷键是Alt + Command + I。对于Windows，你可以使用Ctrl + Shift + I（或F12，译者注）。

(↑ 在Chrome的开发者控制台)

打开开发者工具之后，你可以单击开发者工具顶部的Console（或控制台）选项卡切换到控制台。

在Chrome中，你还可以通过点击开发者工具窗口右上角的控制台图标，在任何其他选项卡下方启动控制台。

（↑ 在Elements（元素/查看器）选项卡底部也有控制台）

注意：在本文中，我们将使用随浏览器提供的默认开发者工具。有许多伟大的浏览器扩展可以提供类似的工具。Firefox用户可能希望安装Firebug，因为Firebug控制台比Firefox默认控制台多一些功能的支持。

现在你已经打开控制台了，让我们执行一些简单的语句。

在控制台输入以下，并且按Enter：

console.log('Hello World!');

你应该看到测试 Hello World! 打印在控制台了（如下所示）：

(↑ 在Chrome开发者工具中使用console.log())

很好！现在你已经快速的掌握了如何使用控制台，让我们来看看所有的console方法来如何调试你的应用程序。

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

让我们来看看最常用的console方法之一：console.log()。这个方法简单地讲一个对象输出到控制台。

console.log('Hello Treehouse');

如果列出多个对象，他们将被连接成一个单独的、空格分隔的字符串，然后将其输出到控制台。

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

(↑ 多个对象使用console.log())

第一个参数可以包含格式说明符，允许你后续对其格式定位。

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

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

(↑ 在console.log()使用格式说明符)

开发者工具控制台支持以下格式说明符：

|格式说明符 |描述 |
|-----------|------------------------------------|
|%s |字符串（String） |
|%d或%i |整数（Integer） |
|%f |浮点数（Floating point value） |
|%o（小写）|可展开的DOM元素（如开发工具的“Elements”选项卡中所示）|
|%O(大写) |可展开的JavaScript对象 |
|%c |格式化输出你提供的CSS样式 |

使用%c格式说明符允许你在控制台输入样式。

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

(↑ 使用带样式的console.log()输出)

console.assert(expression, object)

console.assert()（断言）方法带有两个参数，一个布尔表达式和一个对象。如果表达式的结果为false，那么那个对象将会在控制台打印出来。

你通常会使用一个字符串对象作为第二个参数，但这个方法将适用于任何有效的JavaScript对象。

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

这个表达式检查变量count是否大于10。如果不是，则在控制台打印消息 "count is not larger than 10"

(↑ 使用console.assert())

console.clear()

console.clear()方法清除所有在控制台窗口中的输出。

注意：这个方法不支持默认的Firefox开发者工具，但在Firebug控制台支持。

console.count(label)

console.count()方法会输出调用了count()方法的次数。如果该方法在同一行调用，每次都使用相同的标签，你将会得到准确的计算。

此方法可用于查找代码中调用函数的次数：

function clickHandler() {
    console.count('Click handler called');
    //...
}

专业提示！ 你可以在控制台中使用shift + Enter来创建一个新行以便输入多行的表达式。

你可以通过一个for循环来测试一下这个方法它是如何工作的：

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

这段代码会调用三次clickHandler()

(↑ 使用console.count()来统计函数调用)

注意：默认的Firefox开发者工具不支持此方法。需要使用Firebug控制台。

console.dir(object)

console.dir()方法会将以JavaScript形式表示的指定对象打印到控制台。这个方法对于检查HTML元素特别有用，因为它将显示元素的DOM表示，而不是使用console.log()时显示的XML表示。

console.dir(document.body);

（↑ 使用console.log()检查HTML元素）

console.dirxml(object)

console.dirxml()方法会输出对象的XML表示形式。

console.dirxml(document.body);

在HTML和XML元素上调用，等同于调用console.log()。

（↑ 使用console.dirxml()）

注意：默认的Firefox开发者工具不支持此方法。需要使用Firebug控制台。

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

console.error()方法需要一个或多个对象作为参数，并且把他们打印到控制台。该方法类似console.log()，然而，console.error()还会在调用此方法的地方包含一个堆叠追踪。输出内容也会被标记为错误的样式。

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

这个方法在编写错误处理程序时非常有用。

(↑ 使用console.error()方法把错误记录到控制台)

console.group(object[, object, …]) & console.groupEnd()

console.group()方法是用于将一系列日志消息分组在一起。调用次方法后，任何进一步的日志都会被添加到组中，直到执行console.groupEnd()才能关闭组。

你可以指定一个可选的标题，以便在控制台中更容易找到这个组。

(↑ 使用console.group()把控制台消息分组)

它可以将多个组嵌套在内。

console.group('Group One');
console.group('Group Two');

...

console.groupEnd(); // Close group two
console.groupEnd(); // Close group one

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

console.groupCollapsed()方法本质上和console.group()一样的，除了初始在控制台处于折叠状态而不是打开状态的。

console.groupCollapsed('Fetching Data');

console.log('Request Sent');
console.error('Error: Server not responding (500)');

console.groupEnd();

console.log('Continuing...');

(↑ 使用console.groupCollapsed()把控制台消息分组)

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

console.info()方法的功能与console.log()的方式相同，除了该日志信息带有info标识。开发者控制台有这个特性，便于你使用标识来过滤日志消息。

console.info('Hello Treehouse');

注意下图中日志消息左边的蓝色信息图标。

(↑ 使用console.info()记录日志消息)

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

console.profile()方法将会启动一个JavaScript CPU配置文件（需要打开开发者工具）。你可以选择为配置文件指定一个标签。

调用console.profileEnd()完成这个配置文件。

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

    // Animate something...

    console.profileEnd();
}

这个例子如何使用profile()方法为animateUI()函数创建新的CPU配置文件。

(↑ 使用console.profile()创建一个JavaScript配置文件)

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.table()创建一个交互式表格)

这个方法可以非常方便地检查AJAX调用返回的数据。

注意：默认的Firefox开发者工具不支持此方法。需要使用Firebug控制台。

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

console.time()和console.timeEnd()方法给你一种方式用于测定执行一段代码的时长。time()和timeEnd()方法都必须传递相同的label参数。

console.time('Draw frame');

// Execute some code...

console.timeEnd('Draw frame');

(↑ 使用console.time()测定代码执行)

console.timeline(label) & console.timelineEnd(label)

console.timeline()和console.timelineEnd()方法允许你在Chrome浏览器的开发者工具创建一个新的时间轴记录。

你可以选择为新时间轴指定标签。与console.time()一样，在调用console.timeline()和console.timelineEnd()时，此标签必须相同。

console.timeline('Google Search');

// Do some work.

console.timelineEnd('Google Search');

(↑ 使用console.timeline()在Chrome创建时间轴日志)

注意：时间轴方法只能用于Chrome开发者工具。

console.timeStamp(label)

你可以使用console.timeStamp()方法手动将时间添加到时间轴。改方法可以传递一个标签便于帮助你识别开发者工具中的标记。

(↑ 使用console.timeStamp()创建时间轴标记)

注意：这个方法只支持Chrome浏览器。它以前称为console.markTimeline()。

console.trace()

console.trace()方法将从调用此方法的位置输出一个堆叠追踪。

console.trace();

(↑ 使用console.trace()打印堆栈跟踪)

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

最后，console.warn()方法会将日志消息输出到控制台，并带有一个warning标识。

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

(↑ 使用console.warn()记录消息)

总结

在这边日志中，你已经学习了各种课用于调式Web应用程序的console方法。你会发现这些使用方法很多。但是通过开发者工具控制台，明白什么可以做到是非常有用的。

我建议你在下面的延伸阅读章节中查看一些链接。特别是从Google开发者网站查看Chrome 开发者工具。（译者注：原文是dev tools tips and tricks(开发工具提示与技巧)，Google中文版翻译是Chrome 开发者工具）

你喜欢用什么工具调式你的前端应用程序？在下面的评论中分享你的最爱。

延伸阅读

（原文地址是英文文档，我改为中文文档地址）

MDN: Console Web Api 接口

Console API 参考

Chrome 开发者工具

原文地址：Mastering The Developer Tools Console

转载请注明出处。