Firebugと言えばWeb制作には書かせないFirefoxのプラグインですが、IEやSafariでは使えないのが残念な所。むしろクロスブラウザ対応で一番問題になるのがIEですからね。IEでもFirebugに近いツールでInternet Explorer Developer Toolbarがありますが、Firebugと比較するとどうも使い勝手がよくない。
そしたらFirefox以外でも使えるFirebugの軽量化版Firebug Liteというのがあったのでその使用方法をメモっておきます。
LiteというだけあってFirebugのJavascriptのデバッグ機能等はありませんが、HTMLやCSSの確認や一時的な変更・プレビュー機能はあります。
何より素晴らしいのがJavascriptで動作するためほとんどのブラウザで動作するという事。ブラボー、おぉ、ブラボーーー！！
まずはFirebug Liteの公式サイトに行きます。
ページ中腹にある Debug channel にあるFirebug Lite debugというリンクを右クリックしてリンクをブックマークに登録します。Safariではリンク先がjsファイルだとブックマークに追加がないのでリンク先をコピーして、ページ自体を追加した後にブックマークの編集でUrlにコピーしたリンクを貼付けて下さい。
もっともSafariだとデフォルトで備わっている「要素の詳細を表示」がFirebug Liteに近い機能があるのでいらないと言えばいらないのですが（笑
あとは確認したいページで登録したブックマークを実行するとページ下部におなじみのFirebugのウィンドウが表示されます。操作方法もほとんど同じなのでFirebugに慣れている人なら見ればわかると思います。
cssの元データを編集することができないので一時的な変更とプレビューがメインになってしまいますが、それでも色んなブラウザでおなじみのツールを使ってCSSデバッグできるというのは作業効率も上がるので非常にありがたいですね。
{if(F.getElementById(b))return;E=F[i+'NS']&&F.documentElement.namespaceURI;E=E?F[i+'NS'](E,'script'):F[i]('script');E[r]('id',b);E[r]('src',I+g+T);E[r](b,u);(F[e]('head')[0]||F[e]('body')[0]).appendChild(E);E=new%20Image;E[r]('src',I+L);})(document,'createElement','setAttribute','getElementsByTagName','FirebugLite','4','firebug-lite-debug.js','releases/lite/debug/skin/xp/sprite.png','https://getfirebug.com/','#startOpened');){kind=link}
コメントを残す