JavaScript Console 那些少人所知的特性

我们都使用console 工具有些年头了(谢谢Firebug),但是我们大多数人都只使用一些基本功能,如console.log()或console.error()。

然而,console API真的很强大,它提供了很多非常有趣的特性。

要铭记于心的是,console API并不是标准,也不会标准化。绝对无法保证这些特性将是可用的,你不应该在生产环境上使用console

字符串替换

console.log()和其他打印消息的方法(info、warn和error)都支持字符串替换(就像C语言中的printf函数)。

你可以这样使用:

通常在字符串连接时很有用,避免“+”带来的痛苦和防止引号或双引号的错误。

目前支持的标识符有:

%s 字符串: IE, Chrome, Firefox

%d or %i 整数: IE, Chrome, Firefox

%f 浮点值 : IE, Chrome, Firefox

%o Javascript 对象 : IE, Chrome, Firefox

对象将很好地打印或显示链接。

DOM对象也会被处理。

%c 对以下的文本应用CSS样式. Chrome, Firefox
例:

%b 二进制值: IE

%x 十六进制值: IE


分组信息

消息可以通过console.group()、console.groupCollapsed()和console.groupEnd()进行分组。


度量与分析

他们都需要一个标签作为参数,这样你就可以同时启动多个定时器(文档说最多支持10000个),并且知道哪一个是你想要停止的。

console.profile()和console.profileEnd()允许您分析一部分代码的性能。
console.profile()接受一个标签作为参数,这样你就可以同时启动多个定时器(没有相关信息表明最多支持多少个);

console.profileEnd()将结束最后一个启动的profiler。
代码的性能分析将显示在你的浏览器的profiles或profiler中(任何其他相关的名字);显示内存/ cpu /调用等使用情况。

On IE

On Chrome

你也可以使用console.count()计算标签被执行的次数:

不要在快速和大量循环中(如前一个例子的斐波纳契数列)使用console.count()。这将导致你的控制台打印大量的信息,导致您的浏览器变慢、或不稳定、或出现异常。


按条件记录日志

console.assert()允许您使用一个条件作为其第一个参数来进行条件调试。
如果你的第一个参数是false(松散比较 又名= =而不是= = =),它将打印你的信息(或对象),其他情况将被忽略。
例如,如果你想在循环中每迭代1000次就进行一次记录:

你可能觉得assert像单元测试,当然,你也可以用它做一些单元测试,如:


以表格形式打印数据(数组、对象等)

console.table()允许您在控制台以图形表格的方式调试一些表格数据:

一些浏览器会“决定”是否需要表格来显示您的数据。例如,console.table([1,2,3]);可能不会显示在一个表格中。

您可以通过过滤来显示你想要的字段:

记录堆栈跟踪日志

console.trace()允许您显示调用行的堆栈跟踪。


最初发表在 github.com

2 收藏 评论

关于作者:cucr

新浪微博:@hop_ping 个人主页 · 我的文章 · 17

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部