Devil May Code...

Vergil's Blog

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

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

让我们开始吧!

使用开发者工具控制台

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

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

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

在Chrome的开发者控制台

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

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

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

在<code>Elements</code>(<code>元素</code>/<code>查看器</code>)选项卡底部也有控制台

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

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


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

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

console.log('Hello World!');

你应该看到测试 Hello World! 打印在控制台了(如下所示):

在Chrome开发者工具中使用console.log()
(↑ 在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()

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

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

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

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

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

(↑ 在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.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.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()来统计函数调用

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

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


console.dir(object)

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

console.dir(document.body);

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

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

console.dirxml(object)

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

console.dirxml(document.body);

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

使用console.dirxml()

(↑ 使用console.dirxml())


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


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

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

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

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

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

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

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

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

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

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

(↑ 使用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.groupCollapsed()把控制台消息分组)

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

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

console.info('Hello Treehouse');

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

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

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

(↑ 使用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.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创建时间轴日志

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


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


console.timeStamp(label)

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

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

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


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


console.trace()

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

console.trace();

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

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

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

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

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

使用console.warn()记录消息

(↑ 使用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

转载请注明出处。


添加新评论 »

在这里输入你的评论...

Powered by Typecho.