×

[PR]この広告は3ヶ月以上更新がないため表示されています。
ホームページを更新後24時間以内に表示されなくなります。

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>


ご意見・ご指摘等ございましたらお願い致します。(雑記帳へ
ホームページへ戻る