上記の機能の中から、今回は代表的なもの4つを取り上げ、簡単にご紹介します。 ページインスペクタ 開発ツールで必要とされる機能といえば、まずDOMのインスペクタです。「インスペクタ」と書かれたタブをクリックすることで、表示できます。 DOMツリーの表示、適用されているCSSの表示、計算済みの値の一覧といった基本的なことはもちろんできます。ボックスの幅や高さ、マージンといったサイズに関する情報は「ボックスモデル」として確認できます。ボックスモデルは開発ツールの中で見ることもできます。また描画されたページにオーバレイする形でも表示されます(2014年5月の時点ではベータ版で利用可能)。 使用されているフォントや、色が実際に目で見て確認できるというのも、細かいことながら便利な機能です。色サンプルをクリックすることで、カラーピッカーが表示されます。カラーピッカーで選んだ色が、ページの描画結果へ動的に
![Firebugだけじゃないぞ、Firefoxの開発ツール入門](https://cdn-ak-scissors.b.st-hatena.com/image/square/602d603161a15f25175c7fd95da8ce87251faba2/height=288;version=1;width=512/https%3A%2F%2Fhtml5experts.jp%2Fwp-content%2Fuploads%2F2014%2F05%2Fdevtool1.png)