分享一个自定义的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 相关文章推荐
Jquery作者John Resig自己封装的javascript 常用函数
Nov 09 Javascript
JavaScript replace(rgExp,fn)正则替换的用法
Mar 04 Javascript
JavaScript拆分字符串时产生空字符的解决方案
Sep 26 Javascript
JS实现让网页背景图片斜向移动的方法
Feb 25 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
Sep 14 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
Jul 04 Javascript
jquery点击展示与隐藏更多内容
Dec 03 Javascript
jQuery中 bind的用法简单介绍
Feb 13 Javascript
关于vue-cli 3配置打包优化要点(推荐)
Apr 22 Javascript
微信小程序云开发之模拟后台增删改查
May 16 Javascript
Vue数字输入框组件示例代码详解
Jan 15 Javascript
Java Varargs 可变参数用法详解
Jan 28 Javascript
浏览器解析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或asp创建网页桌面快捷方式的代码
2010/03/23 PHP
解析在apache里面给php写虚拟目录的详细方法
2013/06/24 PHP
yii2.0实现创建简单widgets示例
2016/07/18 PHP
javascript 网页跳转的方法
2008/12/24 Javascript
轻轻松松学JS调试(不下载任何工具)
2010/04/14 Javascript
轻量级 JS ToolTip提示效果
2010/07/20 Javascript
js点击更换背景颜色或图片的实例代码
2013/06/25 Javascript
JS的document.all函数使用示例
2013/12/30 Javascript
JavaScript实现LI列表数据绑定的方法
2015/08/04 Javascript
javascript判断复选框是否选中的方法
2015/10/16 Javascript
JS根据生日月份和日期计算星座的简单实现方法
2016/11/24 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
2017/03/09 Javascript
VUE2实现事件驱动弹窗示例
2017/10/21 Javascript
vue+element UI实现树形表格带复选框的示例代码
2019/04/16 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
2019/05/28 jQuery
JavaScript 声明私有变量的两种方式
2021/02/05 Javascript
[01:00:14]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第二场 2月28日
2021/03/11 DOTA
Python异常学习笔记
2015/02/03 Python
Windows系统下安装Python的SSH模块教程
2015/02/05 Python
怎样使用Python脚本日志功能
2016/08/14 Python
使用python生成杨辉三角形的示例代码
2018/08/29 Python
Python多线程编程之多线程加锁操作示例
2018/09/06 Python
对python中的iter()函数与next()函数详解
2018/10/18 Python
python 使用pandas计算累积求和的方法
2019/02/08 Python
python实现诗歌游戏(类继承)
2019/02/26 Python
python实现微信自动回复机器人功能
2019/07/11 Python
对tensorflow中cifar-10文档的Read操作详解
2020/02/10 Python
Python字典dict常用方法函数实例
2020/11/09 Python
python中pickle模块浅析
2020/12/29 Python
Coccinelle官网:意大利的著名皮具品牌
2019/05/15 全球购物
char型变量中能不能存贮一个中文汉字
2015/07/08 面试题
工厂保洁员岗位职责
2013/12/04 职场文书
房地产项目建议书
2014/03/12 职场文书
大学生标准自荐书
2014/06/15 职场文书
2014年小学数学教师工作总结
2014/12/03 职场文书
vue实现无缝轮播效果(跑马灯)
2021/05/14 Vue.js