Google浏覽器開發者工具：CSSViewer（一個Css檢視器）

CSSViewer的簡介

CSSViewer是一款可以幫助使用者快速檢視目前的網頁元素的CSS屬性的谷歌浏覽器插件，在Chrome中安裝了CSSViewer插件以後，使用者就可以在設計網頁的時候，快速地模仿網頁中某個元素的表現形式，這對于一些使用公共庫的開發者來說會大大地節約開發時間(尋找api的時間)，使用者隻需要把滑鼠放在元素上就可以快速地檢視該元素的具體CSS屬性。

CSSViewer的開發背景

網頁的開發者在設計一個網頁的時候，如果使用的CSS是一些公共庫，比如jQuery UI，bootstrap等庫的時候，需要大量的公共庫CSS名稱，如果使用者隻是參照API的話，在檢視了大量API會浪費很多時間，如果給使用者一個DEMO的頁面，讓使用者自由檢視該頁面中的元素CSS，就可以讓使用者迅速地模仿和使用這些公共庫，進而達到加快開發速度的目的。

CSSViewer的使用方法

1. 在谷歌浏覽器中安裝CSSViewer插件，并在Chrome的擴充器中啟動CSS檢視器的功能，CSSViewer插件的下載下傳位址可以在本文的下方找到，離線CSSViewer插件的安裝方法可參考： 怎麼在谷歌浏覽器中安裝.crx擴充名的離線Chrome插件？最新谷歌浏覽器離線安裝版可以從這裡下載下傳：http://chromecj.com/chrome/2014-09/177.html。
2. 點選Chrome右上角的CSSViewer插件按鈕，這時候，使用者就可以把滑鼠在網頁中進行浮動，進而找到需要看到的CSS屬性，當使用者浮動到一個元素上的時候，CSSViewer插件會自動以彈出視窗的形式，提醒使用者該元素的詳細CSS内容，包括字型大小、CSS類名、背景顔色、寬度、高度等，如圖所示：

CSSViewer的注意事項

1. CSSViewer檢視器隻可以用來檢視到目前網頁元素的CSS元素屬性，而對于網頁中的Javascript則是無法進行檢視到，有腳本多元素進行CSS影響時，CSSViewer插件也無法檢測到變化。
2. 每次點選Chrome右上角的CSSViewer插件按鈕，才能啟動CSS的觀察模式，再次點選就可以取消。