Web Developer Toolbar 10個鮮為人知的功能

Smiley Cat今天的10 Things You May Not Know About the Web Developer Toolbar很有可讀性，看完後真有「以後用不到這麼好的套件怎麼辦」的感覺。以下是我針對這篇文章所做的摘譯（粗體為我所加），也歡迎同好們的分享與回應：

1. Miscellaneous – Display Line Guides

想要快速檢測網頁中的某些元素是否彼此對齊，這個功能可以讓你隨心所欲地新增垂直或水平準線。

2. Images – View Image Information

可以一次在分頁中列出網頁中所有圖片（包括背景圖）的路徑、尺寸和檔案大小。

3. Information – View Color Information

在分頁中以色碼和色塊展示網頁中所有的顏色。

4. Information – Display Element Information

使用組合鍵Ctrl+Shift+F可以啟動「檢視元素資訊」的功能，接著點選任一元素，即可得知其class或id名稱、位置，以及與其相關的上下階層元素名稱。

5. Information – View Page Information

會彈出視窗顯示頁面的各類資訊，直接點選工具列右側的綠色勾勾亦可啟動此功能。

6. Forms – Show Passwords

直接顯示出表單內密碼欄位（通常以星號顯示）的文字。

7. Forms – Populate Form Fields

想要測試網頁表單是否正常運作，可利用此功能自動在各欄位填入資訊，若要一併測試表單可否正確寄出，可由「Options – Options – Miscellaneous」內填入自己的Email，讓WDT在表單中填入正確的信箱地址。

8. Miscellaneous – Small Screen Rendering

檢視你的網頁在行動裝置如PDA或手機上面看起來的樣子。起碼可以知道自己的sidebar是否出現在內文之上。

9. Miscellaneous > Visited Links – Mark All Links Unvisited

我習慣在擷取網頁圖片之前，將所有的連結改為未造訪過的狀態，有了這個功能就不必每次都去清除歷史紀錄了。

10. Tools – View Speed Report

連結到Web Page Analyzer產生一份網頁速度的檢測報告，並提供開發人員改良建議。

11. Bonus: Miscellaneous – Edit HTML

大家都知道WDT可以即時預覽網頁的CSS修改效果，別忘了它同時也可以預覽HTML修改後的效果。

可能的相關文章：

• Dreamweaver 8 的新功能
• Firefox擴充套件：Web Developer 1.0
• Bookmarklet：顯示表單密碼欄位的內容
• 10個常見的網站購物車設計問題

這篇文章發表於 July 12th, 2007 ，分類為：Webdev。你可以訂閱這篇文章的回應：RSS 2.0，也歡迎發表你的意見，或者從你的網站 Trackback 過來。