JavaScript::DebugScreen

デバッグに役立つかもしれないライブラリ

• 公開 : 2006-01-15
• 更新 : 2006-01-16
• License : Same as Perl
• See also : http://www.bigbold.com/snippets/user/ma.la

サンプル

ダイアログはダブルクリックで消えます。

使い方

• debug.js
• debug.css
• ie_xmlhttp.js

ファイルを保存してheadタグの中にこんな感じで貼り付ける。

 <link rel="stylesheet" href="debug.css">
 <script type="text/javascript" src="ie_xmlhttp.js"></script>
 <script type="text/javascript" src="debug.js"></script>

• 読み込んだだけで有効になります。
• 機能を無効にするには DebugScreen.stop()
• body描画前のエラーは表示できない。

動作環境

IE6、Firefox1.5で動作確認していますが、行番号は正確に出なかったりします。

依存と影響

エラー行を取得するのにXMLHttpRequestを使っています。IEで使う場合はie_xmlhttp.jsを読み込んでください。IE7でいらなくなるはずです。

追加される変数はDebugScreenだけです。他のライブラリに依存も影響もしないように作ってあります。prototypeの拡張等もしていません。

Pluginの作り方

DebugScreen.registerを使います。タイプするのが面倒くさい場合は適当な別名を付けると良いでしょう。いつでも追加できます。同じ名前で登録すると上書きされます。

// モニタのサイズを表示
DebugScreen.register("ScreenSize",function(){
	return screen.width +" x "+ screen.height
});
// 現在表示中のURLを加える
var _debug = DebugScreen.register;
_debug("Location",location.href);

DebugScreen.registerの第一引数にはプラグインの名前。 第二引数にはオブジェクトか関数を指定します。

• 関数の場合は、その関数の実行結果を返します。実行する関数にはファイル名、行番号などが渡されます。詳しくはソースを読んでください。
• オブジェクトが渡された場合、DebugScreen.dumperを使って文字列に変換されます(デフォルトではtoStringメソッドが使われる)。DebugScreen.dumperを上書きすることで任意の形式(例えばJSON)で出力することができます。

仕様

• 外部jsファイルでエラーが起こった場合
  • Firefoxだとjsファイル名を取得してくれます。
  • IEだと常に本体ファイル名を返すみたいです。

• evalでエラーが起こった場合
  • Firefoxだとevalの中での行番号を返します。
  • IEだとevalが呼び出された行の番号を返します。

ライセンス

「Perlと同じ」 もしくは 「彼の日記にコメントをつけてあげてください」 のデュアルライセンス