因爲要對樣式和模板進行一些比較大的調整，可是呢，家裏又上不了網。所以Firebug家裏好像也用不成。正在找可以獨立安裝的Firebug版本，找到這個了，呵，可以用來參考一下。
網站開發者的一大苦惱，就是有太多的瀏覽器要應付。幸虧世界上有一些聰明的人，能夠研究出一大些方便編輯和調試網頁代碼的好工具。不過，要從不計其數的小工具裏面找出合適的可真不容易。這篇文章列出了幾個最好用的web開發工具，並指導你快速地激活、安裝、使用他們。
下面是工具列表：
瀏覽器可用的工具 (括號中是應用範圍)
FirefoxWeb Developer Toolbar (多用途)
Firebug (DOM, CSS, JavaScript, 流量)
Modify Headers (Ajax)
Poster (Ajax)
XRAY, MRI (CSS)
Firefox Accessibility Extension
LiveHTTPHeaders
IE6, IE7IE Developer Toolbar (DOM, CSS)
Web Accessibility Toolbar (可讀性及更多功能)
XRAY, MRI (CSS)
Visual Web Developer Express Edition (JavaScript)
Microsoft Script Debugger (JavaScript)
OperaOpera developer tools (DOM, CSS, JavaScript)
Opera Error Console (HTML, CSS, JavaScript)
XRAY, MRI (CSS)
Web Accessibility Toolbar (可讀性及更多功能)
SafariSafari Debug Menu (JavaScript)
XRAY, MRI (CSS)
Web Inspector (Safari 3) (CSS, DOM)
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（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錯誤控制檯類似）。在蘋果網站的開發部門，有一個常見問題文檔說明如何啓用隱藏的調試菜單。
在Mac OS X下，打開一個終端然後輸入：
defaults write com.apple.Safari IncludeDebugMenu 1在windows下，用文本編輯器打開Preferences.plist，這個文件的位置往往是C:/Documents and Settings/USERNAME/Application Data/Apple Computer/Safari/Preferences.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 Data/Apple Computer/Safari/WebKitPreferences.plist，添加以下內容：
<key>WebKitDeveloperExtras</key><true />然後退出Safari並重新打開，你將在菜單中看到一個“檢查元素”選項，就是它了！
作者：Klaus Komenda ， 翻譯：butwho
英文原文：Collection of Web Developer Tools, per Browser
原文發現：譯言-Collection of Web Developer Tools for major browsers
中文譯文：http://www.butwho.net/2008/05/collection-of-web-developer-tools-per-browser.html
首次翻譯，效果未必好，有些名詞也太專業，請有興趣的同學們認真給俺批評指正！
**知識擴充：嘛叫bookmarklets?
具體說來，俺也不大清楚，新名詞啊？在這兒找到一個解釋：
所謂的Bookmarklet，簡單的說，就是一個內含簡單 JavaScript程式碼的書籤。使用的方法和書籤一樣，不同的地方是：書籤是用來記錄瀏覽的位置，而bookmarklet則是記錄某些程序或是方法。
另一方面，bookmarklet在本質上可說是將JavaScript語言類比為一通訊協定(protocol)，就像http或是ftp一樣，並需要透過瀏覽器來進行解譯，因此，bookmarklet必需依靠瀏覽器才能發揮功用。
好像說，Greasemonkey之類的玩意兒就跟bookmarklet相關？