Firebug Lite 1.2

最新の Firebug Lite

SQLの窓でホスティングする Firebug 1.2 ブックマークレット
Firebug lite 1.2 のコンソールテキストエリアを常に表示させて、少し日本語化

オリジナルでは、テキストエリアのコマンドプロンプトがデフォルトで表示されず、その後の挙動が不安定なので
少し改造して、常に表示させるようにしました。あと少しだけ日本語表示に変えました。

※ このページには直接埋め込んでいますので F12 で確認できます
( IE6 はその後スクロールバーを動かしてみて下さい )

Firebug_lite12_option_2

▼オリジナルのブックマークレッは以下から

ブックマークレットとして「お気に入り」に登録してしまって、
使いたいページで適用してしまう方法です。ブックマークレットは、Firebug lite のサイト
の Firebug Lite というリンクにあります。

Firebug のサイト

以前改造した時は、他のサイトから参照できなかったので( フレームを別にリソースとして用意されていたので )
フレームを動的に作成するようにしたのですが、今回相当元の Firebug に迫る勢いで良くなってました。
そのせいで、相当重いのでデバッグが目的なら旧式のほうがいいのですが、
最新を無視できる状態では無いほどすぐれものになってます( もともとすぐれものですけど )

まず設置は、オリジナルサイトから firebug-lite.js をダウンロードして自分のサイトに設置するだけで良いのですが、
中でオリジナルサイトの CSS と画像を参照しているのでまとめてダウンロードします。

ただ、パッケージ化されていないのでインデックスページから必要な画像と css を一つ一つダウンロードして
一つ場所にまとめてからアップロードします。

その時に CSS の参照先を変更しておくといいと思いますが、後から JavaScript でも変更は可能です。

↓firebug-lite.js

var firebug = {
  version:[1.23,20090506],
  el:{}, 
  env:{ 
    "css":"http://yourdomain/firebug/firebug-lite.css", 
    "debug":true,
    "detectFirebug":true,

以下はソースへの記述方法です。デフォルトで Firebug が表示されるようになってしまっているので
初期設定を行っています。

<script type="text/javascript" src="http://yourdomain.jp/firebug-lite.js"></script>
<script type="text/javascript">
firebug.env.debug = false;
firebug.env.detectFirebug = false;
firebug.env.showIconWhenHidden = false;
// 高さの設定
// firebug.env.height = 200;
</script>

このページに埋め込んでいますので、F12 で起動します。

※ どうも、IE6 ではうまく動かない部分があるようです
※ F12 で表示されない場合は、スクロールバーでスクロールすると出現します
※ 最大化も正しく動作しないようです

IE6 の場合、以下をページの最後に設定する事によって初期表示されている場合はきちんと表示されます

<SCRIPT type="text/javascript">

	var userAgent = window.navigator.userAgent.toLowerCase();
	var appVersion = window.navigator.appVersion.toLowerCase();

	if (userAgent.indexOf("msie") > -1) {
		if (appVersion.indexOf("msie 6.0") > -1) {
			setTimeout( "ie6x()", 500 );
		}
	}

function ie6x() {
	scroll(0,document.body.scrollHeight);
	scroll(0,0);
}
</SCRIPT>