IT戦記

プログラミング、起業などについて書いているプログラマーのブログです😚

JavaScript のデバッグ方法

みなさんはどんな環境で JavaScriptデバッグを行っていますか?
僕は以下のようなものを使っています。

最近は便利なツールが増えたものですね。
しかし、このような便利なツールが増えてもやっぱり alert 使いたい場面って出てきます。たとえば、 Opera での確認、ルートが複雑すぎて alert とか使ったほうが楽な場合などです。
とはいえ、 alert は何かと使いにくいので、僕は以下のように簡易ロガーを作って開発しています。使ってみるとかなり便利です。

var debug = function(text) {
	var alerter = document.getElementById('debugAlerter');
	if(alerter) {
		var element  = document.createElement('div');
		var textNode = document.createTextNode(text);
		element.appendChild(textNode);
		alerter.appendChild(element);
	}
};

debug.prepare = function() {
	var body = document.body;

	var debugAlerter  = document.createElement('div');
	debugAlerter.id   = 'debugAlerter';
	style             = debugAlerter.style;
	style.position    = 'absolute';
	style.top         = '0px';
	style.left        = '0px';
	style.color       = 'red';
	style.fontWeight  = 'bold';
	style.padding     = '20px';
	style.fontSize    = '20px';
	body.appendChild(debugAlerter);
};

if (window.addEventListener) {
	window.addEventListener('load', debug.prepare, true);
} else if (window.attachEvent) {
	window.attachEvent('onload', debug.prepare);
}

このコードを使う場合はコメントしてね。