こんにちは柬理（かんり）@keikanriです。

巷ではよく「どのブラウザが最強なのか」という論争が繰り広げられます。

「Safariが最強よ！」「いややはりChromeだろ！！」「何言ってんのよFirefoxよ！！」「Sleipnirも忘れないであげてください・・・・」なんて事は日常茶飯事の会話と考えてもいい事です。いやネットでよく見ても実際の会話であまり聞いた事はありませんが。

ちなみに私はずっとChrome一択です。「なんで？」っと聞かれても使い始めた理由はみんな使ってたから。あとGoogleのサービスだしまぁ良いんだろう。くらいなイメージでした。

でも最近どんどんChromeの良さに気づいてきました。付き合ってみてはじめて分かるこのCheomeの素晴らしさ。特に数ある便利な拡張機能は最高です。私が使っている拡張機能についてはコチラをご覧ください。

そして今回ご紹介する「要素の検証」もChromeを手放せない要因の1つです。

「他のブラウザでも同じ機能あるよ！！」ってご意見もあるかもしれませんが、そんな事は知ったこっちゃあありません！！だって先にChromeを使い出したんだ！Chrome「要素の検証」で十分です。

これは恐らくWebデザイナーなどWebに精通する人には当たり前に使われている機能かもしれませんが、私の様なHTMLやCSSに疎い初心者にも非常に有用な機能です。

ではその機能の1部をご紹介します。

＜最高！！コードを直接修正して効果が直接見れちゃう＞

Chrome「要素の検証」を使いたい時は簡単です。任意の箇所（できるだけ要素を確認した箇所がいいでしょう」で右クリックし、「要素の検証」を選択します。

以下の様な画面が出現します。左側の①がデベロッパーツールで

・Elements（HTML・CSSの確認と編集）
・Resources（ネットワークの監視）
・Scripts（JavaScriptのデバッグ）
・Profiles（JavaScriptのパフォーマンスチェック）
・Storage（Cookie, localStorageの確認・編集）
・Timeline（レンダリングを含めたパフォーマンスチェック）
・Audits（YSlowのようなパフォーマンスチェックツール）
・Console（JavaScriptのコマンドラインツール）

といった機能が活用できます。右側の②がHTML・CSSプロパティビューで

・Computed Style（フォーカスを当てたHTMLタグに適用されているスタイルを全て表示）
・Style（マウスを合わせたところのスタイルが表示される）
・Metrics（要素の位置関係（margin，padding，border，width，height，top，leftなど）を確認）
・Properties（要素が継承するコンストラクタとその要素自身のプロパティを確認）
・Event Listeners（要素に設定されたイベントを確認）

っといった機能がそれぞれ活用できます。尚、私は基本まだElementsとStyleくらいしか活用しておりません。