傻子一個(gè)

Web開發(fā)工具大集合——每個(gè)瀏覽器都有份的！[轉(zhuǎn)]

作者：Klaus Komenda ， 翻譯：butwho
英文原文：Collection of Web Developer Tools, per Browser
原文發(fā)現(xiàn)：譯言-Collection of Web Developer Tools for major browsers
中文譯文：Web開發(fā)工具大集合——每個(gè)瀏覽器都有份的！

網(wǎng) 站開發(fā)者的一大苦惱，就是有太多的瀏覽器要應(yīng)付。幸虧世界上有一些聰明的人，能夠研究出一大些方便編輯和調(diào)試網(wǎng)頁代碼的好工具。不過，要從不計(jì)其數(shù)的小工 具里面找出合適的可真不容易。這篇文章列出了幾個(gè)最好用的web開發(fā)工具，并指導(dǎo)你快速地激活、安裝、使用他們。 下面是工具列表：

Web Developer Toolbar

Firefox上開發(fā)和調(diào)試web站點(diǎn)的不二之選。Web developer toolbar包含了一系列工具，從cookie管理到CSS調(diào)試，從導(dǎo)航線到屏幕標(biāo)尺，功能簡直是多得說不完。 Web開發(fā)工具欄 下載地址：http://chrispederick.com/work/web-developer/

Firebug

螢火蟲 是Firefox上數(shù)一數(shù)二的好擴(kuò)展，可作為web developer toolbar的補(bǔ)充工具。你可以用Firebug在線檢查、監(jiān)控、編輯網(wǎng)頁上的HTML、CSS、JavaScript代碼。他還提供一個(gè)腳本控制臺(tái)，讓JS編輯編的更簡單。控制臺(tái)對象包含了一大堆選項(xiàng)，允許你輸出代碼到控制臺(tái)然后進(jìn)行調(diào)試。Michael Sync提供一個(gè)更高級的操作指南，它可以知道你詳盡地設(shè)置Firebug的選項(xiàng)。另外，F(xiàn)irebug上有一個(gè)帶寬監(jiān)視器，能讓你清楚地看到某些代碼占了多少帶寬。 Firebug 下載地址：http://www.getfirebug.com/

Modify Headers

Modify headers是一個(gè)可以添加、修改和過濾HTTP請求頭的工具。你可以用這個(gè)工具冒充成移動(dòng)設(shè)備登陸網(wǎng)站，它甚至可以偽造一個(gè)Ajax請求。 Modify Headers 下載地址：http://modifyheaders.mozdev.org/

Poster

你可以通過Poster擴(kuò)展與Web服務(wù)或者其他web資源進(jìn)行交互，它能讓你發(fā)送HTTP請求、設(shè)置請求實(shí)體和內(nèi)容格式。這可以讓你檢測Web交互的效果。 Poster下載地址：http://code.google.com/p/poster-extension/

XRAY & MRI

X光和核磁共振成像是可以應(yīng)用在IE6+、Webkit和Mozilla為基礎(chǔ)的瀏覽器上的bookmarklets（嘛叫Bookmarklets），包括Safari, Firefox, Camino和Mozilla. Xray 能幫你檢測盒模型里的每一個(gè)元素，MRI可以測試和應(yīng)用選擇器。 XRay下載地址：http://www.westciv.com/xray/index.html MRI下載地址：http://www.westciv.com/mri/

Firefox Accessibility Extension

Mozilla/Firefox無障礙擴(kuò)展讓殘疾人士方便地瀏覽網(wǎng)頁內(nèi)容。開發(fā)人員可以用這個(gè)擴(kuò)展檢查他們的結(jié)構(gòu)和樣式的網(wǎng)頁易讀性。 Firefox Accessibility Extension下載地址：http://firefox.cita.uiuc.edu/

IE Developer Toolbar

微軟的英特網(wǎng)探索者開發(fā)工具條是IE上最好的DOM檢查和CSS調(diào)試工具。由于IE具有高市場占有率而又在整個(gè)渲染模型上充滿缺陷（比如臭名昭著的hasLayout邊距重疊BUG），調(diào)試IE是web開發(fā)必不可少的步驟——沒有這個(gè)工具條，IE的調(diào)試將會(huì)成為一場噩夢。雖然IE Developer Toolbar要比Firebug稍微弱智一點(diǎn)，不過他至少能幫你馴服IE這頭怪獸。 IE Developer Toolbar下載地址：http://www.microsoft.com/downlo…aylang=en

Web Accessibility Toolbar

The Web Accessibility Toolbar（ >Opera版）可 以檢查網(wǎng)站的易讀性（當(dāng)然是可能的易讀性，總不能指望電腦能像人一樣讀網(wǎng)頁吧？）此外，這個(gè)工具還提供其他功能，比如檢查死鏈接和改變?yōu)g覽框大小等等。 The Web Accessibility Toolbar下載地址:http://www.visionaustralia.org.au/ais/toolbar/

Visual Web Developer Express Edition

IE開發(fā)工具欄木有JavaScript調(diào)試功能，你得找個(gè)別的工具搞JS。你可以用Microsoft Script Debugger（下面將提到）或者免費(fèi)下載這個(gè)重量級的Visual Web Developer Express Edition。Bernie那兒有這個(gè)工具的教程（當(dāng) 然是英文的），它詳盡地告訴你如何用這個(gè)工具調(diào)試JavaScript代碼。 你也可以用Microsoft Script Editor 編輯 JS代碼——不幸的是，這并不是個(gè)免費(fèi)工具（在國內(nèi)，這似乎不是個(gè)大問題）。他被捆綁在Office 2003安裝包里，而微軟又不提供單獨(dú)下載。正因?yàn)槿绱耍@兒就不多提它了。Jonathan Boutelle提供了這個(gè)工具的一些教程。

Microsoft Script Debugger

你可以在微軟網(wǎng)站上免費(fèi)下載這個(gè)工具，MSDN上也有一個(gè)相關(guān)文檔。這個(gè)工具比Visual Web Developer Express Edition弱很多，不過仍然能處理一些IE上那些讓人摸不著頭腦的提示，諸如“缺乏對象”一類。Jake Howlett 有個(gè)《如何使用Microsoft Script Debugger調(diào)試JavaScript》的教程。為安全起見，安裝腳本調(diào)試器之后最好要重新啟動(dòng)一下你的電腦。 Microsoft Script Debugger下載地址：http://www.microsoft.com/do..laylang=en

Opera developer tools

Opera有兩個(gè)開發(fā)工具：Opera 開發(fā)控制臺(tái)(Opera Developer Console)和Dom快照工具(DOM Snapshot)。從截圖來看，他們都很有前途。這個(gè)工具算是Opera 9以上版本用的bookmarklets。不過我沒能讓他們在Opera 9.10上成功運(yùn)作。 Opera開發(fā)工具下載地址：http://dev.opera.com/tools/

Opera Error Console

錯(cuò)誤控制臺(tái)是Opera的一個(gè)內(nèi)置功能，可以在工具-高級-錯(cuò)誤控制臺(tái)中激活這個(gè)它。它能彈窗顯示當(dāng)前網(wǎng)頁上的錯(cuò)誤或者警告信息，或者你可以過濾某種類型的信息，比如HTML、CSS、XML或者Javascript警告。你可以在opera網(wǎng)站找到錯(cuò)誤控制臺(tái)的詳細(xì)教程。

Safari Debug Menu

Safari的debug能力很弱，但至少顯示一個(gè)Javascript控制臺(tái)能讓Javascript調(diào)試變得簡單點(diǎn)兒（這與Firebug和Opera錯(cuò)誤控制臺(tái)類似）。在Apple網(wǎng)站的開發(fā)部門，有一個(gè)常見問題文檔說明如何啟用隱藏的調(diào)試菜單。 在Mac OS X下，打開一個(gè)終端然后輸入：

				defaults write com.apple.Safari IncludeDebugMenu 1

在 windows下，用文本編輯器打開Preferences.plist，這個(gè)文件的位置往往是C:Documents and SettingsUSERNAMEApplication DataApple ComputerSafariPreferences.plist，在文件最后添加： <key>IncludeDebugMenu</key> <true/> 在Safari 1.3及以上版本，你可以進(jìn)入Debug菜單然后鉤選“記錄Javascript意外”的選項(xiàng)。然后選擇“顯示JavaScript Console”。這就可以用控制臺(tái)記錄Javascript錯(cuò)誤。

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，添加以下內(nèi)容：

				<key>WebKitDeveloperExtras</key>



<true/>

然后退出Safari并重新打開，你將在菜單中看到一個(gè)“檢查元素”選項(xiàng)，就是它了！

**知識擴(kuò)充：嘛叫bookmarklets?

具體說來，俺也不大清楚，新名詞啊？在這兒找到一個(gè)解釋：

所 謂的Bookmarklet，簡單的說，就是一個(gè)內(nèi)含簡單 JavaScript程式碼的書籤。使用的方法和書籤一樣，不同的地方是：書籤是用來記錄瀏覽的位置，而bookmarklet則是記錄某些程序或是方 法。 另一方面，bookmarklet在本質(zhì)上可說是將JavaScript語言類比為一通訊協(xié)定(protocol)，就像http或是ftp一樣，並需要 透過瀏覽器來進(jìn)行解譯，因此，bookmarklet必需依靠瀏覽器才能發(fā)揮功用。

好像說，Greasemonkey之類的玩意兒就跟bookmarklet相關(guān)？

原文：http://www.weborn.org/collection-of-web-developer-tools-per-browser-466/

posted on 2009-09-27 09:06 老文 閱讀(449) 評論(0)  編輯  收藏 所屬分類: 網(wǎng)絡(luò)經(jīng)典文章