Web開發(fā)者必知 31個最實用的Javascript工具（附下載）

作者：周雪峰譯 2010-12-06 14:49:34

JavaScript已經(jīng)流行好多年了，作為一門Web頁面上客戶端腳本語言，它獲得了廣泛的成功。對于每個Web開發(fā)者來說，它都是一門需要了解和使用的語言。這里總結(jié)的31個最實用的JavaScript工具可以級大地提高開發(fā)速度，減少調(diào)試和測試的時間，改善輸出的質(zhì)量。

【51CTO獨(dú)家譯文】JavaScript已經(jīng)流行好多年了，作為一門Web頁面上客戶端腳本語言，它獲得了廣泛的成功。對于每個Web開發(fā)者來說，它都是一門需要了解和使用的語言。這里總結(jié)的31個最實用的JavaScript工具可以級大地提高開發(fā)速度，減少調(diào)試和測試的時間，改善輸出的質(zhì)量。

下面提到的這些工具包括各種實用工具，優(yōu)化器，測試和調(diào)試工具，它們可以提高開發(fā)者創(chuàng)建Web站點(diǎn)的效率。

1，JavaScript compressor and comparison tool

有許多工具可以幫助你壓縮JavaScript代碼，但是這個過程比較耗時，并且，對于某個特定的場景來說，很難分析出具體哪個工具表現(xiàn)的最好。這個應(yīng)用程序可以對那些工具的常規(guī)壓縮做一個匯總統(tǒng)計，它可以讓開發(fā)者在不安裝這些工具的情況下，對在自己的JavaScript代碼上應(yīng)用那些工具的情況進(jìn)行比較。

具體可以參考：http://compressorrater.thruhere.net/

2，Regular expression validator tool

這個基于Web的JavaScript正則表達(dá)式驗證器可以讓你輕松地為JavaScript測試和編寫正則表達(dá)式。這個工具可以幫助你檢查語法方面的錯誤，此外，它還為你提供一個正則表達(dá)式庫。

具體可以參考：http://tools.netshiftmedia.com/regexlibrary/

3，Regular expression generator

在IE中，這個腳本運(yùn)行在 JDC 1.0.3 之上，這就是它在 Firefox，Opera 和 Safari 上運(yùn)行的稍微快一些的原因。

具體可以參考：http://www.jslab.dk/tools.regex.php

4，Jsbeautifier

這個微型的美化器可以重新調(diào)整 bookmarklet 和丑陋的JavaScript的格式和縮進(jìn)，也可以對使用流行的 Dean Edward 的 Packer 打包的腳本進(jìn)行拆包，對通過javascriptobfuscator.com 混淆的腳本進(jìn)行反混淆。

具體可以參考：http://jsbeautifier.org/

5，Jsbin

JS Bin是一個開源的，協(xié)同的JavaScript調(diào)試工具。

具體可以參考：http://jsbin.com/

#p#

6，Jslint

JSlint會對JavaScript的源代碼進(jìn)行掃描。如果它發(fā)現(xiàn)了一個問題，會返回一個描述這個問題的消息和源代碼中的大概位置。這個問題不一定是一個語法錯誤（雖然通常情況下，這個問題都是一個語法錯誤）。JSLint 會發(fā)現(xiàn)一些樣式約定和結(jié)構(gòu)問題。它無法證明你的程序是正確的。它只能幫助你發(fā)現(xiàn)一些問題。

具體可以參考：http://www.jslint.com/

7，Rockstarapps

Rockstarapps 的使命比較簡單：給開發(fā)者提供一套工具，讓他們可以在云中創(chuàng)建經(jīng)過高度優(yōu)化的Web應(yīng)用程序。

具體可以參考：http://rockstarapps.com/joomla-1.5.8/home.html

8，Prettyprinter

這是一個源代碼美化器（源代碼格式化器），和縮進(jìn)的效果是類似的。

具體可以參考：http://www.prettyprinter.de/

9，Pixastic

Pixastic是一個實驗性的庫，使用這個庫，你只需要一點(diǎn)點(diǎn)的 JavaScript 代碼，就可以執(zhí)行各種圖像操作。它支持的效果包括淡化/灰度調(diào)整，倒置，翻轉(zhuǎn)，亮度/對比度的調(diào)整，色調(diào)/飽和度，浮現(xiàn)，模糊，等等。

具體可以參考：http://www.pixastic.com/

10，Extjs

構(gòu)建豐富的，可持續(xù)發(fā)展的Web應(yīng)用程序比以往更加快捷了。許多著名的公司（Adobe, Amazon, CNN 等）都在使用extjs。

具體可以參考：http://www.sencha.com/

#p#

11，Slickspeed

各種測試在一個中立的環(huán)境中運(yùn)行，在主要的JavaScript測試中，既不包括庫也不包括框架，這樣可以避免偏頗。

具體可以參考：http://mootools.net/slickspeed/

12，Scriptalizer

對于那些在互聯(lián)網(wǎng)上部署和傳輸?shù)慕忉屝哉Z言（例如：JavaScript）來說，對源代碼進(jìn)行最小化是很有幫助的，因為這可以減少需要傳輸?shù)臄?shù)據(jù)量。

具體可以參考：http://www.scriptalizer.com/

13，Yui compressor

YUI Compressor 是100%安全的 JavaScript 最小化器，它比大多數(shù)其他工具的壓縮比都要高。在YUI庫上的測試表明，和 JSMin 比起來，它可以節(jié)省超過20%的體積（在HTTP壓縮以后，這個數(shù)字是10%）。

具體可以參考：http://developer.yahoo.com/yui/compressor/

14，Js minifier

具體可以參考：http://fmarcia.info/jsmin/test.html

15，Jslitmus

JSLitmus 是一個輕量級的工具，主要用于創(chuàng)建 ad-hoc JavaScript benchmark tests。

具體可以參考：http://broofa.com/Tools/JSLitmus/

#p#

16，Js regular expression tester

這個方便的實用程序可以在一個瀏覽器中，使用 JavaScript 來測試 JavaScript 正則表達(dá)式。它的界面和其他正則表達(dá)式測試工具類似，但是，和其他工具不同的是，它用JavaScript 測試正則表達(dá)式的 JavaScript 實現(xiàn)。

具體可以參考：http://www.codeproject.com/KB/scripting/regex2.aspx

17，Qooxdoo

qooxdoo是一個集綜合性和創(chuàng)新性于一身的框架，它主要用于創(chuàng)建富互聯(lián)網(wǎng)應(yīng)用程序（RIA）。面向?qū)ο蟮?JavaScript 可以讓開發(fā)者構(gòu)建跨瀏覽器的應(yīng)用程序。無須掌握HTML, CSS的知識，也無須掌握 DOM 知識。

具體可以參考：http://qooxdoo.org/

18，JavascriptMVC

JavascriptMVC是一個開源的框架，它融合了企業(yè)級的 JavaScript 開發(fā)方面的最佳理念。它可以通過執(zhí)行最佳實踐，增加可維護(hù)性，和推廣約定優(yōu)于配置的理念等方式來幫助你成功地完成項目。

具體可以參考：http://javascriptmvc.com/

19，GNUcitizen

為了把JavaScript攻擊向量和其他的客戶端和服務(wù)端技術(shù)組合在一起，AttackAPI提供了簡單而直觀的編程界面。

具體可以參考：http://www.gnucitizen.org/blog/attackapi/

20，Jsfuzzer

這個 fuzzing 工具支持事件，標(biāo)簽，樣式和 HTML 屬性的 fuzzing。你可以使用各種深度的不完整標(biāo)簽，也可以對所有參數(shù)進(jìn)行隨機(jī)排列。它還包含一個帶有所有新的攻擊向量的數(shù)據(jù)庫。

具體可以參考：http://code.google.com/p/jsfuzzer/

#p#

21，J3unit

J3Unit是一個面向?qū)ο蟮?JavaScript 單元測試框架。J3Unit可以直接在Web瀏覽器中運(yùn)行JavaScript測試，也可以自動地運(yùn)行 JUnit 和Jetty。J3Unit是建立在JSUnit 和 Script.aculo.us 基礎(chǔ)之上的，它提供了一種更好的方式來自動化JavaScript單元測試。

具體可以參考：http://j3unit.sourceforge.net/

22，Jsunit

JsUnit是一個客戶端（瀏覽器內(nèi)）JavaScript單元測試框架。它實際上是JUnit到JavaScript的一個通道。此外，它還包括一個平臺，這個平臺可以自動地執(zhí)行多個瀏覽器和運(yùn)行不同的操作系統(tǒng)的多臺機(jī)器上的測試。

具體可以參考：http://www.jsunit.net/

23,Firebug

Firebug是和 Firefox 集成在一起的，當(dāng)你瀏覽頁面的時候，你隨時可以使用它提供的豐富的Web開發(fā)工具。在任何一個Web頁面中，你都可以實時地編輯，調(diào)試和監(jiān)控 CSS，HTML，和JavaScript。

具體可以參考：http://getfirebug.com/

24，Venkman

Venkman 是 Mozilla 的 JavaScript 調(diào)試器的代號。Venkman 旨在為基于 Gecko 的瀏覽器（即：Firefox 3.x,Netscape 7.x 系列的瀏覽器）提供一個強(qiáng)大的 JavaScript 調(diào)試環(huán)境。

具體可以參考：http://www.mozilla.org/projects/venkman/

25，Drosera

為了調(diào)試你的應(yīng)用程序中的 JavaScript 代碼，你需要為你的應(yīng)用程序指定一個默認(rèn)的“bundle identifier”。此外，你還需要使用 TOT WebKit 框架來發(fā)布你的應(yīng)用程序。通過 WebKitTools/Scripts 內(nèi)的 run-webkit-app 腳本，你可以輕松地完成這些工作，然后，你會發(fā)現(xiàn)你的應(yīng)用程序已經(jīng)顯示在 Drosera 的窗口中了。

具體可以參考：http://webkit.org/blog/61/introducing-drosera/

#p#

26，Dragonfly

歡迎 Opera Dragonfly 的 alpha版的到來，這是一個為基于 Presto 的 Opera 瀏覽器而提供的功能完備的調(diào)試環(huán)境。Opera Dragonfly 提供的那些工具可以讓你更快速，更輕松地進(jìn)行開發(fā)，它們可以調(diào)試你的 JavaScript 代碼，也可以檢查DOM，CSS，網(wǎng)絡(luò)流量和數(shù)據(jù)存儲。Opera Dragonfly 內(nèi)置的遠(yuǎn)程調(diào)試功能讓移動開發(fā)變得前所未有的輕松。

具體可以參考：http://www.opera.com/dragonfly/

27，Nitobibug