Firebug Lite をブックマークレット化しました
ご存知の方も多いかと思いますが、先日 Firefox 用 Web 開発ツールの代表格 Firebug の 1.0beta がリリースされました。それはそれで嬉しいニュースですが、さらに素晴らしいことに機能限定(というかログ表示とコンソールのみ ^^;)ながら Firefox 以外のブラウザーでも動作する Firebug Lite も同時に公開されました。 Opera や IE6 でも Firebug 用のログ表示や JavaScript コンソールの機能が利用できます。 Firefox 上で開発したスクリプトを Opera や IE で動作確認する際にとても便利ですね。
ただ、これを利用するためには、対象のページにあらかじめ Firebug Lite のスクリプトを埋め込んでおかねばなりません。これはちょっと面倒くさいですし、自分のページ以外で使いたいこともありますよね。そこで、ちょこちょこっと改造してブックマークレットとして動作するようにしてみました。これで Firebug Lite がさらに手軽に使えるようになります。 Firebug Lite に興味はあるけど、ちょっと面倒くさそうだと思っていた方、ぜひお試しください!
使ってみる
それでは、さっそく使い方をご紹介します。といっても、単に以下のリンクをブックマークして実行するだけです。とりあえずこのページで試すなら、リンクをクリックするだけでも OK です。 Opera 9, Firefox 2.0, IE6, IE7 で動作を確認しています。
そして、 F12 か Ctrl+Shift+L を押してください。画面下部にウインドウが開いたと思います(IE6 では画面下部でなくページの最下部になるようです)。これが Firebug Lite のログ表示ウインドウです。ページにログ出力用の関数呼び出しが埋め込まれていれば、ここにログが表示されます。また、最下行のテキストボックスは JavaScript コマンドラインになっていて、前述のログ出力用関数やコマンドライン用関数を含む任意の JavaScript が実行できます。試しに "console.info('Hello!')" と入力して Enter を押してみてください。ログウインドウに "Hello!" と表示されると思います。今のところはこれら以外の Firebug の機能は実装されていないようです。将来的にもっと拡張されるといいですね。
追記:
以下のページにコマンドラインで使える拡張関数の使い方が紹介されていました。とても参考になるので、ぜひご参照ください。
http://d.hatena.ne.jp/lurker/20060801/1154441368
上記のブックマークレットは、以下の変更を施した firebug.js を動的に生成した SCRIPT タグで読み込んでいるだけです。
- firebug.html の内容を文字列として firebug.js に埋め込み、 IFRAME に document.write で流し込むように変更。
- ファイルを Google Page Creator に保存する都合で、見分けやすくするためにアイコンのファイル名を変更。
- Opera できちんと動くように、 z-index の値を小さめ(65536)に変更。
- こちらの記事のアイディアを参考にして、改行が反映されるように writeRow 関数で生成するタグを pre に変更。ただし、 IE では効果がないようです(謎)。
さらに、スクリプト自体は User JavaScript としても動作します。 Opera でしか動作確認していませんが。こちらの JavaScript ファイルを "firebug.user.js" という名前で保存し、 Opera の User JavaScript ディレクトリに保存してください。詳細な手順は、 TEXTAREA_Replace.user.js の記事の「User JavaScript のインストール」を参照してください。
問題点・注意点
- ブックマークレットを実行する以前に出力されたログは表示できません。
- ページによっては正常に動作しません。とくに IE6 では不安定なようです。
- スクリプトのライセンスは元の Firebug Lite に準じます。こちらのページによると MPL/GPL/LGPL のトライライセンスということです。
- このスクリプトは歩行者が勝手に改造したものなので、その動作に関して原作者である Joe Hewitt 氏に問い合わせることなどはお控えください。ご質問などは、私が可能な範囲でサポートします。
- このブックマークレットは完全に未保証です。自己責任でお使いください。
詳しくはこちらの記事をどうぞ!
この記事にコメントする