みなさんはどんな環境で JavaScript のデバッグを行っていますか?
僕は以下のようなものを使っています。
- Venkman JavaScript Debugger(Firefox)
- Microsoft Script Editor(Internet Explorer)
- DOM Inspector(Firefox)
- Web Developer(Firefox)
- Developer Toolbar(Internet Explorer)
最近は便利なツールが増えたものですね。
しかし、このような便利なツールが増えてもやっぱり 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);
}このコードを使う場合はコメントしてね。