Web フロントエンド開発には logs_javascript スキルも必要です-jsチュートリアル-php.cn

Web フロントエンド開発には logs_javascript スキルも必要です

WBOY

リリース： 2016-05-16 18:14:26

オリジナル

1415 人が閲覧しました

たとえば、IE6 には機能があまり豊富ではないため、プログラムのデバッグに大きな負担がかかります。そのため、プログラムのどこがカバーされているかを知るには、リアルタイムログ出力が適しています。高度なブラウザでも必要ですが、プログラムをデバッグするよりもはるかに速く、簡単に、私が暇な時に使っているデバッグ情報出力ツールを紹介します。。
上記のコード:

コードをコピーコードは次のとおりです:

(function(){
var queue = [];
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]!="関数")
ret.push(o ":" obj[o])
}
return ret.join(","); this.assert = function(flag,msg){
msg = {"数値":1,"文字列":1,"ブール値":1,"関数":1,"未定義":1}[メッセージの種類]?msg:parseObjToStr(msg);
//Log.getInstance().debug(msg);
var bgColor = this.__debugLine%2==0?"背景色: #F8F8F8":"background-color:#ffffff";
msg = flag=="debug"?String.format('

',
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 ソリッド #dcdada",borderLeft:"0px ソリッド #6CE26C",borderRight:"0px ソリッド #6CE26C"
,lineHeight :"25px",textAlign :"left",listStyleType :"none",margin:"0px",maxHeight:"200px",overflow:"auto"};
var head = document.createElement("div"); ={backgroundColor:"#fef5c5",lineHeight:"25px"};
head.innerHTML = "调试信息控制台 /span>
";
var Wrap = document.createElement("div");
var WrapStyle ={overflow:"hidden",backgroundColor:"#ffffff ",color:"#333333",border:"1px ソリッド #C0C0C0","fontSize":"12px","margin":"5px",position:"固定",左:"0px",下:"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("");
キャッシュ = null;
function toggle(){
if(!this.hide){
el.style.display = "none";
foot.style.display = "なし";
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("デバッグ","调试情報");
対応するログがページに表示されます。
コードのこのログ出力部分は、Jquery 作者の単体テストモジュールから取得されたものです。