JavaScript デバッグ用ライブラリ
結果がまとめて一気に見れて、かつ無限ループも察知して
ほどほどで切り上げてくれる alert() みたいなものです。
名称が邪魔しない用にオブジェクト化してます。
debugW.check()、debug.check() で alert() と同じように使って下さい。
debug は擬似ウインドウタイプで、ページ読み込み後に初めてウインドウを表示します。
擬似ウインドウは左上に position = absolute で出て、クリックすれば消えます。
debugW は別ウインドウタイプで、逐次追加出力していきますが、ブラウザの設定によってはポップアップブロックされます。
両方とも最後に使用例を載せておきました。（2008/11）
<script type="text/javascript">
<!--
/************↓debug↓************/
//↓IEの条件付コンパイルを有効にします
//@cc_on
window./*@if (@_jscript) attachEvent ('on' + @else@*/
addEventListener (/*@end@*/ 'load', function(){
//↓document.onload で debug.b に body 要素を代入
// （スクリプト位置によっては初期化時に取得できないため）
debug.b = document.getElementsByTagName("body")[0];
debug.e.setAttribute( "id", "debugCheckView");
with(debug.e.style){
zIndex = "99";
color = "yellow";
backgroundColor = "black";
borderColor = "navy";
borderStyle = "double";
borderWidth = "3";
//↓既存ページの表示に影響を与えないよう absolute で設定
position = "absolute";
left = "5px";
top = "5px";
}
//↓body 直下の末尾に擬似ウインドウを挿入
debug.b.appendChild( debug.e );
//↓クリックで擬似ウインドウが消えるようにセットします
debug.setClickRemove( debug.e );
}, false );
///////////////
//↓名前空間 "debug" で規定
var debug = {
//出力用擬似ウインドウ
e : document.createElement("div"),
//body要素を保持
b : document.getElementsByTagName("body")[0],
//無限ループの検出に使用
counter : 0,
//無限ループ検知の基準出力数
maxOutput : 300,
//引数の値を擬似ウインドウで表示する check() を規定
check :
function( targetVar ){
//↓初回以外は改行して追記
if(debug.counter>0)debug.e.appendChild( document.createElement("br") );
//↓引数をテキストノードにして擬似ウインドウに追記
var str = targetVar;
str = document.createTextNode( str );
debug.e.appendChild( str );
//↓無限ループは中断させる
debug.counter++;
if(debug.counter>debug.maxOutput){
alert(debug.maxOutput + " 以上の出力を検出したため debug.check を中止します。\n※以後の debug.check はエラーとなります。");
debug = null;
}
},
//targetを消すclickイベントを追加するクロスブラウザメソッド
setClickRemove :
function( target ){
target./*@if (@_jscript) attachEvent ('on' + @else@*/
addEventListener (/*@end@*/ 'click', function(){
target.parentNode.removeChild(target);
//↓メモリリーク防止
debug = null;
}, false );
}
}
/************↑debug↑************/
//-->
</script>
<script type="text/javascript">
<!--
//↓debug.check の使用例
var aa = "あいうえお";
debug.check("aa= " + aa);
var bb = 123456789;
debug.check("bb= " + bb);
//-->
</script>
<script type="text/javascript">
<!--
/************↓debugW↓************/
//↓名前空間 "debugW" で規定
var debugW = {
counter : 0,
w : null,
maxOutput : 300,
check :
function(targetVar){
if(debugW.counter==0){
debugW.w = window.open("","debug_win","");
if(!debugW.w){
alert("ポップアップがブロックされています。");
debugW = null;
}
with(debugW.w.document){
open();
write('<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">');
write('<html lang="ja"><head><title>debug<\/title><\/head><body>');
write('<form name="outputForm" id="outputForm">');
write('<textarea name="outputArea" id="outputArea" rows="20" cols="80" style="background-color:black;color:yellow;">');
write(targetVar);
write('<\/textarea><\/form><\/body><\/html>');
close();
}
debugW.counter++;
}else if(debugW.counter<debugW.maxOutput){
debugW.w.document.forms["outputForm"].elements["outputArea"].value += "\n" + targetVar;
debugW.counter++;
}else{
alert(debugW.maxOutput + " 以上の出力を検出したため debugW.check を中止します。\n※以後の debugW.check はエラーとなります。");
debugW = null;
}
}
}
/************↑debugW↑************/
//-->
</script>
<script type="text/javascript">
<!--
//↓debugW.check の使用例
var aa = "あいうえお";
debugW.check("aa= " + aa);
var bb = "かきくけこ";
debugW.check("bb= " + bb);
var cc = 123456789;
debugW.check("cc= " + cc);
//-->
</script>
ご意見・ご指摘等ございましたらお願い致します。（雑記帳へ）