Firebug は、Web ページの要素を検査し、Web ページをデバッグおよび開発するためのクールなツールを備えた Firefox アドオンです。
他のブラウザ用に同様のツールを開発するのは大変かもしれませんが、誰もが好みのブラウザを持っていることを考えると、Firebug を他のブラウザでも動作させることができれば、大きな助けになるでしょう。
そこで、Firebug Lite があなたのニーズを解決します。 Firebug Lite は Firebug の簡易版ですが、同様のオプションや機能を維持したまま、IE、Opera、Chrome、Safari、iPad、iPhone で使用することができます。
10 Must-have iPad Apps for Designers (2018)
Webデザイナーは、常に多くのことを抱えています。 彼らは、コンセプトを考えたり、ピッチ…続きを読む
Firebug LiteをOpera、Safari & Chrome
Firebug Liteでは、インストールの必要はありません。 Java Scriptで書かれているので、Firebug Liteのリンクをブックマークしておけば、すぐにページを閲覧することができます。
Firebug Lite
Chromeブラウザを使用している場合、ブックマークバーが表示されていれば、ブックマークは以下のように表示されます。
以上で、Firebug Liteが必要なときに動作するようになります。
Firebug Lite を Opera、Safari & Chrome
これで、Firebug Lite を使って実質的にあらゆる Web ページを検査できるようになりました。
Web ページが読み込まれたら、先ほど保存した Firebug Lite のブックマークをクリックすると、Web ページの下部にコンソルボックスが表示されます。
クローズアップすると、ページの左下にこのように表示されます。
さて、多くの行の始点に(+)と(-)がついているのがわかります。 (+)は、1行のhtmlの下にさらに多くの行が閉じられていることを意味しており、その行をハイライトすると、それがページのどの部分を表しているかがわかります。
しかし、ウェブページ自体にあるテキストや写真、リンクなどの要素が表しているラインを簡単に見つけたい場合は、「検査」ボタンをクリックします。
これで、ウェブページ上で利用可能な要素の任意の部分にマウスカーソルを合わせると、htmlのラインがハイライトされます。
iPadやiPhoneにFirebug Liteをインストールする
ブックマークレットは、iPadやiPhoneとは相性がよくありません。
- iPadやiPhoneでこのページをブックマークします。
- ブックマークの名前を「Firebug」にします。
- 以下のスクリプトをすべて選択してコピーします
javascript:(function(F,i,r,e,b,u,g,L,I,T,E){if(F.getElementById(b))return;E=F&&F.documentElement.namespaceURI;E=E?F(E,'script'):F('script');E('id',b);E('src',I+g+T);E(b,u);(F('head')||F('body')).appendChild(E);E=new%20Image;E('src',I+L);})(document,'createElement','setAttribute','getElementsByTagName','FirebugLite','4','firebug-lite.js','releases/lite/latest/skin/xp/sprite.png','https://getfirebug.com/','#startOpened'); - ブックマークオプションに移動し、「編集」を押します。
- 元のURLを削除し、ブックマークレットを貼り付けます。
- キーボードで「完了」を選択します。
- さて、任意のウェブサイトを開いて「Firebug」のブックマークを選択してみると、iPadの画面下にFirebugが機能していることが確認できます。
結論
Firebug Lite は、素早くページを点検するのに十分な機能を備えています。 html、css、およびウェブページを構築するために使用されたあらゆるスクリプトを表示することができます。 Chrome には独自の Web Developer 拡張機能がありますが、Firebug Lite はその期待をはるかに裏切りません。