実行例

● サンプル1 (コンソールに ”Hello" を表示してみる)

function sample1(){
- debug( "Hello." );
}

● サンプル2 (ループ中の変数内容を表示してみる)

function sample2(){
- ar = new Array( "日", "月", "火", "水", "木", "金", "土" );
  for (i=0; i<ar.length; i++){
  - debug( "ar[" + i + "] = " + ar[i] );
  }
}

● サンプル3 (ID:idNothing は存在していない。エラーを発生させてみる)

function sample3(){
- document.getElementById("idNothing").innerHTML = "Hello";
}

リスト (debugconsole.js)

debugconsolexy=4; /* debug consoleの表示位置 1:左上 2:右上 3:左下 4:右下 */
debugconsolestarterror = ""; /* onload前のerror文字列 */
debugconsolestartflg=0; /* onload前:0 後:1 */

/* エラー発生時の処理 */
window.onerror = function ( debugconsolemessage, debugconsoleurl, debugconsolelineno ){
- var debugconsolesyntaxerror = "●ERROR!\n" + debugconsolemessage + "\nURL: " + decodeURI(debugconsoleurl) + "\nLine Number: " + debugconsolelineno + "\n";
  if (debugconsolestartflg==0)debugconsolestarterror += debugconsolesyntaxerror;
  else debug(debugconsolesyntaxerror);
}

/* debug console 作成 */
function setDebugConsoleTags(){
- var str="";
  str+="<div id='iddebugconsole' style='background-color:#ffffff; visibility:hidden; position:absolute; z-index:1; border-width:thick; border-style:ridge; width:50%; border-radius:10px;'>";
  str+="<div style='float:right;'>";
  str+="<span style='font-size:20px; color:#000000;' onclick='debugconsoleclear()'>Ⓒ<\/span> ";
  str+="<span style='font-size:20px; color:#000000;' onclick='debugconsoleright()'>㊨<\/span> ";
  str+="<span style='font-size:20px; color:#000000;' onclick='debugconsoleup()'>㊤<\/span> ";
  str+="<span style='font-size:20px; color:#000000;' onclick='debugconsoleleft()'>㊧<\/span> ";
  str+="<span style='font-size:20px; color:#000000;' onclick='debugconsoledown()'>㊦<\/span> ";
  str+="<span style='font-size:20px; color:#000000;' onclick='debugconsoleclose()'>Ⓧ<\/span>";
  str+="<\/div>";
  str+="<div style='background-color:#C0C0C0; font-size:20px; text-align:center; margin:0px; padding:0px; border-radius:5px 5px 0px 0px;'>debug console<\/div>";
  str+="<form name='debugform' style='clear:both; margin:0px; padding:0px;'><TEXTAREA name='debugtextarea' style='background-color:#000000; color:#FFFFFF; width:100%; height:180px;'><\/TEXTAREA><\/form>";
  str+="<div id='iddebugstatusbar' class='bkgray xxsmall' style='padding:0 4px; border-radius:0 0 5px 5px;'>status bar<\/div>";
  str+="<\/div>";
  var eDebugConsole = document.createElement("div");
  eDebugConsole.innerHTML = str;
  var oBody = document.getElementsByTagName("body").item(0);
  oBody.appendChild(eDebugConsole);
}

/* [C]ボタン */
function debugconsoleclear(){
- var et = document.debugform.debugtextarea;
  et.value = "";
  et.scrollTop = et.scrollHeight;
  debugconsolestarterror = "";
}

/* [←]ボタン */
function debugconsoleleft(){
- var myXs = document.body.scrollLeft;
  var myX = document.body.clientWidth;
  document.getElementById("iddebugconsole").style.left = myXs;
  debugconsolexy=(debugconsolexy==1||debugconsolexy==2)?1:3;
}

/* [↑]ボタン */
function debugconsoleup(){
- var myYs = document.body.scrollTop;
  var myY = document.body.clientHeight;
  document.getElementById("iddebugconsole").style.top = myYs;
  debugconsolexy=(debugconsolexy==1||debugconsolexy==3)?1:2;
}

/* [→]ボタン */
function debugconsoleright(){
- var myXs = document.body.scrollLeft;
  var myX = document.body.clientWidth;
  document.getElementById("iddebugconsole").style.left = myX - (myX/2) + myXs - 12;
  debugconsolexy=(debugconsolexy==1||debugconsolexy==2)?2:4;
}

/* [↓]ボタン */
function debugconsoledown(){
- var myYs = document.body.scrollTop;
  var myY = document.body.clientHeight;
  document.getElementById("iddebugconsole").style.top = myY- 220 + myYs - 18;
  debugconsolexy=(debugconsolexy==1||debugconsolexy==3)?3:4;
}

/* [X]ボタン */
function debugconsoleclose(){
- document.getElementById("iddebugconsole").style.visibility = "hidden";
}

/* onscroll、onresize時 */
function debugconsoleonscroll(){
- var eb = document.getElementById("iddebugconsole").style;
  if (eb.visibility == "visible"){
  - if(debugconsolexy==1){
    - debugconsoleleft();
      debugconsoleup();
    }else if(debugconsolexy==2){
    - debugconsoleright();
      debugconsoleup();
    }else if(debugconsolexy==3){
    - debugconsoleleft();
      debugconsoledown();
    }else{
    - debugconsoleright();
      debugconsoledown();
    }
  }
}

/* onmousemove時 */
function debugconsoleonmousemove(e){
- var eb = document.getElementById("iddebugconsole").style;
  var es = document.getElementById("iddebugstatusbar");
  if (eb.visibility == "visible"){
  - es.innerHTML = "X:"+(document.body.scrollLeft+e.clientX) + " Y:"+(document.body.scrollTop+e.clientY);
  }
}

/* 表示 debug() */
function debug( debugstrings ){
- var et = document.debugform.debugtextarea;
  et.value = et.value + debugstrings + "\n";
  et.scrollTop = et.scrollHeight;
  var eb = document.getElementById("iddebugconsole").style;
  if(debugconsolexy==1){
  - debugconsoleleft();
    debugconsoleup();
  }else if(debugconsolexy==2){
  - debugconsoleright();
    debugconsoleup();
  }else if(debugconsolexy==3){
  - debugconsoleleft();
    debugconsoledown();
  }else{
  - debugconsoleright();
    debugconsoledown();
  }
  if (eb.visibility == "hidden"){
  - eb.visibility = "visible";
  }
}

/* onload時の初期処理 */
function debugconsoleonload(){
- setDebugConsoleTags(); /* create debug console tags */
  if (debugconsolestarterror != "" && debugconsolestartflg == 0){
  - debug(debugconsolestarterror);
    debugconsolestarterror = "";
  }
  debugconsolestartflg=1; /* onload前:0 後:1 */
  
  if(window.addEventListener) window.addEventListener("scroll", debugconsoleonscroll, false);
  else window.attachEvent("onscroll", debugconsoleonscroll); // 古いIEに対応
  
  if(window.addEventListener) window.addEventListener("resize", debugconsoleonscroll, false);
  else window.attachEvent("onresize", debugconsoleonscroll); // 古いIEに対応
  
  if(window.addEventListener) window.addEventListener("mousemove", debugconsoleonmousemove, false);
  else window.attachEvent("onmousemove", debugconsoleonmousemove); // 古いIEに対応
}
if(window.addEventListener) window.addEventListener("load", debugconsoleonload, false);
else window.attachEvent("onload", debugconsoleonload);

↓　このフォームには、上記のリストと同じものが入っています。[CTRL]+[A]で全選択して、コピーできます。

debugconsolexy=4;		/* debug consoleの表示位置 1:左上 2:右上 3:左下 4:右下 */
debugconsolestarterror = "";	/* onload前のerror文字列 */
debugconsolestartflg=0;		/* onload前:0 後:1 */

/* エラー発生時の処理 */
window.onerror = function ( debugconsolemessage, debugconsoleurl, debugconsolelineno ){
	var debugconsolesyntaxerror = "●ERROR!\n" + debugconsolemessage + "\nURL: " + decodeURI(debugconsoleurl) + "\nLine Number: " + debugconsolelineno + "\n";
	if (debugconsolestartflg==0)debugconsolestarterror += debugconsolesyntaxerror;
	else debug(debugconsolesyntaxerror);
}

/* debug console 作成 */
function setDebugConsoleTags(){
	var str="";
	str+="<div id='iddebugconsole' style='background-color:#ffffff; visibility:hidden; position:absolute; z-index:1; border-width:thick; border-style:ridge; width:50%; border-radius:10px;'>";
	str+="<div style='float:right;'>";
	str+="<span style='font-size:20px; color:#000000;' onclick='debugconsoleclear()'>&#x24b8;<\/span> ";
	str+="<span style='font-size:20px; color:#000000;' onclick='debugconsoleright()'>&#x32a8;<\/span> ";
	str+="<span style='font-size:20px; color:#000000;' onclick='debugconsoleup()'>&#x32a4;<\/span> ";
	str+="<span style='font-size:20px; color:#000000;' onclick='debugconsoleleft()'>&#x32a7;<\/span> ";
	str+="<span style='font-size:20px; color:#000000;' onclick='debugconsoledown()'>&#x32a6;<\/span> ";
	str+="<span style='font-size:20px; color:#000000;' onclick='debugconsoleclose()'>&#x24cd;<\/span>";
	str+="<\/div>";
	str+="<div style='background-color:#C0C0C0; font-size:20px; text-align:center; margin:0px; padding:0px; border-radius:5px 5px 0px 0px;'>debug console<\/div>";
	str+="<form name='debugform' style='clear:both; margin:0px; padding:0px;'><TEXTAREA name='debugtextarea' style='background-color:#000000; color:#FFFFFF; width:100%; height:180px;'><\/TEXTAREA><\/form>";
	str+="<div id='iddebugstatusbar' class='bkgray xxsmall' style='padding:0 4px; border-radius:0 0 5px 5px;'>status bar<\/div>";
	str+="<\/div>";
	var eDebugConsole = document.createElement("div");
	eDebugConsole.innerHTML = str;
	var oBody = document.getElementsByTagName("body").item(0); 
	oBody.appendChild(eDebugConsole); 
}

/* [C]ボタン */
function debugconsoleclear(){
	var et = document.debugform.debugtextarea;
	et.value = "";
	et.scrollTop = et.scrollHeight;
	debugconsolestarterror = "";
}

/* [←]ボタン */
function debugconsoleleft(){
	var myXs = document.body.scrollLeft;	
	var myX = document.body.clientWidth;
	document.getElementById("iddebugconsole").style.left = myXs;
	debugconsolexy=(debugconsolexy==1||debugconsolexy==2)?1:3;
}

/* [↑]ボタン */
function debugconsoleup(){
	var myYs = document.body.scrollTop;
	var myY = document.body.clientHeight;
	document.getElementById("iddebugconsole").style.top = myYs;
	debugconsolexy=(debugconsolexy==1||debugconsolexy==3)?1:2;
}

/* [→]ボタン */

function debugconsoleright(){
	var myXs = document.body.scrollLeft;	
	var myX = document.body.clientWidth;
	document.getElementById("iddebugconsole").style.left = myX - (myX/2) + myXs - 12;
	debugconsolexy=(debugconsolexy==1||debugconsolexy==2)?2:4;
}

/* [↓]ボタン */
function debugconsoledown(){
	var myYs = document.body.scrollTop;
	var myY = document.body.clientHeight;
	document.getElementById("iddebugconsole").style.top = myY- 220 + myYs - 18;
	debugconsolexy=(debugconsolexy==1||debugconsolexy==3)?3:4;
}

/* [X]ボタン */
function debugconsoleclose(){
	document.getElementById("iddebugconsole").style.visibility = "hidden";
}

/* onscroll、onresize時 */
function debugconsoleonscroll(){
	var eb = document.getElementById("iddebugconsole").style;
	if (eb.visibility == "visible"){
		if(debugconsolexy==1){
			debugconsoleleft();
			debugconsoleup();
		}else if(debugconsolexy==2){
			debugconsoleright();
			debugconsoleup();
		}else if(debugconsolexy==3){
			debugconsoleleft();
			debugconsoledown();
		}else{
			debugconsoleright();
			debugconsoledown();
		}
	}
}

/* onmousemove時 */
function debugconsoleonmousemove(e){
	var eb = document.getElementById("iddebugconsole").style;
	var es =  document.getElementById("iddebugstatusbar");
	if (eb.visibility == "visible"){
		es.innerHTML = "X:"+(document.body.scrollLeft+e.clientX) + " Y:"+(document.body.scrollTop+e.clientY);
	}
}

/* 表示 debug() */
function debug( debugstrings ){
	var et = document.debugform.debugtextarea;
	et.value = et.value + debugstrings + "\n";
	et.scrollTop = et.scrollHeight;
	var eb = document.getElementById("iddebugconsole").style;
	if(debugconsolexy==1){
		debugconsoleleft();
		debugconsoleup();
	}else if(debugconsolexy==2){
		debugconsoleright();
		debugconsoleup();
	}else if(debugconsolexy==3){
		debugconsoleleft();
		debugconsoledown();
	}else{
		debugconsoleright();
		debugconsoledown();
	}
	if (eb.visibility == "hidden"){
		eb.visibility = "visible";
	}
}

/* onload時の初期処理 */
function debugconsoleonload(){
	setDebugConsoleTags(); /* create debug console tags */
	if (debugconsolestarterror != "" && debugconsolestartflg == 0){
		debug(debugconsolestarterror);
		debugconsolestarterror = "";
	}
	debugconsolestartflg=1;		/* onload前:0 後:1 */

if(window.addEventListener) window.addEventListener("scroll", debugconsoleonscroll, false);
	else	window.attachEvent("onscroll", debugconsoleonscroll); // 古いIEに対応

if(window.addEventListener) window.addEventListener("resize", debugconsoleonscroll, false);
	else	window.attachEvent("onresize", debugconsoleonscroll); // 古いIEに対応

if(window.addEventListener) window.addEventListener("mousemove", debugconsoleonmousemove, false);
	else	window.attachEvent("onmousemove", debugconsoleonmousemove); // 古いIEに対応

}
if(window.addEventListener) window.addEventListener("load", debugconsoleonload, false);
else	window.attachEvent("onload", debugconsoleonload);

説明・使い方

JavaScript作成時のデバッグで変数の値を表示したい場合、document.writeだったらページイメージが壊れてしまうし、alertだったらループ時だと[OK]押すのが面倒だし、ということで作ったデバックコンソールです。

上記リストを debugconsole.js で保存して、

のように、デバッグ中のHTMLに貼りつけます。(デバックしたいJavaScriptよりも上位置に貼ってください)

デバックコンソールに文字を表示するためには、

debug( "文字列" );

と、alert感覚でソース内にいれるだけです。

※ 最初、print( "文字列" ); にしたら、印刷画面が出てきて驚いたのはナイショ。

debug()にて出力があれば、コンソール画面がでてきて内容を表示します。

コンソール画面は右下に表示されますが、その場所で邪魔であれば、コンソール画面右上の上下左右ボタン？で画面位置を移動させます。
コンソール画面右上の[X]ボタンを押すと、画面を閉じます。(内容は失われません)
コンソール画面右上の[C]ボタンを押すと、出力されたログがクリアされます。

また、スクリプト実行中にエラーが発生した場合は、エラー内容がコンソール画面内にも表示されます。

●注意事項
debugconsole.js 内で、
window.onerror = function
を使っています。重複時注意。

▲TOP