作者：Klaus Komenda ， 翻譯：butwho
英文原文：Collection of Web Developer Tools, per Browser
原文發現：譯言-Collection of Web Developer Tools for major browsers
中文譯文：Web開發工具大集合——每個瀏覽器都有份的！
網站開發者的一大苦惱，就是有太多的瀏覽器要應付。幸虧世界上有一些聰明的人，能夠研究出一大些方便編輯和調試網頁代碼的好工具。不過，要從不計其 數的小工具裏面找出合適的可真不容易。這篇文章列出了幾個最好用的web開發工具，並指導你快速地激活、安裝、使用他們。 下面是工具列表：
| 瀏覽器 | 可用的工具 (括號中是應用範圍) |
|---|---|
| Firefox |
|
| IE6, IE7 |
|
| Opera |
|
| Safari |
|
Web Developer Toolbar
Firefox上開發和調試web站點的不二之選。Web developer toolbar包含了一系列工具，從cookie管理到CSS調試，從導航線到屏幕標尺，功能簡直是多得說不完。 Web開發工具欄 下載地址：http://chrispederick.com/work/web-developer/
Firebug
螢火蟲 是Firefox上數一數二的好擴展，可作爲web developer toolbar的補充工具。你可以用Firebug在線檢查、監控、編輯網頁上的HTML、CSS、JavaScript代碼。他還提供一個腳本控制檯，讓JS編輯編的更簡單。控制檯對象包含了一大堆選項，允許你輸出代碼到控制檯然後進行調試。Michael Sync提供一個更高級的操作指南，它可以知道你詳盡地設置Firebug的選項。另外，Firebug上有一個帶寬監視器，能讓你清楚地看到某些代碼佔了多少帶寬。 Firebug 下載地址：http://www.getfirebug.com/
Modify Headers
Modify headers是一個可以添加、修改和過濾HTTP請求頭的工具。你可以用這個工具冒充成移動設備登陸網站，它甚至可以僞造一個Ajax請求。 Modify Headers 下載地址：http://modifyheaders.mozdev.org/
Poster
你可以通過Poster擴展與Web服務或者其他web資源進行交互，它能讓你發送HTTP請求、設置請求實體和內容格式。這可以讓你檢測Web交互的效果。 Poster下載地址：http://code.google.com/p/poster-extension/
XRAY & MRI
X光和核磁共振成像是可以應用在IE6+、Webkit和Mozilla爲基礎的瀏覽器上的bookmarklets（嘛叫Bookmarklets），包括Safari, Firefox, Camino和Mozilla. Xray 能幫你檢測盒模型裏的每一個元素，MRI可以測試和應用選擇器。 XRay下載地址：http://www.westciv.com/xray/index.html MRI下載地址：http://www.westciv.com/mri/
Firefox Accessibility Extension
Mozilla/Firefox無障礙擴展讓殘疾人士方便地瀏覽網頁內容。開發人員可以用這個擴展檢查他們的結構和樣式的網頁易讀性。 Firefox Accessibility Extension下載地址：http://firefox.cita.uiuc.edu/
IE Developer Toolbar
微軟的英特網探索者開發工具條是IE上最好的DOM檢查和CSS調試工具。由於IE具有高市場佔有率而又在整個渲染模型上充滿缺陷（比如臭名昭著的hasLayout邊距重疊BUG），調試IE是web開發必不可少的步驟——沒有這個工具條，IE的調試將會成爲一場噩夢。雖然IE Developer Toolbar要比Firebug稍微弱智一點，不過他至少能幫你馴服IE這頭怪獸。 IE Developer Toolbar下載地址：http://www.microsoft.com/downlo…aylang=en
Web Accessibility Toolbar
The Web Accessibility Toolbar（ href="http://www.paciellogroup.com/resources/wat-about.html">Opera版）可 以檢查網站的易讀性（當然是可能的易讀性，總不能指望電腦能像人一樣讀網頁吧？）此外，這個工具還提供其他功能，比如檢查死鏈接和改變瀏覽框大小等等。 The Web Accessibility Toolbar下載地址:http://www.visionaustralia.org.au/ais/toolbar/
Visual Web Developer Express Edition
IE開發工具欄木有JavaScript調試功能，你得找個別的工具搞JS。你可以用Microsoft Script Debugger（下面將提到）或者免費下載這個重量級的Visual Web Developer Express Edition。Bernie那兒有這個工具的教程（當 然是英文的），它詳盡地告訴你如何用這個工具調試JavaScript代碼。 你也可以用Microsoft Script Editor 編輯 JS代碼——不幸的是，這並不是個免費工具（在國內，這似乎不是個大問題）。他被捆綁在Office 2003安裝包裏，而微軟又不提供單獨下載。正因爲如此，這兒就不多提它了。Jonathan Boutelle提供了這個工具的一些教程。
Microsoft Script Debugger
你可以在微軟網站上免費下載這個工具，MSDN上也有一個相關文檔。這個工具比Visual Web Developer Express Edition弱很多，不過仍然能處理一些IE上那些讓人摸不着頭腦的提示，諸如“缺乏對象”一類。Jake Howlett 有個《如何使用Microsoft Script Debugger調試JavaScript》的教程。爲安全起見，安裝腳本調試器之後最好要重新啓動一下你的電腦。 Microsoft Script Debugger下載地址：http://www.microsoft.com/do..laylang=en
Opera developer tools
Opera有兩個開發工具：Opera 開發控制檯(Opera Developer Console)和Dom快照工具(DOM Snapshot)。從截圖來看，他們都很有前途。這個工具算是Opera 9以上版本用的bookmarklets。不過我沒能讓他們在Opera 9.10上成功運作。 Opera開發工具下載地址：http://dev.opera.com/tools/
Opera Error Console
錯誤控制檯是Opera的一個內置功能，可以在工具-高級-錯誤控制檯中激活這個它。它能彈窗顯示當前網頁上的錯誤或者警告信息，或者你可以過濾某種類型的信息，比如HTML、CSS、XML或者Javascript警告。你可以在opera網站找到錯誤控制檯的詳細教程。
Safari Debug Menu
Safari的debug能力很弱，但至少顯示一個Javascript控制檯能讓Javascript調試變得簡單點兒（這與Firebug和Opera錯誤控制檯類似）。在Apple網站的開發部門，有一個常見問題文檔說明如何啓用隱藏的調試菜單。 在Mac OS X下，打開一個終端然後輸入：
defaults write com.apple.Safari IncludeDebugMenu 1在windows下，用文本編輯器打開Preferences.plist，這個文件的位置往往是C:Documents and
SettingsUSERNAMEApplication DataApple
ComputerSafariPreferences.plist，在文件最後添加： <key>IncludeDebugMenu</key> <true/> 在Safari 1.3及以上版本，你可以進入Debug菜單然後鉤選“記錄Javascript意外”的選項。然後選擇“顯示JavaScript Console”。這就可以用控制檯記錄Javascript錯誤。
Web Inspector
要在Mac OS上激活Safari Web Inspector (Safari 3及以上可用)，打開終端窗口然後輸入
defaults write com.apple.Safari WebKitDeveloperExtras -bool true在windows中，打開Documents and Settings*你的用戶名*Application DataApple ComputerSafariWebKitPreferences.plist，添加以下內容：
<key>WebKitDeveloperExtras</key>
<true/>然後退出Safari並重新打開，你將在菜單中看到一個“檢查元素”選項，就是它了！
