微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

JavaScript Console 那些少人所知的特性

2015-03-10 20:11 前端大全
(点击 上方蓝字 ,可快速关注我们)
我们都使用console 工具有些年头了(谢谢Firebug),但是我们大多数人都只使用一些基本功能,如console.log()或console.error()。


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


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


字符串替换


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

你可以这样使用:


console.log('User %s has %d items', 'John', 5);

>> "User John has 5 items"


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


var example = " This -> ' and this -> '"; console.log('Here is my string "%s"', example);

>> "Here is my string " This -> ' and this -> '""


目前支持的标识符有:


%s 字符串: IE, Chrome, Firefox

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

%f 浮点值 : IE, Chrome, Firefox

%o Javascript 对象 : IE, Chrome, Firefox

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

DOM对象也会被处理。

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

例:


console.log(‘There are now %c%d%c listeners’, ‘font-weight: bold;’, 2, ‘font-weight: normal;’);

There are now 2 listeners


%b 二进制值: IE

%x 十六进制值: IE


分组信息


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


console.group('First group');

console.log('a');

console.log('b');

console.log('c');

console.groupEnd();

console.group('Second group');

console.log('1');

console.log('2');

console.log('3');

console.group('Embeded subgroup');

console.log('α');

console.log('β');

console.log('γ');

console.groupEnd(); // For the "Embeded subgroup" console.groupEnd(); // For the "Second group"



console.groupCollapsed('Pre-collapsed to save your eyes');

console.log('Never Gonna %s', 'Give You Up');

console.log('Never Gonna %s', 'Get you down !');

console.info('This is a potato');

console.groupEnd();



度量与分析


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


var slowInitializer = function() {

var collection = [];

for (var i = 20000000; i > 0 ; i--) {

collection.push(i);

if (i === 1000) {

console.time('Last iterations');

}

}

console.timeEnd('Last iterations');

};

console.time('Slow initializer');

slowInitializer();

console.timeEnd('Slow initializer');

>> Last iterations: 0.123ms Slow initializer: 2778.002ms


console.profile()和console.profileEnd()允许您分析一部分代码的性能。


console.profile()接受一个标签作为参数,这样你就可以同时启动多个定时器(没有相关信息表明最多支持多少个);


console.profileEnd()将结束最后一个启动的profiler。


代码的性能分析将显示在你的浏览器的profiles或profiler中(任何其他相关的名字);显示内存/ cpu /调用等使用情况。


var fibonateIt = function(n) {

return ((n < 2) ? n : (fibonateIt(n-1) + fibonateIt(n-2)));

};

console.profile('Fibonnaci generation');

fibonateIt(32);

console.profileEnd();



On IE



On Chrome


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


$('#image').on('click', function() {

console.count('Click on my image');

});

>> Click on my image : 1

>> Click on my image : 2

>> // [...]

>> Click on my image : 12


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


按条件记录日志


console.assert()允许您使用一个条件作为其第一个参数来进行条件调试。

如果你的第一个参数是false(松散比较 又名= =而不是= = =),它将打印你的信息(或对象),其他情况将被忽略。

例如,如果你想在循环中每迭代1000次就进行一次记录:


for (var i = 0; i <= 10000; i++) {

// Do something awesome.

console.assert(i % 1000, 'Iteration #%d', i);

}

>> "Iteration #0"

>> "Iteration #1000"

>> "Iteration #2000"

>> "Iteration #3000"

>> "Iteration #4000"

>> "Iteration #5000"

>> "Iteration #6000"

>> "Iteration #7000"

>> "Iteration #8000"

>> "Iteration #9000"

>> "Iteration #10000"


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


console.assert(

(fibonateIt(-1) === -1),

'Fibonacci for -1 should be -1'

);

console.assert(

(fibonateIt(0) === 0),

'Fibonacci for 0 should be 0'

);

console.assert(

(fibonateIt(10) === 55),

'Fibonacci for 10 should be 55'

);


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


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


console.table([['a', 'b', 'c'], ['easy as'], [1,2,3]]);



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

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


var Crush = function(name, hobby, salary, cute) {

this.name = name;

this.hobby = hobby;

this.salary = salary;

this.cute = cute;

};

var venal_crushes = [

new Crush('john', 'animals', '70K', true),

new Crush('steeve', 'cars', '0K', false),

new Crush('peter', 'computers', '160K', false),

new Crush('marcel', 'france', '20K', true)

];

console.table(venal_crushes, ['name', 'salary']);



记录堆栈跟踪日志


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


var a = function() {

console.trace('Hello I\'m a stack trace');

};

var b = function() {

a(5);

};

var c = function() {

b();

};

var d = function() {

try {

throw new Error('Ouch');

} catch(err) {

c(err);

}

};

(function() { d(); })();


最初发表在 github.com。



原文出处:medium.com

译文出处:伯乐在线 - cucr

链接:http://web.jobbole.com/82182/





 
前端大全 更多文章 5个典型的JavaScript面试题(上) Limu:JavaScript的那些书 Web开发:我希望得到的编程学习路线图 JavaScript基础工具清单 常用排序算法之JavaScript实现
猜您喜欢 为什么程序员总是写糟糕的代码?这3个原因 2015互联网人才流动报告 | 薪资、公司权威揭秘 英语流利说基础数据平台 达内教育荣膺新浪教育盛典大奖 职场 |“赢家模式”开启:四种心态让工作充满能量