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