Add-on - Firebug

人のページのCSSの内容もすぐみれる！

第４回授業で授業日記ページのスタイルシートの編集を課題に出しましたが、取りかかりはじめている人もちらほら確認できます。他の人の授業日記を見てみたらすごく見栄えが変わったみだいだけど、どんなスタイルシートを書いてるの？と知りたくなりますよね。そういうとき、「ページのソース」からlink要素でどの外部スタイルシートファイルを指定してあるのか辿ってそのURLを入力すればいいのですが、毎回毎回それではちと面倒です。
そこで、表示中のページのHTMLソースやCSSの内容をその場で効率的にみることができるアドオン「Firebug」をご紹介します。
https://addons.mozilla.org/ja/firefox/addon/1843
授業ポータルでFirebugを使用した一例をスクリーンショットで掲載します。ここではページを上下に分割し、ページ下左部分に表示中のウェブページの各要素（HTML）、右部分にはその要素に対するスタイル（CSS）が表示されています。
ほかにも、表示中のページのHTMLソースやスタイルシートの内容を新規タブで開いたりすることもでき、使いだしたらやめられない大変便利なアドオンです。