JS_javascript 기술에서 디버깅 코드의 호환성에 대해 더 이상 걱정할 필요가 없도록 사용자 정의 콘솔 클래스를 공유합니다.
- WBOY원래의
- 2016-05-16 17:54:122111검색
问题的产生
在写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的功能，直接引用原文如下：
%c는 특별하며 출력에 스타일을 추가합니다. 예를 들어, Firebug에서는 다음과 같이 작성합니다.
console.log('%cTest output', 'color:white; background-color:blue')
실행 후 결과는 다음과 같습니다. 다음은:
var args=Array.prototype.slice.call(arguments)
if(args. 길이>1){
var i=1,hasstyle=false;
if(args[0].indexOf("%c")==0){
args[0]=args[0 ].replace(/% c/,"");
i=2;
hasstyle=true
}
for(;iif (/%s|% d|%i|%o/.test(args[0])){
args[0]=args[0].replace(/%s|%d|%i|% o/,args[i ])
}
else{
break
}
}
if(iargs[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] 인스턴스 오브 배열) {
consoleHelper.showlog("[" args[0] "]")
}
else if(arguments[0] 인스턴스 오브 함수){
consoleHelper.showlog (args[0], null,"console_log_function");
}
else{
consoleHelper.showlog(args[0])
}
}
else{
consoleHelper.showlog(" ");
}
console.log는 여러 매개변수를 허용하고 숫자가 불확실하므로 여기에는 공식적인 매개변수가 기록되지 않습니다. %c의 경우 Firebug에서는 중간에 작성해도 유효하지만 여기서는 단순성과 직접성을 위해 처음에 작성해야 유효합니다. 코드에서 매개변수는 먼저 배열로 변환된 다음 배열이 사례별로 처리됩니다.
매개변수 개수가 1개보다 큰 경우, 다음 매개변수를 교체로 바꾸고, 나머지 매개변수를 합쳐서 출력합니다.
매개변수 개수가 1개인 경우 두 가지 상황이 있는데 하나는 배열이고 다른 하나는 메서드입니다. 배열의 경우 Firebug 형식을 따르고 양쪽 끝에 대괄호를 추가합니다. 함수의 경우 단어 색상을 녹색으로 변경합니다
매개변수 개수가 0인 경우 빈 문자열을 직접 출력합니다
다음 consoleHelper.showlog는 출력의 편의를 위해 작성된 메소드입니다. 이 메소드에서는 다양한 디버깅 정보의 결과가 페이지의 div(존재하는 경우)에 표시됩니다.
다른 여러 메소드의 아이디어는 이것과 유사하지만 스타일이 다르고 이보다 기능이 더 간단합니다. 매개변수를 연결하고 직접 출력하면 됩니다.
전체 콘솔 클래스 코드는 다음과 같습니다.
console전체부대码
var console={
assert:function(){
},
clear:function(){
},
개수:함수(){
},
디버그:함수(){
},
dir:함수(){
},
dirxml:함수(){
},
error:function(){
var args=Array.prototype.slice.call(arguments);
consoleHelper.showerror(args.join(" "));
},
예외:함수(){
},
그룹:함수(이름){
consoleHelper.showgroup(이름);
},
groupCollapsed:function(){
},
groupEnd:function(){
},
info:function(){
var args=Array. 프로토타입.slice.call(인수);
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/,"");
나는=2;
hasstyle=true;
}
for(;iif(/%s|%d|%i|%o/.test(args[0])){
args[0]=args[0].replace(/%s|%d|%i|%o/,args[i]);
}
else{
break;
}
}
if(iargs[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] 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(인수);
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("
注：如果想在页面中看到调试信息，直接在页面上添加一个id 为 showconsole 的隐藏的div即可。
样式(尽weight跟FireBug保持一致)：
.console_log{
border:1px solid #CCC;
색상:#333;
패딩:0px 5px;
최소 높이:24px;
줄 높이:24px;
여백-하단:-1px;
}
.console_info{
border:1px solid #CCC;
색상:#333;
패딩:0px 5px;
최소 높이:24px;
줄 높이:24px;
여백-하단:-1px;
배경: url("데이터:이미지/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAEEklEQVQ4jbWUW0wcZRTH/998szO7O8ByWa7WmBVKE1EpjUCt1hZsk1pCqsFL6mufauJDTQypTYHY2KbGm Chp mBsfDBtNFJDArWVWlAJsqxpKYGYsiJpKVso2y3sZXZnZ2aPDyNkl23Vl05ykvnO5Tdn/ufMMCLCo7iER0IFIP5Xgru2LS8ai9cRUQUAMMYCOYrjWvB6T/jf6tjDpHBubKkxnRVH3ZUNLU9W1 48koAAPHwXfw1PRUNzoz1czVwTPX3T/0v8MHD3ezL7356L ZN05sbd5nKylQ4LAxKLIVj2pATCPcW1ExOtirhye PXzg9Zc/PX3i3QxQhhQ9F37BmfM/Hyva cGRF7c hzKXgMqi7G4IDH5ZgbPlLduvhV WfnDn/cf6u7bVH2/a 9OCO5cqWfXL9oe937GxiJXkcjxdY/hc8QO1j1v3A8HX4qRYAsBgB5pdTGBq8TJrvs9e0mf7eVdbaVmxo2C xsvqT1VuaWNzgcDmASMKyW4srGPV6Mer1YnLiKsI aENYAhwRwLqC6romxsvqTGxr2S1lSLN1b3iY9v3tTocKRNIG7EUAWAS4AE0EXZLHRGl5lI0JhIGEATglgAApzOGye3ZuWfvNuAzCUASZR2eMo3wzOATKBuWWrSOLAO9uBV5 18r745jK XtllHWJWjkMS4Cjf DE1U9mSBmdPtkR1OMALs67Y7lTZvMuJZcUaA7HCCOd2eLClWAZwDesssFNO TwbAYcuMm5T58Ewp1OCsFlcBUmCX1iWlgxlgXweOaYAWV0FqcHbVt1bCjNhFbWEcIdUqTDfOMzteHw pgLYwDmbELmaBi4 vyR/TZgRs3QwQi63VXLb1jgWXGiICbIYI O3CjuCh /JAt8e xckhZ87cv KzQxb22DXbQskdAQCNxBIHAH4XB4zS9xYGIeWPZfIVrwtd8eO5fM0hgAzna397596PPjM/aCIyLfgh1VgI0DQ37Chd91qxO5CTk2QDeB4T BmT uQr92 qOz3e296Sze 1dW1dnhq4xMIBBYHfZe ioRUNM0aldwp21CUKyI/3wUl1wUm5WImCPw4GcctX4 evHqq/UBb0/H3D76ZMdCH/zar9j5tOis6eEXjK7bimhxHnhsAEA8HoS9NRc2A9weuBj6cGjg16fF4surZyMgIO js7 ft0tBiJRKRkMimZpimlUikbEdnI5iogu7uOBLEcAFjKWGCJpXGmh0OMMV0QBF0QhKQkSUlFUZIej0fv6OgwRV3XoaoqDMNgpmkKRLRqHIBI2v0EtPs BvB/ts0kwABjIoAUEaWISDBNUzAMg6mqyqLR6 IOl6OvrY8PDw5ibm2OhUIipqopEIsEAwG63kyzLcLvdVFpaSs3NzWhtbc2C/A18nMDdJnOGEAAAAABJRU5ErkJggg==") 반복 없음 스크롤 0 1px #EBF5FF;
왼쪽 여백:30px;
}
.console_warn{
border:1px solid #CCC;
색상:#333;
패딩:0px 5px;
최소 높이:24px;
줄 높이:24px;
여백-하단:-1px;
배경: url("데이터:이미지/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAD/ElEQVQ4jbWUX2gcVRSHv3tndmaTTbJJSJNWaXVNCUVjFbEWlb4U9aEYjRYURHwqKIIvgqX0oZEi CIqCBYUjVhE8 aW0xAfxSQhpSaVqETWpDdhtbWvS/NvZ2dm5c /xIUmTdlN86oUDw71zvnvu7xx SkS4HUvfFirg3/Lk/Lcw9tp2l9lBE8ujzrBBaWK/iT 8UI osPMHXpxKbpWu1pNCjnZtsXH6fm2xddAWd3i qow/d3I5YgyxegpnThHpqMiiq/Xpw/DjFvv8Huy86dtTn7PF6ftem4P7nULkmCAso7YEIklQQEbLyGeT8V66wITmsd75zWPe/IbcE2 HOu vz2UlT3LMx2PYEKNAB5LY9gy50YzPDX99/wF1dnYgFO3c R 8sRCj3J6/6 hSNrwdebZ0 / rbI4 yjV/RuD3p34YUTYHhG2RmhtlyQCrF4gbI8IWiP89iJ667Mkc7yXfdp597pgd bDHWkU7An6dhG2V8nlI7SLwEQgdjUjq6GyCE9HhMUq4ebN2KC32Rq7f31wJnspbtX5DQpNFbI1 IW4NOAZTBVNFZVVyzTFBaTs2YTD9vDdY e36uNlUHg96N6OJwdzU4pWKRcAmS5etNAkIu1upTbVsktpsCZi4AYx4PX5b01JFN6/lPZPW0GYeFq CqYDS0HQH2m9BtxaRuNrdCFYkykVgwkZwMg 1AdWGa5sppCL3Vs2oZOh5A6wznqDdIgbMTMjvRT2cJ1HKiOMiqpJdHubLQxJW/f2Nr3uMGJxCBhQmkNmsEf6oBLKKswvX9nragBcCArYOOLzFYdpqn9EGtBVyDQ9yaYKrmfH8yz/ONFas88eyhdq7fm tzz2o9CvDwtjxNe74bcZbs3FG0tzolApi5CGc5onseXMWtfBTevDpvU4bS6XmcFcBbjd5XYPsB7 H1vce4K1/dFPGwlwszXxlTxnm/WvuIGd/P7Bj4xEyceVurffbliEZVvQSnFzO8nuFw/ibMZTRoEj ZgUV52nfq1eFpd7oeXVn 1aVoMJVYaf1HJp/HCuRQ4EbdpTuTx4wdJoIeAyxCTY2JAuMm5dsLd4cObizbqva5vTF/5EDz/2kO9lB3PNPOWFtC6bGzbFmhpnTaI nsmVvgxeOpaWSqUGhhobG2 NoaMibnJz0K5VKkKZpYK0NnHM5Eck9cqdqf/5e3d/RpLpqRuo//ePOfX1WLljBKKWM1tpordMgCNJCoZCWSiVz6NAh6xtjiOOYLMuUtVaLyEp4gH qbOunyvbX5Y4pwAK UkoAJyJORLS1VmdZpuI4 VlEUrs/FyMiIGh0dpVwuq9nZWRXHMUmSKIB8Pi9hGNLV1SU9PT2ye/duBgYGGiD/AVNZApv23zD/AAAAAElFTkSuQmCC") 아니요 -반복 스크롤 0 1px #FFFFC8;
왼쪽 여백:30px;
}
.console_error{
테두리:1px 솔리드 #CCC;
색상:#FF0000;
패딩:0px 5px;
최소 높이:24px;
줄 높이:24px;
여백-하단:-1px;
배경: url("데이터:이미지/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAACYQAAAmEBwTBV gAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuP BoAAAQHSURBVDiNtZVtbxRVFMd/596ZnS1L210otMB2t62gmKA2gVLtC5UgaGi0Eg2JfgY AdAWWq0fgKJGE33ZqCQF5EFqCIoJ0RoTXpRATHjY0hYa2i6d7XZ2u7tzfbHttlgKiYn/5M5N7j3 3N fMOfeMGGP4P2Q9yyCxSloUxBAioCKIyviW1R9/5N152jlZyeORkOwz6A5VVdWsa2uxamOAonB/hPzoCH4yOahE922acHsxJv9M8L2QbETbp/SmaNOqtv1Yz20BgeJD5ichf c23oWzFMbHB4IZ82HVw 4epFcET66R8Nu9cKdv9diNbnsefm6Ns46YSbCk4OzmF0gpz xaZ3369ZgK6tfbm8NgCSy2 QixPVp8MNr/WmF zlqnECNlwFVODg/gpF991i3PKJTV0HXdiisnbCfIVYZztOxoV1qmlHpfAo 9Xhg1a8fm hJorrptnyzbfE2ttRL71C8q9r KkUJpVi5ubfeNqm4Xgvm7/6GncySWFdNToWbxp5 YV9y8DGtj 26hvw3WnKtr6ICgYBiB1pR2/fwaOh68zcukUmVM7mE58jWqMch DWrRSmXaxYHB1 wOh4DJ pq6iUcaUIUAccmd ki944dLYUV6zyKtfNVsmvWsfmLL0HrYqK7jpH/ 7RecUBkoBRWVzWMtO1tgvo4tJ7BftMafngbbYnWkEvfsGRKFAvGu7iK8qxt8vwgAhjs7mLv0MxWxKH46Db6PaI2xVAy4WrwglhM0 Rz5sVEktAoVClERqcQ908/dQoG6T3vm4ytC7x4 AhXRDZjZWUw2g8lmAUE5gUjJYyydFKVAFORy G6qCMnlyD94AIVCKfxiQgwmmynaLZSiZYEojKhFsAScZNFAFY2UYnY6hX5zNw3He0ueLqiup4eEVqR PEV5TTUoQUQWwJnFqrDVMHYAbBuxbdKpNNa d 2noPbEY/qFD3D18qASPd39CsO0DZianEMsGuziU2P2w5Obdf6Pld5Q0Z9Oz8NY71PV8VoIk2o QPXcGEJzW94h3dy/udXTA1Ss4kTCIDNZ839/8WB2LY3dh20gwSObGDXzPm89 J9mfzlFRG6UiFiU7 CJ7ho50A J6Hd30IFQwiWiNK9ZV4S3vFg9Y9g4hqyqZm8Naup2zbNuYuXqA8uuGx7z8zeh979x68oSHK0i7BcCVgBqrHk61cvpxfBp5o27uxoALnjEjjnOdh8gWcSBj5V/IAMo mUZZFY HUIkGvay71edfp0qcMta5sTbW3lBUefRMneZbQn608t k6PLV18cqPftcsar15zEOEjDDtXAP5hjHTVfHfy/JM2V/yDLGj8wIF6Uf5 IyYoRpIGPymih9f3/XD1aeeeCf6v gfLYZXwkd5f2QAAAABJ RU5ErkJggg==") 반복 없음 스크롤 0 1px #FFEBEB;
왼쪽 여백:30px;
}
.console_group{
margin-top:20px;
글꼴 크기:16px;
글꼴 두께:굵게;
}
.console_log_function{
color:green;
}
这里为了演示方便, 三个小图标直接接用 是base64格式的图picture, 就是上面 代码中的 3个长字符串, 大家 时可以换成图 Images地址。
完整代码：
JSCode
로그인
결과
JavaScript
HTML
CSS
전체
편집
공유
DownLoad
<머리>
자정 콘솔
<본문>
在写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 |
코드 복사 코드는 다음과 같습니다.
console.log('%cTest output', 'color:white; background-color:blue')
실행 후 결과는 다음과 같습니다. 다음은:
여기서 %c는 %s, %d 등과 혼합될 수도 있습니다.
따라서 코드에서 직접 교체를 사용합니다. JS에서는 기본적으로 첫 번째 일치 항목만 교체하므로 코드는 다음과 같습니다.
코드 복사 코드는 다음과 같습니다.
var args=Array.prototype.slice.call(arguments)
if(args. 길이>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[0]=args[0].replace(/%s|%d|%i|% o/,args[i ])
}
else{
break
}
}
if(i
}
if(hasstyle){
consoleHelper.showlog(args[0],args[1]);
}
else{
consoleHelper.showlog(args[0])
}
}
else if(args.length==1){
if(arguments [0] 인스턴스 오브 배열) {
consoleHelper.showlog("[" args[0] "]")
}
else if(arguments[0] 인스턴스 오브 함수){
consoleHelper.showlog (args[0], null,"console_log_function");
}
else{
consoleHelper.showlog(args[0])
}
}
else{
consoleHelper.showlog(" ");
}
console.log는 여러 매개변수를 허용하고 숫자가 불확실하므로 여기에는 공식적인 매개변수가 기록되지 않습니다. %c의 경우 Firebug에서는 중간에 작성해도 유효하지만 여기서는 단순성과 직접성을 위해 처음에 작성해야 유효합니다. 코드에서 매개변수는 먼저 배열로 변환된 다음 배열이 사례별로 처리됩니다.
매개변수 개수가 1개보다 큰 경우, 다음 매개변수를 교체로 바꾸고, 나머지 매개변수를 합쳐서 출력합니다.
매개변수 개수가 1개인 경우 두 가지 상황이 있는데 하나는 배열이고 다른 하나는 메서드입니다. 배열의 경우 Firebug 형식을 따르고 양쪽 끝에 대괄호를 추가합니다. 함수의 경우 단어 색상을 녹색으로 변경합니다
매개변수 개수가 0인 경우 빈 문자열을 직접 출력합니다
다음 consoleHelper.showlog는 출력의 편의를 위해 작성된 메소드입니다. 이 메소드에서는 다양한 디버깅 정보의 결과가 페이지의 div(존재하는 경우)에 표시됩니다.
다른 여러 메소드의 아이디어는 이것과 유사하지만 스타일이 다르고 이보다 기능이 더 간단합니다. 매개변수를 연결하고 직접 출력하면 됩니다.
전체 콘솔 클래스 코드는 다음과 같습니다.
코드 복사 코드는 다음과 같습니다.
console전체부대码
var console={
assert:function(){
},
clear:function(){
},
개수:함수(){
},
디버그:함수(){
},
dir:함수(){
},
dirxml:함수(){
},
error:function(){
var args=Array.prototype.slice.call(arguments);
consoleHelper.showerror(args.join(" "));
},
예외:함수(){
},
그룹:함수(이름){
consoleHelper.showgroup(이름);
},
groupCollapsed:function(){
},
groupEnd:function(){
},
info:function(){
var args=Array. 프로토타입.slice.call(인수);
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/,"");
나는=2;
hasstyle=true;
}
for(;i
args[0]=args[0].replace(/%s|%d|%i|%o/,args[i]);
}
else{
break;
}
}
if(i
}
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] 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(인수);
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("
");
}
}
if(cla){
div.className=cla;
}
var oText=document.createTextNode(val);
div.appendChild(oText);
document.getElementById("showconsole").appendChild(div);
}
}
};
}
}
if(cla){
div.className=cla;
}
var oText=document.createTextNode(val);
div.appendChild(oText);
document.getElementById("showconsole").appendChild(div);
}
}
};
注：如果想在页面中看到调试信息，直接在页面上添加一个id 为 showconsole 的隐藏的div即可。
样式(尽weight跟FireBug保持一致)：
复代码 代码如下:
.console_log{
border:1px solid #CCC;
색상:#333;
패딩:0px 5px;
최소 높이:24px;
줄 높이:24px;
여백-하단:-1px;
}
.console_info{
border:1px solid #CCC;
색상:#333;
패딩:0px 5px;
최소 높이:24px;
줄 높이:24px;
여백-하단:-1px;
배경: url("데이터:이미지/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAEEklEQVQ4jbWUW0wcZRTH/998szO7O8ByWa7WmBVKE1EpjUCt1hZsk1pCqsFL6mufauJDTQypTYHY2KbGm Chp mBsfDBtNFJDArWVWlAJsqxpKYGYsiJpKVso2y3sZXZnZ2aPDyNkl23Vl05ykvnO5Tdn/ufMMCLCo7iER0IFIP5Xgru2LS8ai9cRUQUAMMYCOYrjWvB6T/jf6tjDpHBubKkxnRVH3ZUNLU9W1 48koAAPHwXfw1PRUNzoz1czVwTPX3T/0v8MHD3ezL7356L ZN05sbd5nKylQ4LAxKLIVj2pATCPcW1ExOtirhye PXzg9Zc/PX3i3QxQhhQ9F37BmfM/Hyva cGRF7c hzKXgMqi7G4IDH5ZgbPlLduvhV WfnDn/cf6u7bVH2/a 9OCO5cqWfXL9oe937GxiJXkcjxdY/hc8QO1j1v3A8HX4qRYAsBgB5pdTGBq8TJrvs9e0mf7eVdbaVmxo2C xsvqT1VuaWNzgcDmASMKyW4srGPV6Mer1YnLiKsI aENYAhwRwLqC6romxsvqTGxr2S1lSLN1b3iY9v3tTocKRNIG7EUAWAS4AE0EXZLHRGl5lI0JhIGEATglgAApzOGye3ZuWfvNuAzCUASZR2eMo3wzOATKBuWWrSOLAO9uBV5 18r745jK XtllHWJWjkMS4Cjf DE1U9mSBmdPtkR1OMALs67Y7lTZvMuJZcUaA7HCCOd2eLClWAZwDesssFNO TwbAYcuMm5T58Ewp1OCsFlcBUmCX1iWlgxlgXweOaYAWV0FqcHbVt1bCjNhFbWEcIdUqTDfOMzteHw pgLYwDmbELmaBi4 vyR/TZgRs3QwQi63VXLb1jgWXGiICbIYI O3CjuCh /JAt8e xckhZ87cv KzQxb22DXbQskdAQCNxBIHAH4XB4zS9xYGIeWPZfIVrwtd8eO5fM0hgAzna397596PPjM/aCIyLfgh1VgI0DQ37Chd91qxO5CTk2QDeB4T BmT uQr92 qOz3e296Sze 1dW1dnhq4xMIBBYHfZe ioRUNM0aldwp21CUKyI/3wUl1wUm5WImCPw4GcctX4 evHqq/UBb0/H3D76ZMdCH/zar9j5tOis6eEXjK7bimhxHnhsAEA8HoS9NRc2A9weuBj6cGjg16fF4surZyMgIO js7 ft0tBiJRKRkMimZpimlUikbEdnI5iogu7uOBLEcAFjKWGCJpXGmh0OMMV0QBF0QhKQkSUlFUZIej0fv6OgwRV3XoaoqDMNgpmkKRLRqHIBI2v0EtPs BvB/ts0kwABjIoAUEaWISDBNUzAMg6mqyqLR6 IOl6OvrY8PDw5ibm2OhUIipqopEIsEAwG63kyzLcLvdVFpaSs3NzWhtbc2C/A18nMDdJnOGEAAAAABJRU5ErkJggg==") 반복 없음 스크롤 0 1px #EBF5FF;
왼쪽 여백:30px;
}
.console_warn{
border:1px solid #CCC;
색상:#333;
패딩:0px 5px;
최소 높이:24px;
줄 높이:24px;
여백-하단:-1px;
배경: url("데이터:이미지/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAD/ElEQVQ4jbWUX2gcVRSHv3tndmaTTbJJSJNWaXVNCUVjFbEWlb4U9aEYjRYURHwqKIIvgqX0oZEi CIqCBYUjVhE8 aW0xAfxSQhpSaVqETWpDdhtbWvS/NvZ2dm5c /xIUmTdlN86oUDw71zvnvu7xx SkS4HUvfFirg3/Lk/Lcw9tp2l9lBE8ujzrBBaWK/iT 8UI osPMHXpxKbpWu1pNCjnZtsXH6fm2xddAWd3i qow/d3I5YgyxegpnThHpqMiiq/Xpw/DjFvv8Huy86dtTn7PF6ftem4P7nULkmCAso7YEIklQQEbLyGeT8V66wITmsd75zWPe/IbcE2 HOu vz2UlT3LMx2PYEKNAB5LY9gy50YzPDX99/wF1dnYgFO3c R 8sRCj3J6/6 hSNrwdebZ0 / rbI4 yjV/RuD3p34YUTYHhG2RmhtlyQCrF4gbI8IWiP89iJ667Mkc7yXfdp597pgd bDHWkU7An6dhG2V8nlI7SLwEQgdjUjq6GyCE9HhMUq4ebN2KC32Rq7f31wJnspbtX5DQpNFbI1 IW4NOAZTBVNFZVVyzTFBaTs2YTD9vDdY e36uNlUHg96N6OJwdzU4pWKRcAmS5etNAkIu1upTbVsktpsCZi4AYx4PX5b01JFN6/lPZPW0GYeFq CqYDS0HQH2m9BtxaRuNrdCFYkykVgwkZwMg 1AdWGa5sppCL3Vs2oZOh5A6wznqDdIgbMTMjvRT2cJ1HKiOMiqpJdHubLQxJW/f2Nr3uMGJxCBhQmkNmsEf6oBLKKswvX9nragBcCArYOOLzFYdpqn9EGtBVyDQ9yaYKrmfH8yz/ONFas88eyhdq7fm tzz2o9CvDwtjxNe74bcZbs3FG0tzolApi5CGc5onseXMWtfBTevDpvU4bS6XmcFcBbjd5XYPsB7 H1vce4K1/dFPGwlwszXxlTxnm/WvuIGd/P7Bj4xEyceVurffbliEZVvQSnFzO8nuFw/ibMZTRoEj ZgUV52nfq1eFpd7oeXVn 1aVoMJVYaf1HJp/HCuRQ4EbdpTuTx4wdJoIeAyxCTY2JAuMm5dsLd4cObizbqva5vTF/5EDz/2kO9lB3PNPOWFtC6bGzbFmhpnTaI nsmVvgxeOpaWSqUGhhobG2 NoaMibnJz0K5VKkKZpYK0NnHM5Eck9cqdqf/5e3d/RpLpqRuo//ePOfX1WLljBKKWM1tpordMgCNJCoZCWSiVz6NAh6xtjiOOYLMuUtVaLyEp4gH qbOunyvbX5Y4pwAK UkoAJyJORLS1VmdZpuI4 VlEUrs/FyMiIGh0dpVwuq9nZWRXHMUmSKIB8Pi9hGNLV1SU9PT2ye/duBgYGGiD/AVNZApv23zD/AAAAAElFTkSuQmCC") 아니요 -반복 스크롤 0 1px #FFFFC8;
왼쪽 여백:30px;
}
.console_error{
테두리:1px 솔리드 #CCC;
색상:#FF0000;
패딩:0px 5px;
최소 높이:24px;
줄 높이:24px;
여백-하단:-1px;
배경: url("데이터:이미지/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAACYQAAAmEBwTBV gAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuP BoAAAQHSURBVDiNtZVtbxRVFMd/596ZnS1L210otMB2t62gmKA2gVLtC5UgaGi0Eg2JfgY AdAWWq0fgKJGE33ZqCQF5EFqCIoJ0RoTXpRATHjY0hYa2i6d7XZ2u7tzfbHttlgKiYn/5M5N7j3 3N fMOfeMGGP4P2Q9yyCxSloUxBAioCKIyviW1R9/5N152jlZyeORkOwz6A5VVdWsa2uxamOAonB/hPzoCH4yOahE922acHsxJv9M8L2QbETbp/SmaNOqtv1Yz20BgeJD5ichf c23oWzFMbHB4IZ82HVw 4epFcET66R8Nu9cKdv9diNbnsefm6Ns46YSbCk4OzmF0gpz xaZ3369ZgK6tfbm8NgCSy2 QixPVp8MNr/WmF zlqnECNlwFVODg/gpF991i3PKJTV0HXdiisnbCfIVYZztOxoV1qmlHpfAo 9Xhg1a8fm hJorrptnyzbfE2ttRL71C8q9r KkUJpVi5ubfeNqm4Xgvm7/6GncySWFdNToWbxp5 YV9y8DGtj 26hvw3WnKtr6ICgYBiB1pR2/fwaOh68zcukUmVM7mE58jWqMch DWrRSmXaxYHB1 wOh4DJ pq6iUcaUIUAccmd ki944dLYUV6zyKtfNVsmvWsfmLL0HrYqK7jpH/ 7RecUBkoBRWVzWMtO1tgvo4tJ7BftMafngbbYnWkEvfsGRKFAvGu7iK8qxt8vwgAhjs7mLv0MxWxKH46Db6PaI2xVAy4WrwglhM0 Rz5sVEktAoVClERqcQ908/dQoG6T3vm4ytC7x4 AhXRDZjZWUw2g8lmAUE5gUjJYyydFKVAFORy G6qCMnlyD94AIVCKfxiQgwmmynaLZSiZYEojKhFsAScZNFAFY2UYnY6hX5zNw3He0ueLqiup4eEVqR PEV5TTUoQUQWwJnFqrDVMHYAbBuxbdKpNNa d 2noPbEY/qFD3D18qASPd39CsO0DZianEMsGuziU2P2w5Obdf6Pld5Q0Z9Oz8NY71PV8VoIk2o QPXcGEJzW94h3dy/udXTA1Ss4kTCIDNZ839/8WB2LY3dh20gwSObGDXzPm89 J9mfzlFRG6UiFiU7 CJ7ho50A J6Hd30IFQwiWiNK9ZV4S3vFg9Y9g4hqyqZm8Naup2zbNuYuXqA8uuGx7z8zeh979x68oSHK0i7BcCVgBqrHk61cvpxfBp5o27uxoALnjEjjnOdh8gWcSBj5V/IAMo mUZZFY HUIkGvay71edfp0qcMta5sTbW3lBUefRMneZbQn608t k6PLV18cqPftcsar15zEOEjDDtXAP5hjHTVfHfy/JM2V/yDLGj8wIF6Uf5 IyYoRpIGPymih9f3/XD1aeeeCf6v gfLYZXwkd5f2QAAAABJ RU5ErkJggg==") 반복 없음 스크롤 0 1px #FFEBEB;
왼쪽 여백:30px;
}
.console_group{
margin-top:20px;
글꼴 크기:16px;
글꼴 두께:굵게;
}
.console_log_function{
color:green;
}
这里为了演示方便, 三个小图标直接接用 是base64格式的图picture, 就是上面 代码中的 3个长字符串, 大家 时可以换成图 Images地址。
完整代码：
复主代码 代码如下:
JSCode
로그인
결과
JavaScript
HTML
CSS
전체
편집
공유
DownLoad
<머리>
<본문>