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

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

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

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

下面提到的這些工具包括各種實用工具，優化器，測試和調試工具，它們可以提高開發者創建Web站點的效率。

1，JavaScript compressor and comparison tool

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

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

2，Regular expression validator tool

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

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

3，Regular expression generator

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

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

4，Jsbeautifier

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

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

5，Jsbin

JS Bin是一個開源的，協同的JavaScript調試工具。

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

#p#

6，Jslint

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

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

7，Rockstarapps

Rockstarapps 的使命比較簡單：給開發者提供一套工具，讓他們可以在云中創建經過高度優化的Web應用程序。

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

8，Prettyprinter

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

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

9，Pixastic

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

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

10，Extjs

構建豐富的，可持續發展的Web應用程序比以往更加快捷了。許多著名的公司（Adobe, Amazon, CNN 等）都在使用extjs。

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

#p#

11，Slickspeed

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

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

12，Scriptalizer

對于那些在互聯網上部署和傳輸的解釋性語言（例如：JavaScript）來說，對源代碼進行最小化是很有幫助的，因為這可以減少需要傳輸的數據量。

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

13，Yui compressor

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

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

14，Js minifier

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

15，Jslitmus

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

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

#p#

16，Js regular expression tester

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

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

17，Qooxdoo

qooxdoo是一個集綜合性和創新性于一身的框架，它主要用于創建富互聯網應用程序（RIA）。面向對象的 JavaScript 可以讓開發者構建跨瀏覽器的應用程序。無須掌握HTML, CSS的知識，也無須掌握 DOM 知識。

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

18，JavascriptMVC

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

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

19，GNUcitizen

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

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

20，Jsfuzzer

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

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

#p#

21，J3unit

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

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

22，Jsunit

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

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

23,Firebug

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

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

24，Venkman

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

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

25，Drosera

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

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

#p#

26，Dragonfly

歡迎 Opera Dragonfly 的 alpha版的到來，這是一個為基于 Presto 的 Opera 瀏覽器而提供的功能完備的調試環境。Opera Dragonfly 提供的那些工具可以讓你更快速，更輕松地進行開發，它們可以調試你的 JavaScript 代碼，也可以檢查DOM，CSS，網絡流量和數據存儲。Opera Dragonfly 內置的遠程調試功能讓移動開發變得前所未有的輕松。

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

27，Nitobibug