Web Developer

會裝 Firefox 上的 Web Developer，其實是因為 布丁大長輩 深情推薦，裝了以後也不知道幹嘛 XD

直到這陣子寫 HTML code 寫到受不了，決定來看 Web Developer 有什麼功能可以用，才發現這個 Extension 是個神兵利器 XD

第一個，看某個物件的屬性。

在畫面上按下 Ctrl-Shift-F (或是用 Toolbar 上的 Information，選 Display Element Information) 之後，移動游標，在左上角就會出現這個區塊的各種屬性，像是字體資料 (逛網頁時看到喜歡的字型不用再翻 HTML 與 CSS)、物件的巢狀架構 (想要變更 CSS 時超方便，在找 CSS 靈異現象時也超方便)：

第二個，看 Javascript 產生出來的 HTML code。

有時候會透過 Javascript 產生一些 code，但產生出來的 HTML 在最簡單的 View Source (即 Ctrl-U 所跳出來的視窗) 裡面看不到。而 Web Developer 提供了 View Generated Source 的功能：

第三個，看網站的結構性。

用 View Topographic Information (在 Information 下) 可以看出來網站的結構性，舉布丁大長輩的網站當範例，上面這張是原來的頁面，而下面這張是點選 View Topographic Information 後的頁面。

下面那張裡，預設是黑色，每多一層就變白一點。布丁大長輩的網頁 算是比較乾淨的網頁，如果你拿 blog.yam.com 的首頁抓出來看，你會看到在奇怪的地方多出一堆奇怪的白色框框 XD：

當然，還有很多很好用的功能，有空的時候可以隨便抓兩個網頁對照看看，其實會利用 Web Developer 學到不少東西 (以及對於網頁設計的感覺)。