Home > ブラウザ > Firefoxのアドオン（拡張機能）「Firebug」でサイト構造を楽に確認

Newer
Older

Firefoxのアドオン（拡張機能）「Firebug」でサイト構造を楽に確認

　　　　　　

Posted by: WebPersons編集部
2008年4月16日 11:53
ブラウザ

Tweet

サイトのソースを見る時、どのように見ていますか？ブラウザの「ソースを表示」から開いていますか？　cssの構造を追いかける時や背景画像のパスを知りたい時など、普通にソースを追って見ていくのは、イヤになりませんか？

今回のアドオンは、手間をかけずにソース分析ができ、なおかつ１つのブラウザウィンドウ内で作業ができてしまうという優れ物。「Firebug（ファイヤーバグ）」というアドオンです。
開発の仕事や、クリエイティブの仕事をされている方にとっては定番のアドオンですね。

アドオンをインストールすると、右下に以下のような緑のボタンが追加されます。
このボタンを押すと、ソースを開けます。

このようにウィンドウ内でソースウィンドウが展開されます。

HTML、CSS、スクリプトなどのメニューが並んでいます。

ソース上のタグにカーソルを合わせると、その部分がブラウザ上で反転しますので、どのタグがどの範囲なのかが一目瞭然です。

CSSもそのページにリンクを張っているCSSは全て表示することが可能です。このように一覧として表示されますので、見たいCSSを選択するとソースを見れます。

Java scriptについても同様です。一覧から選択して見ることが可能です。

また、このアドオンの最大の特徴として、ブラウザ上で編集してそのプレビューを見ることができる機能がついています。いちいちローカルに戻って編集する必要が無くなります。

編集ボタンを押すと、以下の様にソース画面が編集可能になります。
実際に編集してみましょう。Web Personsのトップページにある文言「 Web Personsは、インターネットサービスに関わる担当者のための情報を紹介するブログです。」を変更してみます。

このようにソースに変更を加えると、リアルタイムにブラウザで表示してくれます。
ちょっと変更したらどうなるのか見てみたい。というような時に使えます。

注意点としては、変更部分は保存されないので更新ボタンなど押してしまうと全て元に戻ってしまうことです。

この他にも画像ごとの接続状況なども見られることができますし、ソースにエラーがある場合知らせてくれたりします。非常に便利なアドオンなので、インストールされて無い方はこの機会にいかがでしょうか。

ダウンロードはこちらから→「Firebug」

関連エントリー

Trackbacks:0

TrackBack URL for this entry: http://webpersons.jp/mt/mt-tb.cgi/443
Listed below are links to weblogs that reference: Firefoxのアドオン（拡張機能）「Firebug」でサイト構造を楽に確認 from Web Persons [ウェブパーソンズ]｜Web担当者向け情報サイト

Home > ブラウザ > Firefoxのアドオン（拡張機能）「Firebug」でサイト構造を楽に確認

Calendar

カテゴリー

月別リスト

サイト内検索

最近のエントリー

注目のキーワード

Feeds

RSS
Atom

ページTOPへ