There are many available tools to help make web development projects quicker and more productive. Aside from a handy text editor or WYSIWYG editor like Dreamweaver, you can find plenty of tools and utilities that can greatly increase development speed, reduce debugging and testing time, and improve quality of the output. The tools described below are a variety of utilities, optimizers, testing, and debugging tools aimed towards helping developers create websites more efficiently.
有很多有用的工具能幫助你更快和更有效的進(jìn)行網(wǎng)站開發(fā)。除了隨處可得的文本編輯器或者所見即所得的編輯器（如 Dreamweaver）之外，你也能找到很多工具，它們能幫你提高開發(fā)速度，減少除錯和測試的時(shí)間，同時(shí)還能提高輸出的效果。下面就列出一些各種各樣的 工具，包括優(yōu)化、測試、除錯等，能讓開發(fā)者更有效率。
CSS Grid Builder is an online GUI for customizing the YUI Grids CSS - a lightweight CSS framework developed by Yahoo! that comes with over 1000 page layout combinations. The CSS Grid Builder allows you to rapidly generate a CSS-based, web-standards compliant page layout in a matter of minutes (or even seconds). Once you’ve got the page layout the way you want it, all you have to do is press "Show Code" and it generates the HTML for you.
CSS Grid Builder是一個(gè)在線GUI，用于定制YUI Grids CSS-- 一個(gè)Yahoo！開發(fā)的輕量級的CSS框架，包含超過1000個(gè)頁面樣式。CSS Grid Builder讓你在幾分鐘（甚至幾秒）快速生成一個(gè)基于CSS，適應(yīng)Web標(biāo)準(zhǔn)的頁面樣式。當(dāng)你找到你要的頁面樣式時(shí)，你所需要做的僅僅是按"Show Code"，然后它就會為你生成HTML代碼。
You don’t even have to host the CSS file on your web server (saving you some bandwidth and maintenance hassles), the generated code links to the appropriate stylesheet found on Yahoo!’s Developer Network API.
你甚至不需要保存CSS文件在你的服務(wù)器上（這樣能減少一些你的帶寬占用和維護(hù)煩惱），生成的代碼會鏈接到Y(jié)ahoo!’s Developer Network API中適當(dāng)?shù)臉邮奖怼?/p>
Using CSS sprites is an excellent way to improve web page performance by reducing the number of HTTP requests needed for rendering images, but it can take a lot of planning, measuring, and coding if done manually.
使用CSS sprites是一個(gè)提升網(wǎng)頁效能的好方法去，它通過減少用于表現(xiàn)層圖片的HTTP請求數(shù)達(dá)到這一目的。假如手工去做，則需要很多計(jì)劃、測量和編碼。
CSS Sprite Generator allows you to upload all of your images (you have to place them in a .zip file first) and it will combine the uploaded images into a single sprite and also generate the CSS for you.
CSS Sprite Generator 讓你上傳所有的圖片（你需要先把它們壓縮為一個(gè)zip文件），然后網(wǎng)站會把全部圖片整合成一個(gè)獨(dú)立的圖，同時(shí)給出CSS代碼。
Blueprint reduces the amount of CSS code you have to write by including common styles that developers typically use such CSS reset and page layouts. A demonstration of a web page that uses Blueprint can be found here.
Blueprint 能減少相當(dāng)一部分常用但你又必須要寫的CSS代碼。這里是一個(gè)一個(gè)采用Blueprint的網(wǎng)頁例子。
4. CSSTidy
CSSTidy is an open source application that parses, fixes, and optimizes CSS code to reduce file size and also to standardize CSS code formatting automatically. It also finds and removes redundant styles and properties. You can adjust CSSTidy’s settings to your preferred compression level but even the default setting can often give you 30% compression according to the creators of CSSTidy. Check out the "before and after" examples to get a feel for how CSSTidy works.
CSSTidy是一個(gè)分析、修正、優(yōu)化CSS代碼的開源應(yīng)用程序，它能減少文件的體積和自動格式化CSS代碼使其符合標(biāo)準(zhǔn)。它也能查找和刪除多余的樣式和屬性。你能夠調(diào)整CSSTidy的設(shè)置，設(shè)定你需要的壓縮級別，但默認(rèn)設(shè)置就已經(jīng)有30%的壓縮率了。查看"before and after"這個(gè)例子，去了解CSSTidy的工作原理。
logicss is a collection of CSS files and PHP utilities aimed at reducing web development time. It allows developers to create customizable fixed, elastic, or fluid (liquid) layout grids. Check out the preview of their CSS code generation tool.
logicss是一個(gè)CSS文件和PHP工具的集合，可用于減少web開發(fā)的時(shí)間。它允許開發(fā)者創(chuàng)建可定制的固定、彈性、流式（ fixed, elastic, or fluid ）的樣式網(wǎng)格。查看他們的CSS code generation tool的預(yù)覽版。
6. ___layouts
___layouts is a very simple CSS framework that can be used to create web-standards compliant page layouts. ___layouts was inspired by Yahoo!’s Grids CSS and offers 5 preset widths that supports fluid-width or fixed-width layouts. Much like Yahoo!’s Grid.css, ___layouts also has a web-based Layout Builder that was developed for the Firefox browser. Caution: the Layout Builder is still in its early stages of development, so things may be buggy at times.
___layouts是一個(gè)非常簡單的可用于創(chuàng)建與web標(biāo)準(zhǔn)兼容頁面樣式的CSS框架，___layouts是受到Y(jié)ahoo!’s Grids CSS 的啟發(fā)，它提供了5種預(yù)定義的流式或固定寬度樣式。就像Yahoo!’s Grid.css, ___layouts 也有一個(gè)基于web，適用于Firefox瀏覽器的Layout Builder。警告：Layout Builder 仍然處于早期開發(fā)階段， 可能會有較多bug。
7. Clean AJAX
Clean AJAX speeds up Ajax development by cutting down the amount of code you have to write (and rewrite), giving you access to common and proven design patterns used in Ajax applications. Clean AJAX can be used with any server-side technology such as PHP, RoR, and .NET because it’s JavaScript-based. Check out the demo page so you can see Clean AJAX in action.
Clean AJAX通過減少你必須要寫的代碼，使用通用的Ajax設(shè)計(jì)模式，加速Ajax開發(fā)。因?yàn)镃lean AJAX是基于JavaScript，所以能被用于任何服務(wù)器端技術(shù)，比如PHP、RoR和.NET。查看Clean AJAX的例子。
8. Sajax
Sajax (which stands for "Simple Ajax Toolkit") is an open source framework developed to speed up the creation of Ajax applications. It supports major sever-side technologies such as ASP, Cold Fusion, PHP, Perl, Python, and Ruby. Sajax has a fairly large community of over 39,000 registered users on their forums - so if you run into any troubles while developing a Sajax-based application or if you want to showcase your work, you’ll be sure to have an audience.
Sajax（"Simple Ajax Toolkit"的縮寫）是一個(gè)開源框架，用于加速Ajax應(yīng)用的創(chuàng)建。它支持主要的服務(wù)器端技術(shù)，比如 ASP, Cold Fusion, PHP, Perl, Python, 和 Ruby。Sajax有一個(gè)龐大的社區(qū)，他們的論壇有超過39000個(gè)注冊用戶，因此當(dāng)你在使用Sajax開發(fā)遇到問題時(shí)，或者想展示你的工作時(shí)，你肯定能有一批響應(yīng)者。
9. DOMTool
DOMTool was created to cut down the time it takes to code DOM structures. Creating DOM statements is as simple as copying your HTML code into the DOMTool and then clicking a button. It’s not meant to be used as a simple copy-and-paste solution and you should verify and optimize the output, but it gives you a great starting point.
DOMTool用于減少你編寫DOM結(jié)構(gòu)的時(shí)間。創(chuàng)建DOM語句非常簡單，只需要復(fù)制你的HTML代碼到DOMTool中，然后按一下按鈕就可以了。當(dāng)然這不意味著復(fù)制粘貼就能解決問題了，你必須校驗(yàn)和優(yōu)化輸出結(jié)果，但它畢竟給了你一個(gè)好的開始。
JavaScript Code Improver is a simple, no-frills application that allows you to quickly tidy up and format your JavaScript. It’s a great way for a team of developers to standardize JavaScript code format for easier readability and collaboration.
JavaScript Code Improver是一個(gè)簡單、無裝飾的應(yīng)用程序，它能讓你快速整理和格式化你的JavaScript代碼。團(tuán)隊(duì)開發(fā)使用它能讓JavaScript代碼符合標(biāo)準(zhǔn)，讓代碼更容易閱讀和便于協(xié)作。
11. JSUnit
JSUnit is a unit testing framework for JavaScript. Testing JavaScript manually is time-consuming and prone to errors, but JSUnit provides the developer a simpler, automated way of doing unit tests to ensure thorough testing at a fraction of the time it would take to test manually. JSUnit allows for the execution of automated tests for multiple browsers and operating systems.
JSUnit 是一款JavsScript單元測試框架。手工測試JavaScript非常耗時(shí)而且容易出錯，JSUnit給開發(fā)者提供了一種更簡單、自動化的方法去做 單元測試，從而確保徹底測試的時(shí)間不過是手工測試的幾分之一而已。JSUnit能夠在多種瀏覽器和操作系統(tǒng)平臺上執(zhí)行自動測試。
12. Test plugin for JavaScriptMVC
The Test plugin for JavaScriptMVC is another excellent JavaScript testing framework to help make development speedier. It was created with the concept of "JavaScript testing sucks… so we want to make it easier" in mind. The Test plugin is a comprehensive set of utilities allowing you to do unit tests as well as simulate user interaction that can occur in a web page.
Test plugin for JavaScriptMVC是另一個(gè)很棒的JavaScript測試框架，它同樣能提高開發(fā)的速度。它是基于“JavaScript testing sucks… so we want to make it easier”的理念創(chuàng)造的。這個(gè)測試插件是一個(gè)全面的工具集，它能通過模擬用戶的交互操作去做單元測試。
13. Venkman: JavaScript Debugger
Venkman is a JavaScript debugging environment for Firefox 2, Netscape, and Seamonkey. It gives you a GUI for stepping through JavaScript code and setting break points. It also comes with a command-line interface built in. Venkman is an extension that you can easily install and download through the Firefox Add-ons section of Mozilla.org.
Venkman是一個(gè)適用于Firefox 2、, Netscape, 和 Seamonkey的JavaScript debugging環(huán)境。它提供一個(gè)可視化界面去按步執(zhí)行JavaScript代碼和設(shè)置斷點(diǎn)。它也內(nèi)置了一個(gè)命令行界面。Venkman是一個(gè)擴(kuò)展插 件，你可以很容易的在Mozilla.org上的Firefox Add-ons下載到并安裝。
14. Firebug
Firebug is a Mozilla Firefox extension that gives you plenty of web development tools and features. Firebug has a built-in JavaScript debugger that lets you step through your script as well as allowing you to perform benchmarks to see why your script is slow/sluggish.
Firebug是一個(gè)Mozilla Firefox擴(kuò)展，它提供了大量web開發(fā)工具和功能。Firebug擁有一個(gè)內(nèi)置的JavaScript debugger，能讓你按步執(zhí)行腳本，還能通過執(zhí)行基準(zhǔn)測試去看看為什么你的腳本運(yùn)行緩慢。
You can quickly hunt down CSS, HTML, JavaScript, and XML errors through Firebug, and it even allows you to filter and search for specific errors. Another handy feature is the DOM inspector pane which outlines a web page’s structure; very handy if you’re working on a big website or an open-source application that you’ve recently gotten involved with. It’s an awesome tool though I find that disabling Firebug when I’m not using it is helpful in speeding up normal browsing (such accessing Gmail, for example).
你能快速的通過Firebug查找CSS, HTML, JavaScript, 和 XML的錯誤，它甚至能讓你過濾和查找特定的錯誤。另一個(gè)方便的功能是DOM檢查工具板，它以大綱方式列出網(wǎng)頁的結(jié)構(gòu)，當(dāng)你在開發(fā)一個(gè)大型網(wǎng)站，或者最近 剛涉足某開源應(yīng)用時(shí)，這個(gè)功能會非常有用。它是個(gè)非常好的工具，但當(dāng)我不使用它時(shí)，我會將它禁用，這樣能提高普通瀏覽的速度（比如訪問Gmail時(shí)）。
15. Web Developer extension for Firefox
Web Developer extension is a very handy and time-saving extension for Firefox. I’ve written and recommended it plenty of times and is an extension that I use daily. You can rapidly validate your XHTML, find JavaScript/CSS errors, visualize a web page’s structure, quickly fill out web forms for testing purposes, clear your cache with a shortcut key, change XHTML on-the-fly (great for working remotely on a web design), inspect HTTP headers information, and much more.
Web Developer 是一個(gè)非常方便和省時(shí)的Firefox擴(kuò)展。我多次推薦它，并且它是我每天都會用到的擴(kuò)展。通過她，你能夠很快的校驗(yàn)?zāi)愕腦HTML，查找 JavaScript/CSS的錯誤，直觀顯示網(wǎng)頁結(jié)構(gòu)，快速填表單以便于測試，一鍵清除緩存，傳輸中改變XHTML（對于遠(yuǎn)程web設(shè)計(jì)非常有用），檢 查HTTP頭信息等等。
16. Internet Explorer Developer Toolbar
Even if you prefer Firefox (or Safari) to develop and test your web pages, you have to test your stuff in the Internet Explorer browser for cross-compatibility. Whenever I test in IE, there are plenty of times when I wish certain features in Firebug and the Web Developer extension are accessible through IE, such as the DOM inspector option or the CSS Information option. IE Developer Toolbar is the IE add-on that provides me the features I like in my Firefox extensions.
即使你喜歡用Firefox（或Safari）去開發(fā)和測試你的網(wǎng)頁，你也不得不為了兼容性而在Internet Explorer下測試你的成果。每當(dāng)我在IE下測試時(shí)，我總是希望獲得那些Firebug和Web Developer的功能，比如DOM檢測選項(xiàng)或者CSS信息選項(xiàng)。IE Developer Toolbar 是一個(gè)IE加載項(xiàng)，它提供了那些我在Firefox下常用的功能。
17. Yahoo! Design Pattern Library
The Yahoo! Design Pattern Library is a large collection of proven optimal web design patterns to save you time in creating highly-sophisticated design solutions. Some things that you can find in the Design Pattern Library are: breadcrumb navigation, auto-complete for web forms, and drag-and-drop solutions. It speeds up development by offering solutions to common design needs so that you don’t have to re-invent the wheel.
Yahoo! Design Pattern Library是一個(gè)被證明理想的web設(shè)計(jì)模式的大集合，它能幫你節(jié)省創(chuàng)建完善設(shè)計(jì)方案的時(shí)間。你能在這個(gè)設(shè)計(jì)模式庫中找到的包括：面包屑導(dǎo)航，web表單自動完成和“鼠標(biāo)拖放”解決方案。它通過提供通用的設(shè)計(jì)解決方案，
18. Test Everything
Test Everything is a web-based application for multi-purpose testing, reducing the time it takes you to use online services and validators. Test Everything is an aggregate of over 100 tools reduced to just one web page. You can validate your XHTML for web standards and accessibility, test your design in several browsers (using the Browsershots service), check page rank, and more - all in one location.
Test Everything 是一個(gè)基于web的多用途測試應(yīng)用，它讓你不用把時(shí)間浪費(fèi)在那些在線服務(wù)和校驗(yàn)上。Test Everything集合了超過100種工具在一個(gè)頁面上。你能校驗(yàn)?zāi)鉞HTML是否符合web標(biāo)準(zhǔn)和可用性，測試你的設(shè)計(jì)在多種瀏覽器下的效果（利用Browsershots這個(gè)服務(wù)），檢查頁面等級，還有其他等等等等，所有這些都集中在了一起。
19. Pingdom Tools
Pingdom Tools is web-based application that you can use for easily testing the performance of your web pages. It can give you information on the total loading time of a web page and the total number of objects required to render the page to give you insights on things you can leave out or combine. It gives you a visualization of how page objects are loaded and you can sort the results by load order, load time (helpful in seeing what’s taking so long to load), file size, file type, and URL.
Pingdom Tools同樣是一個(gè)基于web的應(yīng)用，它能很容易的測試你網(wǎng)頁的性能。它提供包括總的頁面載入時(shí)間，總的對象要求數(shù)量等信息去建議你移除或整合某些元 素。它采用可視化的方式顯示有多少頁面對象被載入了，并且你能根據(jù)載入順序、載入時(shí)間（方便你查看什么載入時(shí)間最長）、文件大小、文件類型、URL等對結(jié) 果排序。
20. Aptana Studio Community Edition
Aptana Studio is an integrated development environment (IDE) designed for Ajax-based applications. It has JavaScript debugging, an Ajax and JavaScript library that includes some popular frameworks (such as the Dojo Toolkit) syntax colorizing, HTML/CSS/JavaScript code assistance (auto-complete and tool tips) and much more. It makes Ajax development simpler and gives the developer time-saving ways of organizing and managing multiple projects.
Aptana Studio是一個(gè)為Ajax應(yīng)用設(shè)計(jì)的集成開發(fā)環(huán)境(IDE)。它擁有JavaScript 調(diào)試器，一個(gè)包含為一些流行框架（比如Dojo Toolkit）語法著色的Ajax和JavaScript庫，HTML/CSS/JavaScript代碼輔助（自動完成和提示）等等。它讓Ajax開發(fā)更簡單，而且讓開發(fā)者更有效的組織和管理多個(gè)工程。
Some more tools（更多工具）
- Google Web Toolkit: write high-performance Ajax applications quickly using Java and the compiled output is highly-optimized JavaScript files.
- Cuzillion: quickly construct web pages to see how page objects interact so that you may explore techniques on how to improve web page performance.
- CSSFly: edit web pages on-the-fly through a web browser. Helpful in debugging and testing a web page.
- AppJet: a web-based solution that allows you to create a functional web application or widget through a GUI.
- Google Sitemap Generator: Quickly generate a sitemap file based on the Sitemap XML protocol without you having to write it yourself.
- Google Web Toolkit: 采用Java編寫高性能的Ajax應(yīng)用，編譯輸出高優(yōu)化的JavaScript文件
- Cuzillion:快速構(gòu)建網(wǎng)頁來查看頁面元素如何相互影響，以便于你研究如何改善網(wǎng)頁性能。
- CSSFly:通過瀏覽器實(shí)時(shí)編輯網(wǎng)頁。用于出錯和測試網(wǎng)頁。
- AppJet:基于web的解決方案，能讓你以圖形界面去創(chuàng)建一個(gè)功能性的web應(yīng)用或者widget。
- Google Sitemap Generator:快速生成一個(gè)基于Sitemap XML協(xié)議的sitemap文件，這樣你就不用手工編寫了。
