- 1、本文档共11页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
[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.
文档评论(0)