Web Developer ToolBox, Vol 1

網頁開發工具箱，Vol 1 工具篇

• 必需品: Firefox
  "No firefox makes your life difficult"
  為的當然是又快又符合標準(Web Standard)的網頁Rendering，以及其強大的Add-ons...
  
  1. Firebug:
     集Javascript Debugger (Profiler Breakpoint、watch、stacktrace)、Browser Console(顯示Ajax Request及可以真接輸入Javascript當成command execute)、Net Meter(time以及Request/Response header)、HTML/CSS Viewer + Editor (會顯示Browser Generated HTML、Browser Computed CSS、Layout、Element DOM，及Real time update)、Element Inspector (用Mouse選取元素以顯示HTML source+CSS+DOM)，DOM Inspector(顯示Global variable/Object的properties，Custom/Browser DOM)，加上那堆Extension (YSlow、FireRainbow、Firescope、FirePHP、FirePython)
  2. Web Developer:
     這個要用長放在工具列才特別有用。
     工具列最右邊會顯示Rendering Mode (Quirk / Standard / Almost Standard)，左邊是一堆Tool的Menu
     最好用是Miscellaneous的Clear Private Data - Cache、Display Ruler、Guide，以及Tool的Validate local CSS 、local HTML(直接把Harddisk上的HTML/CSS丟上W3C Validator，超好用吧?)
     此外CSS Edit和HTML Edit比Firebug有更大彈性(因為是完全的Text Editing)
     還用Outline (根據Tag Name/預設條件來畫出HTML元素的border)和Resize(可惜這個不能超過系統的螢幕解像度)
  3. ColorZilla:
     簡稱: 網頁色彩工具箱
     Status bar右下會多了個Eyedropper，右click是colorzilla的menu，左click是eyedropper menu提供色彩選擇器、色彩抽取器(Eyedropper)及色板分析(DOM Color Analyzer)，不過只針對DOM裡出現過的color code，圖片沒軋
  4. X-ray:
     懶人的Code Viewer，只要一按X-ray html馬上出現－就好像View Source，不過看起來像下面這樣:
     
• 其他Browser也有Debugger/Firebug-like的工具
  
  
  1. Opera: Dragonfly
     9.5+ Browser內置
     和Firebug有90%相似，但Opera 9 Release附送的Alpha 3 Javascript Debugger的功能較弱，下一版會有改善
     [新版詳細功能介紹]
  2. IE 7/6: Web Developer Toolbar+Microsoft Script Debugger; IE 8: Developer Tools
     IE 7/6的要另外自行下載(死
     IE 7及6的Developer Toolbar很陽春，只能對HTML attribute做手腳，IE 8內置的Developer Tools版本會比較像Firebug [Developer Tools詳細介紹]
     至於Microsoft Script Debugger會很像Visual Studio的Debugger，但不能顯示this的內容(&@^#*!...)
     使用前需更改Internet Option，把Disable Javascript Debugging的都untick了 [教學: 中文, English ]
     
     p.s. M$ Script Debugger可以從Visual Web Developer[教學]及Office XP~2007中安裝(2003之前的版本是預設安裝，2007不在預設安裝之內，要另外裝 [MSE @ Office 2007])
     如果完全不想找非官方下載點請用IE App Compat VHD
  3. Safari: WebInspector
     3.1以後Browser內置，在Preference的Advance Tab可以打開 [圖文教學]，功能又是一堆，不過極像Firebug的是Nightly Build，3.1 Release那個欠很多東西...順帶一提，連User-Agent偽裝功能也有XD [新版詳細功能介紹]
     *3.1的好像有window.console.log可用...

最後是A list apart (ALA)的超綜合入門教學...Advanced Debugging with JavaScript