웹 전단 개발에도 로그가 필요합니다

예를 들어IE6는 그 위에 그다지 풍요롭지 않아서 프로그램 디버깅에 큰 고통을 준다. 그래서 로그를 즉시 출력하는 것은 좋은 선택이다. 프로그램이 어디에 덮어씌웠는지 알 수 있다.즉, 선진적인 브라우저에서도 필요하다. 그는 디버깅 프로그램에 가서 해당하는 업무 코드가 실행되었는지 확인하는 것보다 훨씬 빠르고 쉽다. 자, 다음은 제가 여가 시간에 쓴 디버깅 정보 출력 도구를 소개한다.
위 코드:

 
  
(function(){ 
  
var cache = []; 
  
var el = null; 
  
this.__debugLine = 1; 
  
function parseObjToStr(obj){ 
  
if(obj.constructor == String){ 
  
return obj.toString(); 
  
} 
  
var ret = []; 
  
for(var o in obj){ 
  
if(typeof obj[o]!="function") 
  
ret.push(o+":"+obj[o]); 
  
} 
  
return ret.join(","); 
  
} 
  
this.assert = function(flag,msg){ 
  
msg = {"number":1,"string":1,"boolean":1,"function":1,"undefined":1}[typeof msg]?msg:parseObjToStr(msg); 
  
//Log.getInstance().debug(msg); 
  
return; 
  
var bgColor = this.__debugLine%2==0?"background-color:#F8F8F8":"background-color:#ffffff"; 
  
msg = flag=="debug"?String.format('
{1}
[{3}]:{4}
', 
  
bgColor,this.__debugLine,"#333333",flag,msg):msg; 
  
if(flag.constructor!=String) 
  
msg = String.format('
{1}
[{3}]:{4}
', 
  
bgColor,this.__debugLine,flag?"green":"red",flag?"PASS ":"FAIL ",msg); 
  
this.__debugLine++; 
  
if(cache!=null){ 
  
cache[cache.length] = msg; 
  
} 
  
else{ 
  
el.innerHTML += msg; 
  
} 
  
} 
  
function applyStyle(el,style){ 
  
for(var pro in style){ 
  
el.style[pro] = style[pro]; 
  
} 
  
} 
  
addEvent(window,"load",function(){ 
  
return; 
  
el = document.createElement("div"); 
  
var elStyle ={backgroundColor:"#ffffff",color:"#333333",border:"1px solid #dcdada",borderLeft:"0px solid #6CE26C",borderRight:"0px solid #6CE26C" 
  
,lineHeight :"25px",textAlign:"left",listStyleType :"none",margin:"0px",maxHeight:"200px",overflow:"auto"}; 
  
var head = document.createElement("div"); 
  
var headStyle ={backgroundColor:"#fef5c5",lineHeight:"25px"}; 
  
head.innerHTML = "       +
"; 
  
var wrap = document.createElement("div"); 
  
var wrapStyle ={overflow:"hidden",backgroundColor:"#ffffff",color:"#333333",border:"1px solid #C0C0C0","fontSize":"12px","margin":"5px",position:"fixed",left:"0px",bottom:"0px",width:"97%"}; 
  
var foot = document.createElement("div"); 
  
var footStyle ={padding:"0",textAlign:"left"}; 
  
foot.innerHTML = ">>>"; 
  
applyStyle(wrap,wrapStyle); 
  
applyStyle(head,headStyle); 
  
applyStyle(el,elStyle); 
  
applyStyle(foot,footStyle); 
  
wrap.appendChild(head); 
  
wrap.appendChild(el); 
  
wrap.appendChild(foot); 
  
document.body.appendChild(wrap); 
  
el.innerHTML = cache.join(""); 
  
cache = null; 
  
function toggle(){ 
  
if(!this.hide){ 
  
el.style.display = "none"; 
  
foot.style.display = "none"; 
  
wrap.style.width = "200px"; 
  
this.hide = true; 
  
} 
  
else{ 
  
el.style.display = ""; 
  
foot.style.display = ""; 
  
wrap.style.width = "98%"; 
  
this.hide = false; 
  
} 
  
} 
  
head.onclick = function(){ 
  
toggle.call(this); 
  
} 
  
head.onclick(); 
  
document.getElementById("console_eval").onkeydown = function(e){ 
  
e = e||window.event; 
  
if(e.keyCode==13){ 
  
try{ 
  
eval.call(window,String.format("assert('debug',{0})",this.value)); 
  
} 
  
catch(e){ 
  
assert("debug",e.message); 
  
} 
  
el.scrollTop = el.scrollHeight; 
  
} 
  
} 
  
}); 
  
})(); 
  
 
 

위의 코드 호출도 상당히 간단하다

 
  
assert("debug","    "); 
  
 
 

페이지에 해당하는 로그가 나옵니다.
로그 출력 부분 코드는 Jquery 작성자의 셀 테스트 모듈에서 가져옵니다.