刻々と変化する変数をモニタする

javascriptでscroll 相手に変数を追いかけるときなどに console で延々出していると遅いし目で追うのも大変。という事でhtml内に出してみる。

    /***************************************************************************************/
    /*start*/
    /* デバッグ用fixd 生成
    */
    /***************************************************************************************/
    var ele = document.getElementById('debbuginng_console'); //多重を防ぐ
    if (ele == null){
        var div = document.createElement("div")
        div.setAttribute('id', 'debbuginng_console')
        let ds = div.style;
        ds.width = "100%";
        ds.backgroundColor = "#89c7de";
        ds.color = "#000";
        ds.textAlign = "right";//center は見栄えが良いが更新されると位置がずれる。left はリンクなどが出てくる
        ds.fontSize = "20px";
        ds.padding = "10px 0";

        ds.position = "fixed";//画面下に固定
        ds.bottom = "0"; //下に固定
        ds.zIndex = "2147483647";
        }
        document.body.appendChild(div)
    
    /***************************************************************************************/
    /*end*/
    /* デバッグ用fixd 生成
    */
    /***************************************************************************************/

これを先ず仕込んでおく。画面の下に固定された窓が一つできる。ここに色々な変数を書き出してやる。

        document.getElementById('debbuginng_console').innerHTML =
            "Loading "+ parseInt(AAAA/BBBB*100)+"%" +
        "CCC " + (CCC).toLocaleString() +
        "AAAA " + (AAAA).toLocaleString()
    + " BBBB " + BBBB.toLocaleString()
    + " CCC - AAAA" + ( CCC - AAAA)
    + " parsent " +parseInt((CCC/AAAA)*100) + "% "
    ;

そうこれは何かの進捗状況を表すのだ。<progress>という方法もあるが、3つも変数をモニタしなくてはならなのでこちらのほうが便利。console に出したらズラズラ並び過ぎでその他の大事な情報を見落とすしconsole に出力すること自体パワー食ってて遅くなるんだよね、別ウィンドウを立ち上げるとそれだけで時間を食う。同じwindowに出力するのが一番aSZ