javascript
分享一个自定义的 console 类,让你不再纠结JS中的调试代码的兼容
問題的產(chǎn)生
在寫JS的過程中,為了調(diào)試我們常常會寫很多 console.log、console.info、console.group、console.warn、console.error代碼來查看JS的運行情況,但發(fā)布時又因為IE不支持console,又要去掉這些代碼,一不小心就會出錯。
本文分享自己昨晚寫的一個console類來試圖解決這一問題。當(dāng)然,更好的做法是把測試代碼分開寫,那樣就不會有這個問題。
解決思路
如何解決IE下不兼容的問題呢,那就是我們自己定義一個console類來覆蓋瀏覽器提供的console功能,這樣只要在頁面中引用此JS文件就可以了。
另外,此類還提供了查看輸出的調(diào)試信息功能,console 定義了哪些功能呢,我們可以在這里看到:http://getfirebug.com/wiki/index.php/Console_API,我們可以看到這里提供了很多方法,我們常用的有?console.log、console.info、console.group、console.warn、console.error、console.profile、console.time,最后兩個是分析代碼性能的,比較復(fù)雜,本文沒有實現(xiàn)。
代碼解析
第一步,當(dāng)然是搭一個結(jié)構(gòu),覆蓋瀏覽器(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(){ } };第二步,實現(xiàn) console.log方法。在所實現(xiàn)的幾個方法中這個是最復(fù)雜的。
從firebug的API中我們可以看到,console.log不僅僅可以輸出信息,還提供了類似 string.Format的功能,直接引用原文如下:
Here is the complete set of patterns that you may use for string substitution:
| ?%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');運行后的結(jié)果是這樣的:
這里%c也可以跟 %s、%d等混用。
所以,在代碼中我直接用replace進(jìn)行替換,由于JS中的replace默認(rèn)只替換第一個匹配項,這里剛好,代碼如下:
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可以接受多個參數(shù),且個數(shù)不確定,所以這里直接沒有寫形參。對于%c雖然firebug中寫在中間也是有效的,這里為了簡單直接只對寫在開頭的有效。代碼中先把參數(shù)轉(zhuǎn)換為數(shù)組,然后對數(shù)組進(jìn)行分情況處理。
當(dāng)參數(shù)個數(shù)大于1時,對后面的參數(shù)用replace進(jìn)行替換,然后把剩下的參數(shù)連接(join)起來進(jìn)行輸出。
當(dāng)參數(shù)個數(shù)為1時,還要分兩種情況,一是數(shù)組,二是方法。對于數(shù)組,按firebug中的格式,在兩端加中括號,對于函數(shù),把字的顏色變?yōu)榫G色
當(dāng)參數(shù)個數(shù)為0時,直接輸出空字符串
后面的consoleHelper.showlog是為了輸出方便另外寫的一個方法,在這個方法中把各種調(diào)試信息的結(jié)果顯示在頁面上的一個div(如果存在)中。
其他幾個方法的思路跟這個差不多,只是樣式不同,功能比這個簡單,直接把參數(shù)連接起來輸出即可。
整個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);} } };注:如果想在頁面中看到調(diào)試信息,直接在頁面上添加一個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; }這里為了演示方便,三個小圖標(biāo)直接用的是base64格式的圖片,就是上面代碼中的三個長字符串,大家用時可以換成圖片地址。
小結(jié)
寫這個JS一方面是工作中有這方面的需求,另外也是因為在博問中看到有人問?JavaScript中如何獲得console.log的值??,前段時間有個國外學(xué)編程網(wǎng)站可以把console.log的結(jié)果直接顯示在頁面上,不知道是不是用了本文類似的方案。
歡迎大家留言討論。
總結(jié)
以上是生活随笔為你收集整理的分享一个自定义的 console 类,让你不再纠结JS中的调试代码的兼容的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 梦到两道彩虹是什么意思啊
- 下一篇: 备孕梦到龙虾是胎梦吗