分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容


Posted in Javascript onApril 20, 2012

问题的产生

在写JS的过程中,为了调试我们常常会写很多 console.log、console.info、console.group、console.warn、console.error代码来查看JS的运行情况,但发布时又因为IE不支持console,又要去掉这些代码,一不小心就会出错。

本文分享自己昨晚写的一个console类来试图解决这一问题。当然,更好的做法是把测试代码分开写,那样就不会有这个问题。

解决思路

如何解决IE下不兼容的问题呢,那就是我们自己定义一个console类来覆盖浏览器提供的console功能,这样只要在页面中引用此JS文件就可以了。

另外,此类还提供了查看输出的调试信息功能,console 定义了哪些功能呢,我们可以在这里看到:http://getfirebug.com/wiki/index.php/Console_API,我们可以看到这里提供了很多方法,我们常用的有 console.log、console.info、console.group、console.warn、console.error、console.profile、console.time,最后两个是分析代码性能的,比较复杂,本文没有实现。
代码解析

第一步,当然是搭一个结构,覆盖浏览器(firebug、chrome)提供的console功能,这样直接引用此JS文件即可保证浏览器(主要是IE)中不出错:

console var console={ 
assert:function(){ 
}, 
clear:function(){ 
}, 
count:function(){ 
}, 
debug:function(){ 
}, 
dir:function(){ 
}, 
dirxml:function(){ 
}, 
error:function(){ 
}, 
exception:function(){ 
}, 
group:function(name){ 
}, 
groupCollapsed:function(){ 
}, 
groupEnd:function(){ 
}, 
info:function(){ 
}, 
log:function(){ 
}, 
memoryProfile:function(){ 
}, 
memoryProfileEnd:function(){ 
}, 
profile:function(){ 
}, 
profileEnd:function(){ 
}, 
table:function(){ 
}, 
time:function(){ 
}, 
timeEnd:function(){ 
}, 
timeStamp:function(){ 
}, 
trace:function(){ 
}, 
warn:function(){ 
} 
};

第二步,实现 console.log方法。在所实现的几个方法中这个是最复杂的。

从firebug的API中我们可以看到,console.log不仅仅可以输出信息,还提供了类似 string.Format的功能,直接引用原文如下:

Here is the complete set of patterns that you may use for string substitution:

Pattern Type
 %s String
 %d, %i Integer (numeric formatting is not yet supported)
 %f Floating point number (numeric formatting is not yet supported)
 %o Object hyperlink
 %c Style formatting
其中的%c比较特殊,是给输出添加样式的,比如我们在firebug中这样写:
console.log('%cTest output', 'color:white; background-color:blue');

运行后的结果是这样的:

分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容

这里%c也可以跟 %s、%d等混用。

所以,在代码中我直接用replace进行替换,由于JS中的replace默认只替换第一个匹配项,这里刚好,代码如下:

var args=Array.prototype.slice.call(arguments); 
if(args.length>1){ 
var i=1,hasstyle=false; 
if(args[0].indexOf("%c")==0){ 
args[0]=args[0].replace(/%c/,""); 
i=2; 
hasstyle=true; 
} 
for(;i<args.length;i++){ 
if(/%s|%d|%i|%o/.test(args[0])){ 
args[0]=args[0].replace(/%s|%d|%i|%o/,args[i]); 
} 
else{ 
break; 
} 
} 
if(i<args.length){ 
args[0]=args[0]+" "+args.slice(i).join(" "); 
} 
if(hasstyle){ 
consoleHelper.showlog(args[0],args[1]); 
} 
else{ 
consoleHelper.showlog(args[0]); 
} 
} 
else if(args.length==1){ 
if(arguments[0] instanceof Array){ 
consoleHelper.showlog("["+args[0]+"]"); 
} 
else if(arguments[0] instanceof Function){ 
consoleHelper.showlog(args[0],null,"console_log_function"); 
} 
else{ 
consoleHelper.showlog(args[0]); 
} 
} 
else{ 
consoleHelper.showlog(""); 
}

由于console.log可以接受多个参数,且个数不确定,所以这里直接没有写形参。对于%c虽然firebug中写在中间也是有效的,这里为了简单直接只对写在开头的有效。代码中先把参数转换为数组,然后对数组进行分情况处理。

当参数个数大于1时,对后面的参数用replace进行替换,然后把剩下的参数连接(join)起来进行输出。

当参数个数为1时,还要分两种情况,一是数组,二是方法。对于数组,按firebug中的格式,在两端加中括号,对于函数,把字的颜色变为绿色

当参数个数为0时,直接输出空字符串

后面的consoleHelper.showlog是为了输出方便另外写的一个方法,在这个方法中把各种调试信息的结果显示在页面上的一个div(如果存在)中。

其他几个方法的思路跟这个差不多,只是样式不同,功能比这个简单,直接把参数连接起来输出即可。

整个console类代码如下:

console全部代码 var console={ 
assert:function(){ 
}, 
clear:function(){ 
}, 
count:function(){ 
}, 
debug:function(){ 
}, 
dir:function(){ 
}, 
dirxml:function(){ 
}, 
error:function(){ 
var args=Array.prototype.slice.call(arguments); 
consoleHelper.showerror(args.join(" ")); 
}, 
exception:function(){ 
}, 
group:function(name){ 
consoleHelper.showgroup(name); 
}, 
groupCollapsed:function(){ 
}, 
groupEnd:function(){ 
}, 
info:function(){ 
var args=Array.prototype.slice.call(arguments); 
if(args.length==1){ 
if(arguments[0] instanceof Array){ 
consoleHelper.showinfo("["+args[0]+"]"); 
} 
else if(arguments[0] instanceof Function){ 
consoleHelper.showinfo(args[0],"console_log_function"); 
} 
else{ 
consoleHelper.showinfo(args[0]); 
} 
} 
else{ 
consoleHelper.showinfo(args.join(" ")); 
} 
}, 
log:function(){ 
var args=Array.prototype.slice.call(arguments); 
if(args.length>1){ 
var i=1,hasstyle=false; 
if(args[0].indexOf("%c")==0){ 
args[0]=args[0].replace(/%c/,""); 
i=2; 
hasstyle=true; 
} 
for(;i<args.length;i++){ 
if(/%s|%d|%i|%o/.test(args[0])){ 
args[0]=args[0].replace(/%s|%d|%i|%o/,args[i]); 
} 
else{ 
break; 
} 
} 
if(i<args.length){ 
args[0]=args[0]+" "+args.slice(i).join(" "); 
} 
if(hasstyle){ 
consoleHelper.showlog(args[0],args[1]); 
} 
else{ 
consoleHelper.showlog(args[0]); 
} 
} 
else if(args.length==1){ 
if(arguments[0] instanceof Array){ 
consoleHelper.showlog("["+args[0]+"]"); 
} 
else if(arguments[0] instanceof Function){ 
consoleHelper.showlog(args[0],null,"console_log_function"); 
} 
else{ 
consoleHelper.showlog(args[0]); 
} 
} 
else{ 
consoleHelper.showlog(""); 
} 
}, 
memoryProfile:function(){ 
}, 
memoryProfileEnd:function(){ 
}, 
profile:function(){ 
}, 
profileEnd:function(){ 
}, 
table:function(){ 
}, 
time:function(){ 
}, 
timeEnd:function(){ 
}, 
timeStamp:function(){ 
}, 
trace:function(){ 
}, 
warn:function(){ 
var args=Array.prototype.slice.call(arguments); 
if(args.length==1){ 
if(arguments[0] instanceof Array){ 
consoleHelper.showwarn("["+args[0]+"]"); 
} 
else if(arguments[0] instanceof Function){ 
consoleHelper.showwarn(args[0],"console_log_function"); 
} 
else{ 
consoleHelper.showwarn(args[0]); 
} 
} 
else{ 
consoleHelper.showwarn(args.join(" ")); 
} 
} 
};

consoleHelper代码如下:
var consoleHelper={ 
showlog:function(val,style,cla){ 
if(cla){ 
cla="console_log "+cla; 
} 
else{ 
cla="console_log"; 
} 
this.show(val,style,cla); 
}, 
showinfo:function(val,cla){ 
if(cla){ 
cla="console_info "+cla; 
} 
else{ 
cla="console_info"; 
} 
this.show(val,null,cla); 
}, 
showwarn:function(val,cla){ 
if(cla){ 
cla="console_warn "+cla; 
} 
else{ 
cla="console_warn"; 
} 
this.show(val,null,cla); 
}, 
showerror:function(val){ 
this.show(val,null,"console_error"); 
}, 
showgroup:function(val){ 
if(!val){ 
val=""; 
} 
this.show(val+":",null,"console_group"); 
}, 
show:function(val,style,cla){ 
if(document.getElementById("showconsole")){ 
var div=document.createElement("div"); 
if(div.setAttribute){ 
if(style){ 
div.setAttribute("style",style); 
} 
} 
else{ 
if(style){ 
div=document.createElement("<div style="+style+">"); 
} 
} 
if(cla){ 
div.className=cla; 
} 
var oText=document.createTextNode(val); 
div.appendChild(oText); 
document.getElementById("showconsole").appendChild(div); 
} 
} 
};

注:如果想在页面中看到调试信息,直接在页面上添加一个id 为 showconsole 的隐藏的div即可。

样式(尽量跟FireBug保持一致):

.console_log{ 
border:1px solid #CCC; 
color:#333; 
padding:0px 5px; 
min-height:24px; 
line-height:24px; 
margin-bottom:-1px; 
} 
.console_info{ 
border:1px solid #CCC; 
color:#333; 
padding:0px 5px; 
min-height:24px; 
line-height:24px; 
margin-bottom:-1px; 
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAEEklEQVQ4jbWUW0wcZRTH/998szO7O8ByWa7WmBVKE1EpjUCt1hZsk1pCqsFL6mufauJDTQypTYHY2KbGmChp+mBsfDBtNFJDArWVWlAJsqxpKYGYsiJpKVso2y3sZXZnZ2aPDyNkl23Vl05ykvnO5Tdn/ufMMCLCo7iER0IFIP5Xgru2LS8ai9cRUQUAMMYCOYrjWvB6T/jf6tjDpHBubKkxnRVH3ZUNLU9W1+Q48koAAPHwXfw1PRUNzoz1czVwTPX3T/0v8MHD3ezL7356L++ZN05sbd5nKylQ4LAxKLIVj2pATCPcW1ExOtirhye+PXzg9Zc/PX3i3QxQhhQ9F37BmfM/Hyva+cGRF7c+hzKXgMqi7G4IDH5ZgbPlLduvhVWfnDn/cf6u7bVH2/a+9OCO5cqWfXL9oe937GxiJXkcjxdY/hc8QO1j1v3A8HX4qRYAsBgB5pdTGBq8TJrvs9e0mf7eVdbaVmxo2C+xsvqT1VuaWNzgcDmASMKyW4srGPV6Mer1YnLiKsIaENYAhwRwLqC6romxsvqTGxr2S1lSLN1b3iY9v3tTocKRNIG7EUAWAS4AE0EXZLHRGl5lI0JhIGEATglgAApzOGye3ZuWfvNuAzCUASZR2eMo3wzOATKBuWWrSOLAO9uBV5+18r745jK+XtllHWJWjkMS4CjfDE1U9mSBmdPtkR1OMALs67Y7lTZvMuJZcUaA7HCCOd2eLClWAZwDEsssFNO+TwbAYcuMm5T58Ewp1OCsFlcBUmCX1iWlgxlgXweOaYAWV0FqcHbVt1bCjNhFbWEcIdUqTDfOMzteHw+pgLYwDmbELmaBi4vyR/TZgRs3QwQi63VXLb1jgWXGiICbIYI+O3CjuCh/JAt8e+xckhZ87cv+KzQxb22DXbQskdAQCNxBIHAH4XB4zS9xYGIeWPZfIVrwtd8eO5fM0hgAzna397596PPjM/aCIyLfgh1VgI0DQ37Chd91qxO5CTk2QDeB4T+BmT+uQr92+qOz3e296Sze1dW1dnhq4xMIBBYHfZe+ioRUNM0aldwp21CUKyI/3wUl1wUm5WImCPw4GcctX4+evHqq/UBb0/H3D76ZMdCH/zar9j5tOis6eEXjK7bimhxHnhsAEA8HoS9NRc2A9weuBj6cGjg16fF4surZyMgIOjs7+fT0tBiJRKRkMimZpimlUikbEdnI5iogu7uOBLEcAFjKWGCJpXGmh0OMMV0QBF0QhKQkSUlFUZIej0fv6OgwRV3XoaoqDMNgpmkKRLRqHIBI2v0EtPs+BvB/ts0kwABjIoAUEaWISDBNUzAMg6mqyqLR6IOl6OvrY8PDw5ibm2OhUIipqopEIsEAwG63kyzLcLvdVFpaSs3NzWhtbc2C/A18nMDdJnOGEAAAAABJRU5ErkJggg==") no-repeat scroll 0 1px #EBF5FF; 
padding-left:30px; 
} 
.console_warn{ 
border:1px solid #CCC; 
color:#333; 
padding:0px 5px; 
min-height:24px; 
line-height:24px; 
margin-bottom:-1px; 
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAD/ElEQVQ4jbWUX2gcVRSHv3tndmaTTbJJSJNWaXVNCUVjFbEWlb4U9aEYjRYURHwqKIIvgqX0oZEi+CIqCBYUjVhE8aW0xAfxSQhpSaVqETWpDdhtbWvS/NvZ2dm5c+/xIUmTdlN86oUDw71zvnvu7xx+SkS4HUvfFirg3/Lk/Lcw9tp2l9lBE8ujzrBBaWK/iT+8UI+osPMHXpxKbpWu1pNCjnZtsXH6fm2xddAWd3iqow/d3I5YgyxegpnThHpqMiiq/Xpw/DjFvv8Huy86dtTn7PF6ftem4P7nULkmCAso7YEIklQQEbLyGeT8V66wITmsd75zWPe/IbcE2+HOu+vz2UlT3LMx2PYEKNAB5LY9gy50YzPDX99/wF1dnYgFO3cR+8sRCj3J6/6+hSNrwdebZ0+/rbI4+yjV/RuD3p34YUTYHhG2RmhtlyQCrF4gbI8IWiP89iJ667Mkc7yXfdp597pgd+bDHWkU7An6dhG2V8nlI7SLwEQgdjUjq6GyCE9HhMUq4ebN2KC32Rq7f31wJnspbtX5DQpNFbI1IW4NOAZTBVNFZVVyzTFBaTs2YTD9vDdY+e36uNlUHg96N6OJwdzU4pWKRcAmS5etNAkIu1upTbVsktpsCZi4AYx4PX5b01JFN6/lPZPW0GYeFq+CqYDS0HQH2m9BtxaRuNrdCFYkykVgwkZwMg1AdWGa5sppCL3Vs2oZOh5A6wznqDdIgbMTMjvRT2cJ1HKiOMiqpJdHubLQxJW/f2Nr3uMGJxCBhQmkNmsEf6oBLKK+swvX9nragBcCArYOOLzFYdpqn9EGtBVyDQ9yaYKrmfH8yz/ONFas88eyhdq7fmtzz2o9CvDwtjxNe74bcZbs3FG0tzolApi5CGc5onseXMWtfBTevDpvU4bS6XmcFcBbjd5XYPsB7H1vce4K1/dFPGwlwszXxlTxnm/WvuIGd/P7Bj4xEyceVurffbliEZVvQSnFzO8nuFw/ibMZTRoEjZgUV52nfq1eFpd7oeXVn+1aVoMJVYaf1HJp/HCuRQ4EbdpTuTx4wdJoIeAyxCTY2JAuMm5dsLd4cObizbqva5vTF/5EDz/2kO9lB3PNPOWFtC6bGzbFmhpnTaI+nsmVvgxeOpaWSqUGhhobG2NoaMibnJz0K5VKkKZpYK0NnHM5Eck9cqdqf/5e3d/RpLpqRuo//ePOfX1WLljBKKWM1tpordMgCNJCoZCWSiVz6NAh6xtjiOOYLMuUtVaLyEp4gH+qbOunyvbX5Y4pwAK+UkoAJyJORLS1VmdZpuI4VlEUrS/FyMiIGh0dpVwuq9nZWRXHMUmSKIB8Pi9hGNLV1SU9PT2ye/duBgYGGiD/AVNZApv23zD/AAAAAElFTkSuQmCC") no-repeat scroll 0 1px #FFFFC8; 
padding-left:30px; 
} 
.console_error{ 
border:1px solid #CCC; 
color:#FF0000; 
padding:0px 5px; 
min-height:24px; 
line-height:24px; 
margin-bottom:-1px; 
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAACYQAAAmEBwTBV+gAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAQHSURBVDiNtZVtbxRVFMd/596ZnS1L210otMB2t62gmKA2gVLtC5UgaGi0Eg2JfgY+AdAWWq0fgKJGE33ZqCQF5EFqCIoJ0RoTXpRATHjY0hYa2i6d7XZ2u7tzfbHttlgKiYn/5M5N7j33N+fMOfeMGGP4P2Q9yyCxSloUxBAioCKIyviW1R9/5N152jlZyeORkOwz6A5VVdWsa2uxamOAonB/hPzoCH4yOahE922acHsxJv9M8L2QbETbp/SmaNOqtv1Yz20BgeJD5ichf+c23oWzFMbHB4IZ82HVw4epFcET66R8Nu9cKdv9diNbnsefm6Ns46YSbCk4OzmF0gpz+xaZ3369ZgK6tfbm8NgCSy2+QixPVp8MNr/WmF+zlqnECNlwFVODg/gpF991i3PKJTV0HXdiisnbCfIVYZztOxoV1qmlHpfAo9Xhg1a8fm+hJorrptnyzbfE2ttRL71C8q9r+KkUJpVi5ubfeNqm4Xgvm7/6GncySWFdNToWbxp5+YV9y8DGtj+26hvw3WnKtr6ICgYBiB1pR2/fwaOh68zcukUmVM7mE58jWqMch+DWrRSmXaxYHB1wOh4DJ+pq6iUcaUIUAccmd+ki944dLYUV6zyKtfNVsmvWsfmLL0HrYqK7jpH/7RecUBkoBRWVzWMtO1tgvo4tJ7BftMafngbbYnWkEvfsGRKFAvGu7iK8qxt8vwgAhjs7mLv0MxWxKH46Db6PaI2xVAy4WrwglhM0+Rz5sVEktAoVClERqcQ908/dQoG6T3vm4ytC7x4+TG7gAhXRDZjZWUw2g8lmAUE5gUjJYyydFKVAFORy+G6qCMnlyD94AIVCKfxiQgwmmynaLZSiZYEojKhFsAScZNFAFY2UYnY6hX5zNw3He0ueLqiup4eEVqR+PEV5TTUoQUQWwJnFqrDVMHYAbBuxbdKpNNa+d2noPbEY/qFD3D18qASPd39CsO0DZianEMsGuziU2P2w5Obdf6Pld5Q0Z9Oz8NY71PV8VoIk2o+QPXcGEJzW94h3dy/udXTA1Ss4kTCIDNZ839/8WB2LY3dh20gwSObGDXzPm89+J9mfzlFRG6UiFiU7cJ7ho50A+J6Hd30IFQwiWiNK9ZV4S3vFg9Y9g4hqyqZm8Naup2zbNuYuXqA8uuGx7z8zeh979x68oSHK0i7BcCVgBqrHk61cvpxfBp5o27uxoALnjEjjnOdh8gWcSBj5V/IAMo+mUZZFYHUIkGvay71edfp0qcMta5sTbW3lBUefRMneZbQn608t+fer+k6PLV18cqPftcsar15zEOEjDDtXAP5hjHTVfHfy/JM2V/yDLGj8wIF6Uf5+IyYoRpIGPymih9f3/XD1aeeeCf6v+gfLYZXwkd5f2QAAAABJRU5ErkJggg==") no-repeat scroll 0 1px #FFEBEB; 
padding-left:30px; 
} 
.console_group{ 
margin-top:20px; 
font-size:16px; 
font-weight:bolder; 
} 
.console_log_function{ 
color:green; 
}

这里为了演示方便,三个小图标直接用的是base64格式的图片,就是上面代码中的三个长字符串,大家用时可以换成图片地址。
完整代码:
JSCode 
Login 
Result 
JavaScript 
HTML 
CSS 
ALL 
Edit 
Share 
DownLoad 
<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title>自定义console</title> 
<style type="text/css"> 
.console_log{ 
border:1px solid #CCC; 
color:#333; 
padding:0px 5px; 
min-height:24px; 
line-height:24px; 
margin-bottom:-1px; 
} 
.console_info{ 
border:1px solid #CCC; 
color:#333; 
padding:0px 5px; 
min-height:24px; 
line-height:24px; 
margin-bottom:-1px; 
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAEEklEQVQ4jbWUW0wcZRTH/998szO7O8ByWa7WmBVKE1EpjUCt1hZsk1pCqsFL6mufauJDTQypTYHY2KbGmChp+mBsfDBtNFJDArWVWlAJsqxpKYGYsiJpKVso2y3sZXZnZ2aPDyNkl23Vl05ykvnO5Tdn/ufMMCLCo7iER0IFIP5Xgru2LS8ai9cRUQUAMMYCOYrjWvB6T/jf6tjDpHBubKkxnRVH3ZUNLU9W1+Q48koAAPHwXfw1PRUNzoz1czVwTPX3T/0v8MHD3ezL7356L++ZN05sbd5nKylQ4LAxKLIVj2pATCPcW1ExOtirhye+PXzg9Zc/PX3i3QxQhhQ9F37BmfM/Hyva+cGRF7c+hzKXgMqi7G4IDH5ZgbPlLduvhVWfnDn/cf6u7bVH2/a+9OCO5cqWfXL9oe937GxiJXkcjxdY/hc8QO1j1v3A8HX4qRYAsBgB5pdTGBq8TJrvs9e0mf7eVdbaVmxo2C+xsvqT1VuaWNzgcDmASMKyW4srGPV6Mer1YnLiKsIaENYAhwRwLqC6romxsvqTGxr2S1lSLN1b3iY9v3tTocKRNIG7EUAWAS4AE0EXZLHRGl5lI0JhIGEATglgAApzOGye3ZuWfvNuAzCUASZR2eMo3wzOATKBuWWrSOLAO9uBV5+18r745jK+XtllHWJWjkMS4CjfDE1U9mSBmdPtkR1OMALs67Y7lTZvMuJZcUaA7HCCOd2eLClWAZwDEsssFNO+TwbAYcuMm5T58Ewp1OCsFlcBUmCX1iWlgxlgXweOaYAWV0FqcHbVt1bCjNhFbWEcIdUqTDfOMzteHw+pgLYwDmbELmaBi4vyR/TZgRs3QwQi63VXLb1jgWXGiICbIYI+O3CjuCh/JAt8e+xckhZ87cv+KzQxb22DXbQskdAQCNxBIHAH4XB4zS9xYGIeWPZfIVrwtd8eO5fM0hgAzna397596PPjM/aCIyLfgh1VgI0DQ37Chd91qxO5CTk2QDeB4T+BmT+uQr92+qOz3e296Sze1dW1dnhq4xMIBBYHfZe+ioRUNM0aldwp21CUKyI/3wUl1wUm5WImCPw4GcctX4+evHqq/UBb0/H3D76ZMdCH/zar9j5tOis6eEXjK7bimhxHnhsAEA8HoS9NRc2A9weuBj6cGjg16fF4surZyMgIOjs7+fT0tBiJRKRkMimZpimlUikbEdnI5iogu7uOBLEcAFjKWGCJpXGmh0OMMV0QBF0QhKQkSUlFUZIej0fv6OgwRV3XoaoqDMNgpmkKRLRqHIBI2v0EtPs+BvB/ts0kwABjIoAUEaWISDBNUzAMg6mqyqLR6IOl6OvrY8PDw5ibm2OhUIipqopEIsEAwG63kyzLcLvdVFpaSs3NzWhtbc2C/A18nMDdJnOGEAAAAABJRU5ErkJggg==") no-repeat scroll 0 1px #EBF5FF; 
padding-left:30px; 
} 
.console_warn{ 
border:1px solid #CCC; 
color:#333; 
padding:0px 5px; 
min-height:24px; 
line-height:24px; 
margin-bottom:-1px; 
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAD/ElEQVQ4jbWUX2gcVRSHv3tndmaTTbJJSJNWaXVNCUVjFbEWlb4U9aEYjRYURHwqKIIvgqX0oZEi+CIqCBYUjVhE8aW0xAfxSQhpSaVqETWpDdhtbWvS/NvZ2dm5c+/xIUmTdlN86oUDw71zvnvu7xx+SkS4HUvfFirg3/Lk/Lcw9tp2l9lBE8ujzrBBaWK/iT+8UI+osPMHXpxKbpWu1pNCjnZtsXH6fm2xddAWd3iqow/d3I5YgyxegpnThHpqMiiq/Xpw/DjFvv8Huy86dtTn7PF6ftem4P7nULkmCAso7YEIklQQEbLyGeT8V66wITmsd75zWPe/IbcE2+HOu+vz2UlT3LMx2PYEKNAB5LY9gy50YzPDX99/wF1dnYgFO3cR+8sRCj3J6/6+hSNrwdebZ0+/rbI4+yjV/RuD3p34YUTYHhG2RmhtlyQCrF4gbI8IWiP89iJ667Mkc7yXfdp597pgd+bDHWkU7An6dhG2V8nlI7SLwEQgdjUjq6GyCE9HhMUq4ebN2KC32Rq7f31wJnspbtX5DQpNFbI1IW4NOAZTBVNFZVVyzTFBaTs2YTD9vDdY+e36uNlUHg96N6OJwdzU4pWKRcAmS5etNAkIu1upTbVsktpsCZi4AYx4PX5b01JFN6/lPZPW0GYeFq+CqYDS0HQH2m9BtxaRuNrdCFYkykVgwkZwMg1AdWGa5sppCL3Vs2oZOh5A6wznqDdIgbMTMjvRT2cJ1HKiOMiqpJdHubLQxJW/f2Nr3uMGJxCBhQmkNmsEf6oBLKK+swvX9nragBcCArYOOLzFYdpqn9EGtBVyDQ9yaYKrmfH8yz/ONFas88eyhdq7fmtzz2o9CvDwtjxNe74bcZbs3FG0tzolApi5CGc5onseXMWtfBTevDpvU4bS6XmcFcBbjd5XYPsB7H1vce4K1/dFPGwlwszXxlTxnm/WvuIGd/P7Bj4xEyceVurffbliEZVvQSnFzO8nuFw/ibMZTRoEjZgUV52nfq1eFpd7oeXVn+1aVoMJVYaf1HJp/HCuRQ4EbdpTuTx4wdJoIeAyxCTY2JAuMm5dsLd4cObizbqva5vTF/5EDz/2kO9lB3PNPOWFtC6bGzbFmhpnTaI+nsmVvgxeOpaWSqUGhhobG2NoaMibnJz0K5VKkKZpYK0NnHM5Eck9cqdqf/5e3d/RpLpqRuo//ePOfX1WLljBKKWM1tpordMgCNJCoZCWSiVz6NAh6xtjiOOYLMuUtVaLyEp4gH+qbOunyvbX5Y4pwAK+UkoAJyJORLS1VmdZpuI4VlEUrS/FyMiIGh0dpVwuq9nZWRXHMUmSKIB8Pi9hGNLV1SU9PT2ye/duBgYGGiD/AVNZApv23zD/AAAAAElFTkSuQmCC") no-repeat scroll 0 1px #FFFFC8; 
padding-left:30px; 
} 
.console_error{ 
border:1px solid #CCC; 
color:#FF0000; 
padding:0px 5px; 
min-height:24px; 
line-height:24px; 
margin-bottom:-1px; 
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAACYQAAAmEBwTBV+gAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAQHSURBVDiNtZVtbxRVFMd/596ZnS1L210otMB2t62gmKA2gVLtC5UgaGi0Eg2JfgY+AdAWWq0fgKJGE33ZqCQF5EFqCIoJ0RoTXpRATHjY0hYa2i6d7XZ2u7tzfbHttlgKiYn/5M5N7j33N+fMOfeMGGP4P2Q9yyCxSloUxBAioCKIyviW1R9/5N152jlZyeORkOwz6A5VVdWsa2uxamOAonB/hPzoCH4yOahE922acHsxJv9M8L2QbETbp/SmaNOqtv1Yz20BgeJD5ichf+c23oWzFMbHB4IZ82HVw4epFcET66R8Nu9cKdv9diNbnsefm6Ns46YSbCk4OzmF0gpz+xaZ3369ZgK6tfbm8NgCSy2+QixPVp8MNr/WmF+zlqnECNlwFVODg/gpF991i3PKJTV0HXdiisnbCfIVYZztOxoV1qmlHpfAo9Xhg1a8fm+hJorrptnyzbfE2ttRL71C8q9r+KkUJpVi5ubfeNqm4Xgvm7/6GncySWFdNToWbxp5+YV9y8DGtj+26hvw3WnKtr6ICgYBiB1pR2/fwaOh68zcukUmVM7mE58jWqMch+DWrRSmXaxYHB1wOh4DJ+pq6iUcaUIUAccmd+ki944dLYUV6zyKtfNVsmvWsfmLL0HrYqK7jpH/7RecUBkoBRWVzWMtO1tgvo4tJ7BftMafngbbYnWkEvfsGRKFAvGu7iK8qxt8vwgAhjs7mLv0MxWxKH46Db6PaI2xVAy4WrwglhM0+Rz5sVEktAoVClERqcQ908/dQoG6T3vm4ytC7x4+TG7gAhXRDZjZWUw2g8lmAUE5gUjJYyydFKVAFORy+G6qCMnlyD94AIVCKfxiQgwmmynaLZSiZYEojKhFsAScZNFAFY2UYnY6hX5zNw3He0ueLqiup4eEVqR+PEV5TTUoQUQWwJnFqrDVMHYAbBuxbdKpNNa+d2noPbEY/qFD3D18qASPd39CsO0DZianEMsGuziU2P2w5Obdf6Pld5Q0Z9Oz8NY71PV8VoIk2o+QPXcGEJzW94h3dy/udXTA1Ss4kTCIDNZ839/8WB2LY3dh20gwSObGDXzPm89+J9mfzlFRG6UiFiU7cJ7ho50A+J6Hd30IFQwiWiNK9ZV4S3vFg9Y9g4hqyqZm8Naup2zbNuYuXqA8uuGx7z8zeh979x68oSHK0i7BcCVgBqrHk61cvpxfBp5o27uxoALnjEjjnOdh8gWcSBj5V/IAMo+mUZZFYHUIkGvay71edfp0qcMta5sTbW3lBUefRMneZbQn608t+fer+k6PLV18cqPftcsar15zEOEjDDtXAP5hjHTVfHfy/JM2V/yDLGj8wIF6Uf5+IyYoRpIGPymih9f3/XD1aeeeCf6v+gfLYZXwkd5f2QAAAABJRU5ErkJggg==") no-repeat scroll 0 1px #FFEBEB; 
padding-left:30px; 
} 
.console_group{ 
margin-top:20px; 
font-size:16px; 
font-weight:bolder; 
} 
.console_log_function{ 
color:green; 
} 
</style> 
<script type="text/javascript"> 
var console={ 
assert:function(){ 
}, 
clear:function(){ 
}, 
count:function(){ 
}, 
debug:function(){ 
}, 
dir:function(){ 
}, 
dirxml:function(){ 
}, 
error:function(){ 
var args=Array.prototype.slice.call(arguments); 
consoleHelper.showerror(args.join(" ")); 
}, 
exception:function(){ 
}, 
group:function(name){ 
consoleHelper.showgroup(name); 
}, 
groupCollapsed:function(){ 
}, 
groupEnd:function(){ 
}, 
info:function(){ 
var args=Array.prototype.slice.call(arguments); 
if(args.length==1){ 
if(arguments[0] instanceof Array){ 
consoleHelper.showinfo("["+args[0]+"]"); 
} 
else if(arguments[0] instanceof Function){ 
consoleHelper.showinfo(args[0],"console_log_function"); 
} 
else{ 
consoleHelper.showinfo(args[0]); 
} 
} 
else{ 
consoleHelper.showinfo(args.join(" ")); 
} 
}, 
log:function(){ 
var args=Array.prototype.slice.call(arguments); 
if(args.length>1){ 
var i=1,hasstyle=false; 
if(args[0].indexOf("%c")==0){ 
args[0]=args[0].replace(/%c/,""); 
i=2; 
hasstyle=true; 
} 
for(;i<args.length;i++){ 
if(/%s|%d|%i|%o/.test(args[0])) { 
args[0]=args[0].replace(/%s|%d|%i|%o/,args[i]); 
} 
else{ 
break; 
} 
} 
if(i<args.length){ 
args[0]=args[0]+" "+args.slice(i).join(" "); 
} 
if(hasstyle){ 
consoleHelper.showlog(args[0],args[1]); 
} 
else{ 
consoleHelper.showlog(args[0]); 
} 
} 
else if(args.length==1){ 
if(arguments[0] instanceof Array){ 
consoleHelper.showlog("["+args[0]+"]"); 
} 
else if(arguments[0] instanceof Function){ 
consoleHelper.showlog(args[0],null,"console_log_function"); 
} 
else{ 
consoleHelper.showlog(args[0]); 
} 
} 
else{ 
consoleHelper.showlog(""); 
} 
}, 
memoryProfile:function(){ 
}, 
memoryProfileEnd:function(){ 
}, 
profile:function(){ 
}, 
profileEnd:function(){ 
}, 
table:function(){ 
}, 
time:function(){ 
}, 
timeEnd:function(){ 
}, 
timeStamp:function(){ 
}, 
trace:function(){ 
}, 
warn:function(){ 
var args=Array.prototype.slice.call(arguments); 
if(args.length==1){ 
if(arguments[0] instanceof Array){ 
consoleHelper.showwarn("["+args[0]+"]"); 
} 
else if(arguments[0] instanceof Function){ 
consoleHelper.showwarn(args[0],"console_log_function"); 
} 
else{ 
consoleHelper.showwarn(args[0]); 
} 
} 
else{ 
consoleHelper.showwarn(args.join(" ")); 
} 
} 
}; 
var consoleHelper={ 
showlog:function(val,style,cla){ 
if(cla){ 
cla="console_log "+cla; 
} 
else{ 
cla="console_log"; 
} 
this.show(val,style,cla); 
}, 
showinfo:function(val,cla){ 
if(cla){ 
cla="console_info "+cla; 
} 
else{ 
cla="console_info"; 
} 
this.show(val,null,cla); 
}, 
showwarn:function(val,cla){ 
if(cla){ 
cla="console_warn "+cla; 
} 
else{ 
cla="console_warn"; 
} 
this.show(val,null,cla); 
}, 
showerror:function(val){ 
this.show(val,null,"console_error"); 
}, 
showgroup:function(val){ 
if(!val){ 
val=""; 
} 
this.show(val+":",null,"console_group"); 
}, 
show:function(val,style,cla){ 
if(document.getElementById("showconsole")){ 
var div=document.createElement("div"); 
if(div.setAttribute){ 
if(style){ 
div.setAttribute("style",style); 
} 
} 
else{ 
if(style){ 
div=document.createElement("<div style="+style+">"); 
} 
} 
if(cla){ 
div.className=cla; 
} 
var oText=document.createTextNode(val); 
div.appendChild(oText); 
document.getElementById("showconsole").appendChild(div); 
} 
} 
}; 
window.onload=function(){ 
console.group("log"); 
console.log('%c a %s This is red text on a green background','color:red; background-color:#EEE'); 
console.log("The %%s jumped over %d tall buildings",1, "abc",1); 
console.log("I am %s and I have:", "abc", "bcd","cde"); 
console.log("abc",1); 
console.log([1,2,3,4,5]); 
console.log(); 
console.log(test); 
console.group("info"); 
console.info('%c a %s This is red text on a green background','color:red; background-color:#EEE'); 
console.info("The %%s jumped over %d tall buildings",1, "abc",1); 
console.info("I am %s and I have:", "abc", "bcd","cde"); 
console.info("abc",1); 
console.info([1,2,3,4,5]); 
console.info(); 
console.info(test); 
console.group("warn"); 
console.warn('%c a %s This is red text on a green background','color:red; background-color:#EEE'); 
console.warn("The %%s jumped over %d tall buildings",1, "abc",1); 
console.warn("I am %s and I have:", "abc", "bcd","cde"); 
console.warn("abc",1); 
console.warn([1,2,3,4,5]); 
console.warn(); 
console.warn(test); 
console.group("error"); 
console.error('%c a %s This is red text on a green background','color:red; background-color:#EEE'); 
console.error("The %%s jumped over %d tall buildings",1, "abc",1); 
console.error("I am %s and I have:", "abc", "bcd","cde"); 
console.error("abc",1); 
console.error([1,2,3,4,5]); 
console.error(test); 
} 
function test(){ 
alert("abc"); 
alert("abc"); 
alert("abc"); 
alert("abc"); 
alert("abc"); 
alert("abc"); 
alert("abc"); 
alert("abc");alert("abc"); 
} 
</script> 
</head> 
<body> 
<h1>自定义console(Artwl.cnblogs.com)</h1> 
<div id="showconsole"></div> 
</body> 
</html>

小结

写这个JS一方面是工作中有这方面的需求,另外也是因为在博问中看到有人问 JavaScript中如何获得console.log的值? ,前段时间有个国外学编程网站可以把console.log的结果直接显示在页面上,不知道是不是用了本文类似的方案。

欢迎大家留言讨论。
作者:Artwl

Javascript 相关文章推荐
javascript数字数组去重复项的实现代码
Dec 30 Javascript
克隆javascript对象的三个方法小结
Jan 12 Javascript
jquery利用event.which方法获取键盘输入值的代码
Oct 09 Javascript
js中的json对象详细介绍
Oct 29 Javascript
用队列模拟jquery的动画算法实例
Jan 20 Javascript
js实现右下角提示框的方法
Feb 03 Javascript
JS命令模式例子之菜单程序
Oct 10 Javascript
JS模拟超市简易收银台小程序代码解析
Aug 18 Javascript
微信小程序上传图片功能(附后端代码)
Jun 19 Javascript
详解Nuxt.js部署及踩过的坑
Aug 07 Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
Aug 23 Javascript
Vue router安装及使用方法解析
Dec 02 Vue.js
浏览器解析js生成的html出现样式问题的解决方法
Apr 16 #Javascript
基于jquery的不规则矩形的排列实现代码
Apr 16 #Javascript
JavaScript打开word文档的实现代码(c#)
Apr 16 #Javascript
jQuery UI Autocomplete 1.8.16 中文输入修正代码
Apr 16 #Javascript
Moment.js 不容错过的超棒Javascript日期处理类库
Apr 15 #Javascript
5个最佳的Javascript日期处理类库分享
Apr 15 #Javascript
你需要知道的10个最佳javascript开发实践小结
Apr 15 #Javascript
You might like
php数据库密码的找回的步骤
2011/01/12 PHP
PHP获取搜索引擎关键字来源的函数(支持百度和谷歌等搜索引擎)
2012/10/03 PHP
php实现网站留言板功能
2015/11/04 PHP
PHP开发之用微信远程遥控服务器
2018/01/25 PHP
js单例模式详解实例
2013/11/21 Javascript
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
2014/09/06 Javascript
NodeJS中利用Promise来封装异步函数
2015/02/25 NodeJs
在JavaScript中操作数组之map()方法的使用
2015/06/09 Javascript
JavaScript String 对象常用方法总结
2016/04/28 Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
2016/07/04 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
2016/08/08 Javascript
Bootstrap面板学习使用
2017/02/09 Javascript
JS组件系列之JS组件封装过程详解
2017/04/28 Javascript
jquery网页加载进度条的实现
2017/06/01 jQuery
AngularJS学习笔记之表单验证功能实例详解
2017/07/06 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
2018/01/17 Javascript
vue下拉列表功能实例代码
2018/04/08 Javascript
javascript中关于类型判断的一些疑惑小结
2018/10/14 Javascript
学习使用ExpressJS 4.0中的新Router的用法
2018/11/06 Javascript
JavaScript实现轮播图效果代码实例
2019/09/28 Javascript
JS中箭头函数与this的写法和理解
2021/01/14 Javascript
[01:15:18]2014 DOTA2国际邀请赛中国区预选赛 LGD VS Speed Gaming.cn
2014/05/22 DOTA
Python程序中的观察者模式结构编写示例
2016/05/27 Python
Sanic框架应用部署方法详解
2018/07/18 Python
Flask和Django框架中自定义模型类的表名、父类相关问题分析
2018/07/19 Python
Python日期时间Time模块实例详解
2019/04/15 Python
Python使用sqlite3模块内置数据库
2020/05/07 Python
使用PDF.JS插件在HTML中预览PDF文件的方法
2018/08/29 HTML / CSS
Omio西班牙:全欧洲低价大巴、火车和航班搜索和比价
2017/02/11 全球购物
Sql面试题
2013/03/20 面试题
工厂门卫岗位职责
2013/11/25 职场文书
校园文明倡议书
2014/05/16 职场文书
项目委托协议书(最新)
2014/09/13 职场文书
社区植树节活动总结
2015/02/06 职场文书
恋恋笔记本观后感
2015/06/16 职场文书
Log4j.properties配置及其使用
2021/08/02 Java/Android