一嘉

利用Js的console对象,在控制台打印信息
有一次用支付宝的PC扫码支付接口进行支付,按下了f12,看到了console输出的信息。觉得非常有趣,于是了解了一...
扫描右侧二维码阅读全文
13
2018/07

利用Js的console对象,在控制台打印信息

有一次用支付宝的PC扫码支付接口进行支付,按下了f12,看到了console输出的信息。觉得非常有趣,于是了解了一下这个玩意:

既然控制台能输出这些信息,那下次调试js的时候就可以省去许多麻烦。

Chrome 控制台支持以下输出:

memory , _commandLineAPI , debug , error , info , log , warn , dir ,
dirxml , table , trace , assert , count , markTimeline , profile ,
profileEnd , time , timeEnd , timeStamp , timeline , timelineEnd ,
group , groupCollapsed , groupEnd , clear

这是简单的用法:

console.log("日志信息");
console.info("一般信息");
console.debug("调试信息");
console.warn("警告提示");
console.error("错误提示");

格式化输出:

console.log("%d年%d月%d日", 2018, 7, 13);//日期格式输出
console.log('%c这是有颜色的输出信息', 'color:white; background-color:#000000');//按格式输出

使用

console.table([['姓名','学号','性别'], ['张三','201401','男'], ['李四','201402','男'], ['王五','201403','女']]);

则可以输出一个表格。

也可以加上对应的css,来美化输出,甚至在作品上留下自己的信息:

/**test**/
!function(e){function o(s){if(t[s])return t[s].exports;var i=t[s]={exports:{},id:s,loaded:!1};return e[s].call(i.exports,i,i.exports,o),i.loaded=!0,i.exports}var t={};return o.m=e,o.c=t,o.p="",o(0)}([function(e,o){"use strict";!function(){var e=void 0;if(window.console&&"undefined"!=typeof console.log){try{(window.parent.__has_console_security_message||window.top.__has_console_security_message)&&(e=!0)}catch(o){e=!0}if(window.__has_console_security_message||e)return;var o="\u6e29\u99a8\u63d0\u793a\uff1a\u8bf7\u4e0d\u8981\u8c03\u76ae\u5730\u5728\u6b64\u7c98\u8d34\u6267\u884c\u4efb\u4f55\u5185\u5bb9\uff0c\u8fd9\u53ef\u80fd\u4f1a\u5bfc\u81f4\u9875\u9762\u5d29\u6e83\uff0c\u5f71\u54cd\u60a8\u7684\u6d4f\u89c8\u4f53\u9a8c^_^",t="\u4e3a\u4e16\u754c\u5e26\u6765\u5fae\u5c0f\u800c\u7f8e\u597d\u7684\u6539\u53d8\u3002\u6b22\u8fce\u5230\u6211\u7684\u535a\u5ba2\u505a\u5ba2",s="https://www.ameliedou.cc",i=[t," ",s].join("");/msie/gi.test(navigator.userAgent)?(console.log(o),console.log(i)):console.log("%c 一梦 %c Copyright \xa9 2017-%s\n%c"+o+"\n %c"+i+"\n ",'font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:64px;color:#00bbee;-webkit-text-fill-color:#00bbee;-webkit-text-stroke: 1px #00bbee;',"font-size:12px;color:#999999;",(new Date).getFullYear(),"color:#333;font-size:16px;","font-size:12px;"),window.__has_console_security_message=!0}}()}]);
/**输出内容到console**/

效果:
p1
上面是加上css后的代码,好了 水文+1 get

Last modification:July 14th, 2018 at 05:38 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment