CSS "Google Chrome" inspector

ブラウザーにはソースを表示させる機能がついていますが、Google Chromeは一歩先行くソース表示機能です。気になるサイトのソースがどのように書かれているか調べるのにもってこいなのと、手がけているサイトのソースを調べるのにも使えるツールです。

Google Chromeをダウンロードしてインストールするだけです。

 

 

検証したいソース上で右クリックをして、「要素を検証」をクリックします。

 

 

Google Chrome inspector ウインドウが開き 「Html」 「CSS」 のソースコードが表示されます。

どの要素にどのようなプロパティ要素が指定されているのかを、解りやすく見ることができます。

要素の検証 (Web Inspector) - 特定のウェブページの要素に関連付けられたソース コード、画像、スクリプトを確認できる Google Chrome の機能です。 － Google Chrome ヘルプ（はじめに: 用語集）

 

 

Google Chrome inspector 上で選択している（Html部分の）要素を変更すると、どのような段組みで作成されているのかをブラウザーと連動して表示してくれます。

 

 

Google Chromeは表示速度は速いです。しかし、お気に入りの整理・表示がいまいちです。

Firefoxは自分でカスタマイズすれば快適な環境が整います。面倒だと思う人にはGoogle Chromeをお勧めします。

 

「Google Chrome: Mac および Linux の早期評価用 Dev リリース」と、発表がありました。

新たな対抗馬となるのでしょうか。

Mac OS X 版 － ダウンロード

Linux 版 － ダウンロード