ソースコードがリアルタイムで確認できる！作業効率が格段に上がるFirebugの使い方

ホームページを運営していると、季節のイベントなどに合わせてデザインや配色を若干変えるケースがあります。
この場合ソースコードを書き直す必要がありますが、ページ内のどの要素を書き換えるのかなど、ソースコードのみを見ていてもなかなか把握しにくい場合があります。

今回は、ページを見ながらリアルタイムでソースコードを確認できる「Firebug」の使い方をご紹介します。
知っているだけで格段に作業効率が上がりますので、デザイナーやエンジニアの方は特に一読しておくことをオススメします。

Firebugとは

[インストールはこちらから(Google Chrome用です)]（2020年8月13日時点でページが存在しないためリンクを削除しました）

Firebugとは、ホームページのHTMLやCSS、JavaScriptなどを編集したり、プロファイラーなどを解析するなど、さまざまな開発ツールとして活用できるGoogle Chrome・Firefoxの拡張機能です。
使用料金は無料です。

Firebugを使用する最大のメリットは、リアルタイム性です。
HTML、CSSの内容や表示はもちろん、JavaScriptのコードからオブジェクトの中身までリアルタイムで監視することができます。

ただし、ホームページの改ざん防止のために、確認ができるだけで変更内容がそのまま適応されるわけではありませんので注意してください。
変更箇所・変更内容が決まったら、自社のホームページのソースコード部分での変更が必要となります。

使い方

step1.

まず、Firebugをインストールします。
先にご紹介したURLからインストール可能です。

step2.

インストールが完了すると、ブラウザの右上にアイコンが追加されます(画像赤枠部分)ので、確認してください。

step3.

追加されたアイコンをクリックします。
すると画面したからパネルが出ますので、パネルの左上の「Inspect」(画像赤枠部分)をクリックしてください。

step4.

すると、ブラウザの各要素を選択することが可能になります。
下のパネルには、マウスオーバーしている要素を示すHTMLが青いマーカーで示されます。
そのままではマウスの動きに合わせて下のパネルのコードも動いでしまうので、ひとつの要素に注目したい場合は該当の要素をクリックして選択してください。

step5.

Firebugでは、表示しているページで使用されているフォントやカラーなども同時に確認することができます。
下のパネルの向かって右側に表示されています(画像赤枠部分)。

これでページ内のソースコードの確認をして、変更点を決定したら実際のソースコードを編集してください。
Firebugでの確認が終了したら、最初にクリックしたアイコンを再度クリックすると、下のパネルが閉じます。