JavaScript のデバッグ方法
みなさんはどんな環境で 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); }
このコードを使う場合はコメントしてね。