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

5500 단어 전단 개발로그
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('<div style="{0}"><table style="font-size:12px;border-collapse:collapse !important;"><tbody><tr><td style="height:25px;line-height:25px;border-right:3px solid #6CE26C;width:45px; text-align:center;"><code style="font-weight:bold;color:gray">{1}</code></td><td><b style="color:{2};margin-left:5px;">[{3}]:</b>{4}</td></tr></tbody></table></div>',
bgColor,this.__debugLine,"#333333",flag,msg):msg;
if(flag.constructor!=String)
msg = String.format('<div style="{0}"><table style="font-size:12px;;border-collapse:collapse !important;line-height:25px;"><tbody><tr><td style="height:25px;line-height:25px;border-right:3px solid #6CE26C;width:45px;text-align:center;"><code style="font-weight:bold;color:gray">{1}</code></td><td><b style="color:{2};margin-left:5px;">[{3}]:</b>{4}</td></tr></tbody></table></div>',
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 = "<span style='float:left;font-weight:bold;margin-left:10px;font-size:13px;'> </span><span id='console_andler' style='float:right;margin-right:20px;cursor:pointer' title=' / '>+</span><br style='clear:both'>";
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 = "&gt;&gt;&gt;<input type = 'text' value='' id='console_eval' style='margin:0;width:90%;border:none;line-height:25px;height:25px;text-indent:10px;'/>";
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 작성 자의 유닛 테스트 모듈 에서 추출 되 었 습 니 다.

좋은 웹페이지 즐겨찾기