JavaScriptでprintデバッグ

Ajaxを含め、WebアプリケーションのプログラミングではJavaScriptのコードをデバッグをすることが良くあります。


何らかのエラーが発生した場合、FirefoxであればJavaScriptコンソールに出力され、IEであればエラーアイコンが表示され詳細を見ることが可能です。
大体は、その内容を見れば解決可能なエラーですが、いわゆる「printデバッグ」を行いたいときがあります。


たとえば変数の値を書き出したり、関数の呼び出しをトレースしたりと「printデバッグ」で解決するものも多いはずです。
もちろんデバッガを利用するのが一番良いのでしょうが、そんなに大げさじゃない場合に良く使っている手を紹介します。


HTML中に以下のように textarea を追加します。

<textarea cols=100 rows=50 id="debug"></textarea>

そしてJavaScript関数をひとつ追加します。

function DebugPrint(str)
{
    var out = document.getElementById("debug");
    if (!out) return;
    out.value += str;
}


そして、JavaScript中の任意の場所で、DebugPrint("ほげほげ");
などとやると、textarea に値が表示されます。
たったこれだけの、誰でも思いつくような方法ですが意外と重宝するのでお勧めです。
ブラウザにあまり依存しないのもお勧めの理由のひとつです。


textareaはデバッグ終了後、消すなりコメントアウトしておけばよいでしょう。

入門 Ajax
入門 Ajax
posted with amazlet on 06.04.30
高橋 登史朗
ソフトバンククリエイティブ (2005/11/15)
売り上げランキング: 65,811