2009年6月11日木曜日

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 版 - ダウンロード

 

 

0 件のコメント:

コメントを投稿