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


まず設置は、オリジナルサイトから 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>
  




  使用方法



コマンドラインで直接 JavaScript を入力して実行または変数、オブジェクトの内容を参照します。

まず、id を持つエレメント関しては、直接その名前を記述すると内容が表示されます。
( 要素を含む HTML エレメント表示等 )

Firebug1


オブシェクトの内容を一覧で見たい場合は、console.dir( オブジェクト ) を実行します

Firebug1


もし、そのページで既に console という名前空間が定義済みの場合は、以下の書式で実行可能です

Firebug1


firebug.inspect( オブジェクト ) で、HTML 上の位置を確認できます

Firebug1


メソッドやステートメントはそのまま実行されます

Firebug1


上矢印で以前に実行したコマンドを履歴から使えます。










  infoboard   管理者用   





フリーフォントWEBサービス
SQLの窓WEBサービス

SQLの窓フリーソフト

素材

一般WEBツールリンク

SQLの窓

フリーソフト

JSライブラリ