chrome中控制台使用指南.docx

[html] view plaincopyprint?console.log( [html] view plaincopyprint?console.log( 颗红心向太阳 ,吼 转载） chrome 中控制台使用指南 转载自： /Wayou/p/chrome-console-tips-an d-tricks.html 1、 console.log 大家都会用 log ，但鲜有人很好地利用 console.error , console.warn 等将输出到控制台的信息进行分类整理。 他们功能区别不大，意义在于将输出到控制台的信息进行归 类，或者说让它们更语义化。 各个所代表的语义如下： console.log ：普通信息 ：提示类信息 console.error ：错误信息 console.warn ：警示信息 当合理使用上述 log 方法后，可以很方便地在控制台选择查 看特定类型的信息。 吼 ~); ( 楼上药不能停！ ); console.warn( 楼 上嘴太贱！ ）; console.error（ 楼上关你毛事？ ）; 如果再配 合 console.group 与 console.groupEnd ，可以将这种分类管 理的思想发挥到极致。这适合于在开发一个规模很大模块很 多很复杂的 Web APP 时，将各自的 log 信息分组到以各自命名空间为名称的 组里面。 [html] view plaincopyprint?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 做件漂亮的嫁衣再拉出来见人： 如果你觉得不够过瘾，[html] view plaincopyprint?console.log(%chello 如果你觉得不够过瘾， world,font-size:25px;color:red;); 那就把你能写出来的最华丽的CSS 那就把你能写出来的最华丽的 CSS 样式都应用上吧，比如 渐变。于是你可以得到如下华丽丽的效果： [html] view plaincopyprint?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 指令。 如果还不够过瘾， 那咱们来 log 一些图片吧， 甚至。 对，如下所示： [html] view plaincopyprint?console.log(%c, padding:50px 300px;line-height:120px;background:url( http://wayou.githu b.io/2014/09/10/chrome-console-tips-and-tricks/rabbit.gif) no-repeat;); 除此， console.table 更是直接以表格的形式 将数据输出 将数据输出 [html] view plaincopyprint?var data = [{ 品名 : 将数据输出 将数据输出 [html] view plaincopyprint?var data = [{ 品名 : 杜雷斯 , 数量: 4}, { 品名: 冈本, 数量: 3}]; console.table(data); 另外， console.