Chrome的开发者工具已经强大到没朋友的地步了，特别是其功能丰富界面友好的console，使用得当可以有如下功效：
console.log大家都会用log，但鲜有人很好地利用console.error , console.warn 等将输出到控制台的信息进行分类整理。
当合理使用上述log方法后，可以很方便地在控制台选择查看特定类型的信息。 console.log('一颗红心向太阳','吼吼~');
console.info('楼上药不能停！');
console.warn('楼上嘴太贱！');
console.error('楼上关你毛事？');
如果再配合console.group 与console.groupEnd，可以将这种分类管理的思想发挥到极致。这适合于在开发一个规模很大模块很多很复杂的Web APP时，将各自的log信息分组到以各自命名空间为名称的组里面。 console.group("app.foo");
console.log("来自foo模块的信息 blah blah blah...");
console.groupEnd();
console.group("app.bar");
console.log("来自bar模块的信息 blah blah blah...");
console.groupEnd();
而关于console.log，早已被玩儿坏了。一切都源于Chrome提供了这么一个API：第一个参数可以包含一些格式化的指令比如%c。 比如给hello world 做件漂亮的嫁衣再拉出来见人： console.log('%chello world','font-size:25px;color:red;');
如果你觉得不够过瘾，那就把你能写出来的最华丽的CSS样式都应用上吧，比如渐变。于是你可以得到如下华丽丽的效果： console.log('%chello world', 'background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em;');
各种招大招的节奏啊~ 看着上面密集的代码不用惊慌，上面console.log()第二个参数全是纯CSS用来控制样式的，你不会陌生。而第一个参数里可以带用百分号开头的转义指令，如上面输出带样式的文字时使用的%c指令。更详细的指令参见官方API文档的这个表格。 如果还不够过瘾，那咱们来log一些图片吧，甚至。。。动图？ console.log("%c", "padding:50px 300px;line-height:120px;background:url('http://wayou.github.io/2014/09/10/chrome-console-tips-and-tricks/rabbit.webp') no-repeat;");
看着上面摇摆的豆比兔是不是有种抽它一脸的冲动。 除此，console.table 更是直接以表格的形式将数据输出，不能赞得太多！ var data = [{'品名': '杜雷斯', '数量': 4}, {'品名': '冈本', '数量': 3}];
console.table(data);
另外，console.log() 接收不定参数，参数间用逗号分隔，最终会输出会将它们以空白字符连接。 console.log('%c你好','color:red;','小明','你知道小红被妈妈打了么');
console.assert当你想代码满足某些条件时才输出信息到控制台，那么你大可不必写if或者三元表达式来达到目的，cosole.assert便是这样场景下一种很好的工具，它会先对传入的表达式进行断言，只有表达式为假时才输出相应信息到控制台。 var isDebug=false; console.assert(isDebug,'开发中的log信息。。。');
console.count除了条件输出的场景，还有常见的场景是计数。 function foo(){
//其他函数逻辑blah blah。。。
console.count('foo 被执行的次数：');
}
foo();
foo();
foo();
console.dir将DOM结点以JavaScript对象的形式输出到控制台 console.dir(document.body); console.log(document.body);
console.time |
|
声明：文章版权归原作者所有 部分文章转自互联网 如有侵权请联系
[邮箱地址] 删除
|
注册
登录
