精通开发者工具控制台【译】
作者:vergil 发布时间:October 10, 2017 分类:JavaScript,Web
开发者工具控制台是调试前端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 开发者工具)
你喜欢用什么工具调式你的前端应用程序?在下面的评论中分享你的最爱。
延伸阅读
(原文地址是英文文档,我改为中文文档地址)
原文地址:Mastering The Developer Tools Console
转载请注明出处。