THE HAM MEDIA BLOG

以前に『意外と知られていない機能が多い！？Firebugの使い方』というエントリーを書いたところ、気づけばビックリなブクマ数がついたりする。

Firebugってかなりのコーダー（デザイナー）とか、Webに関わる人の多くはいれているアドオンのハズ(未調査なので自分の気持です)だけど、SaCSS参加者では使っていないって人が意外にもいたので書いたエントリーでした。そのブクマしている人の数やコメントをみると、やっぱりみんながみんな、使い切れているものでないですよね。

ということで、前回は紹介しきれなかったけど、こんな使い方してるよ〜という自分の使い方を紹介します！

不必要な要素は消してしまおう

前回のおさらいっぽい部分から。

いろいろなサイトをみてまわっていると、時々、「これ邪魔だな」とか思う要素がポッとでてきたりってしませんか？大きいモニタの時はそんなこと特に思わないのですが、小さいモニタを使っていたりすると、時々あったりします。固定配置（position:fixed;）が妙に目立っていたりとか。

そんなサイトを見ているときは、不必要な部分をFirebugを使って消してしまいましょう。

消す必要は全くないけど人身御供参考に@5509のブログ

消したい要素を選択しておいて、Firebugのスタイルでdisplayプロパティを追加！

body > footerにdisplay:none;を追加しただけ

これで邪魔な要素は消えてくれた。（でも、むしろ右の追従ナビのほうが消しry...）

特定の要素のみの属性が無い場合

でも、消してしまいたい要素に、そこだけを特定するようなCSSがついていなかったら、スタイルで新しいプロパティの追加では対応しきれないことがある。無理やりスタイルタブ内でやろうとすると、消したく無い要素も非表示にされてしまうことも・・・

そんな時は直接HTMLにstyle属性を追加してしまいます。

赤枠内の要素のみ適用させたいが、特定のIDやclassが無い状態

特定部分だけつけたくも、このままだとダメ。

そのままCSS変更するとPタグ全体が変化

特定部分以外も、共通部分は全て変更されちゃいます。

では、特定部分のみに適用する方法を。

特定の要素のみにスタイルをつける

「編集」をクリック

HTMLも編集できちゃうんだぜ。

直にstyle属性を追加

直接style属性をつけて、そこでCSSを追加しちゃいます。

ただstyleも手打ちですし、プロパティも手打ちになるから若干面倒。でも確実。

でも、面倒ですよね。ということで、もう少し簡単に特定部分のみにCSSをつける方法。

要素を選択後スタイルタブ内で右クリック

変更をしたい特定個所の要素を選択し、styleタブ内で右クリック「要素のスタイルを変更」をクリック

選択した要素のみに適用されるelement.style

以後element.styleで編集可能

element.styleに追加

特定の要素にstyleを追加する方法を知っておくことで、classやidをつけていないところでも、CSSを付けた場合の確認をすることができます。自分のサイトだけじゃなくて、訪問したサイトなど見やすくする為などにも利用することが可能です。

HTMLの編集を少し掘り下げてみる

前回のエントリーでは紹介していなかったのですが、HTMLの要素を選択できるだけでなく、HTML自体も編集することが可能です。

先程のように、style属性を追加したり、IDやclassの追加や削除、要素自体の追加や属性の追加削除、なんでもできて、しかも即確認することができるのです。

その場で、どのような表示になるのか確認しながらHTMLの修正や加筆ができるので、プチ修正とかによく使っています。見ながらの方が早い時もありますし。

要素を選択して、編集を押すと、選択した部分のみの編集が可能になります。bodyとか選択であれば、中身を一気にいじくることも可能。

選択した部分のみ編集可能に。

例えば別な要素追加なんてことも可能。

試しにdivとかpを追加してみます。

要素の追加も属性の変更でも、なんでもOK。

ちょっとしたタグの修正とかで試してみて、問題がなければそのままエディタにコピーしてしまえばいいのです。

テキストのみの修正、分量の増減時のデザイン確認に便利！

テキストの修正だけであれば、編集ボタンを押さずとも、編集をしたいテキスト部分を直接選択しておくことで、変更可能になります。

これの便利な使いどころは、テキスト量が変化するようなモジュールの作成の場合の時。制作時はテキスト量が少なかった、だけど本番ではテキスト量が半端なく多い！なんて時でも、あらかじめテキストの分量を減らした場合や増やした場合など、これを使えば簡単にチェック可能なのです。

分量が増えたら、変なところで改行された！？とか、アイコンの位置がずれた！？なんて話をよく聞いたりしますしし、ブロックの高さが変化した！？なんてことも。

Firebugを使って増加した場合や減少した場合などを確認する時などで活用してみましょう。

CSSだって直接編集可能

HTMLだけでなく、CSSファイルもFirebugで編集可能です。

CSSタブで、編集したいCSSファイルを選択し、編集

ちょっと注意

ここまで「HTMLが編集できる！」とか「CSSが編集できる！」と書いてきましたが、実際にHTMLファイルを書き換えたり、CSSファイルを直接編集しているわけじゃないので、お間違いないように。

Firebugはエディタの代わりというより、あくまで細かい表示のチェックとか修正チェックとか実験(？)に活用できるものだと思っていてください。

あとは、ここで編集して、問題が無いようならそのままFirebugで編集したソースをコピーして、本番のエディタにはりつけをするという利用方法でもいいと思います。

ただ、一つ要注意。編集とかをあれこれFirebugでやったあとに、リロードしてしまうと、その編集が全部なくなってしまいます。コピーして保存しておくような場合は要注意が必要です。

自分の場合、FirebugでがつがつCSSを編集して、それをコピーしてエディタに貼付けようとかなりがっつりコードを書いた時が一度あるんですが、その後、何を血迷ったのか、無意識にリロードボタン・・・頭の中真っ白になってしまった経験があるので、要注意です（そんなことは他の方はないと思いますが。。。）

何がどのタイミングで読み込まれてるかわかる「接続」タブ

もう一つ、パフォーマンスなどを気にしている人にとっては重要な「接続」タブ。どのタイミングでどのJavaScriptやCSS、画像が読み込まれたのかを確認することができます。

使い方は簡単で、Firebugを起動した状態でページを見るだけ表示されます。Firebugをあとからたちあげても表示されないので、その場合はリロードしましょう。

接続タブ

URLの部分がどのファイルを読み込んだかがわかります。他にも、どのドメインから引っ張ってきたのか、ファイルサイズはどのくらいか、実際に時間はどれくらいかかっているのかを確認することができます。

接続タブのステータス

接続タブで表示される項目に「ステータス」という項目があるのですが、そこは、ファイルが新しく読み込まれたのか、前に訪問したときのをりようしているのか、ファイルが見つからないのかなどなどが数字で表示されます。

ここで、多く見るのは200と304 Not Modifiedと404くらいでしょう。他にもあるとは思いますが、よく見るのはその３つ。

200が新しく読み込みにいって、正常に読み込めたもの。304 Not Modifiedは前に読み込まれたデータをみにいっていて、404がファイルが見つからなかったということをそれぞれ表示しています。

一度読み込んだページをリロードすると、最初は200で表示された部分の多くが304になるのがみられます。

ステータス

ファイルがみつからない時

スーパーリロード

ちなみに、一度読み込んだページを、再度全部読み込みなおしたい場合は、通常のリロードではなく、スーパーリロードを使うと再び全ファイルを新しくみにいきます。ただのリロードですと304表示が多いのですが、スーパーリロードを利用すると200になります。

ちなみに、このスーパーリロードという名称、自分も前の会社にいた際にプログラマさんに教えてもらったのですが、以前SaCSSに参加されたプログラマさん達はみなさん知らなかったようで「スーパーリロード」という単語をだしたとたんに会場がどよめきました。「なにそれ！？」「そんなのあるの！？」と。

ちなみに、スーパーリロードは、MacのFirefoxなどですと通常のリロードがcommand + Rなのですが、それにShiftキーを加えることでスーパーリロードになります。Winもshift + F5だったと思います。

時々、キャッシュが残っているなーという時は、これを利用すると便利です。

画像はマウスオーバーで確認可能

読み込みファイルが画像の場合、接続タブのURLをマウスオーバーするだけで、どの画像が読み込まれたのか確認することができます。

画像は簡単に確認可能

タイムラインの青線と赤線

接続タブのタイムライン部分をみると、青線と赤線が表示されます。

自分も最初はこれが何を表示しているのかわからなかったのですが、単純に「DOMContentLoaded」と「load」のイベントが発生したタイミングでした。

タイムラインの青線と赤線

この違いは、例えばwindow.onload = function(){};で指定した要素とjQueryの$(document).ready(function(){});での違いのように、主にJavaScriptで利用されるイベントの違いです。

それぞれを利用して、どのタイミングで読み込まれているか、ぜひチェックしてみてください。200の時と304の時で、結果が違うかも！？

青線が「DOMContentLoaded」赤線が「load」

ちなみに、タイムラインにマウスをのせると、それぞれ表示がでるのですが、青線部分からと赤線部分からどれくらい経過したのかなんてのも表示されます。

接続タブはこのように、ファイルが問題なくよみこまれているかの確認や、どのタイミングで読み込み開始しているか、どのくらいの時間がかかっているのかなどを確認するのに非常に便利です。最初はそれほど使わないかもしれないですが、パフォーマンスなどを気にする場合などではぜひ活用してください。

今回はここまで

なんだかだらだらと長く書いてしまったような。たくさん書きましたが、ぜひ活用の参考にしてください。

類似エントリーとお礼

なんとTECH.KAYAC.COMでも、前のエントリーが紹介されていて驚いたりしてます。お会いしたことはないですが、@kyo_agoさん、ありがとうございます。

Firebugの意外と知られていない機能紹介（プログラマ向け）

それと、to-Rの@KazumaNishihataさんも、Firebugについてのエントリーを書いていたようなので、そちらもご紹介します。

Firebugで始めるCSSデバッグ

IEなどすべてのブラウザで使えるCSSデバッガー「Firebug Lite」

やっぱりCSSのチェック（デバッグ）をするなら、Firebug必須ですね。

以上、ここ以外での類似エントリーでした。