20个有用的工具让你的web开发更有效率

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.

有很多有用的工具能帮助你更快和更有效的进行网站开发。除了随处可得的文本编辑器或者所见即所得的编辑器（如 Dreamweaver）之外，你也能找到很多工具，它们能帮你提高开发速度，减少除错和测试的时间，同时还能提高输出的效果。下面就列出一些各种各样的 工具，包括优化、测试、除错等，能让开发者更有效率。

1. CSS Grid Builder

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是一个在线GUI，用于定制YUI Grids CSS-- 一个Yahoo！开发的轻量级的CSS框架，包含超过1000个页面样式。CSS Grid Builder让你在几分钟（甚至几秒）快速生成一个基于CSS，适应Web标准的页面样式。当你找到你要的页面样式时，你所需要做的仅仅是按"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文件在你的服务器上（这样能减少一些你的带宽占用和维护烦恼），生成的代码会链接到Yahoo!’s Developer Network API中适当的样式表。

2. CSS Sprite Generator

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是一个提升网页效能的好方法去，它通过减少用于表现层图片的HTTP请求数达到这一目的。假如手工去做，则需要很多计划、测量和编码。

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 让你上传所有的图片（你需要先把它们压缩为一个zip文件），然后网站会把全部图片整合成一个独立的图，同时给出CSS代码。

3. Blueprint: A CSS Framework

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 能减少相当一部分常用但你又必须要写的CSS代码。这里是一个一个采用Blueprint的网页例子。

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是一个分析、修正、优化CSS代码的开源应用程序，它能减少文件的体积和自动格式化CSS代码使其符合标准。它也能查找和删除多余的样式和属性。你能够调整CSSTidy的设置，设定你需要的压缩级别，但默认设置就已经有30%的压缩率了。查看"before and after"这个例子，去了解CSSTidy的工作原理。

5. logicss: CSS Framework

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是一个CSS文件和PHP工具的集合，可用于减少web开发的时间。它允许开发者创建可定制的固定、弹性、流式（ fixed, elastic, or fluid ）的样式网格。查看他们的CSS code generation tool的预览版。

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是一个非常简单的可用于创建与web标准兼容页面样式的CSS框架，___layouts是受到Yahoo!’s Grids CSS 的启发，它提供了5种预定义的流式或固定宽度样式。就像Yahoo!’s Grid.css, ___layouts 也有一个基于web，适用于Firefox浏览器的Layout Builder。警告：Layout Builder 仍然处于早期开发阶段， 可能会有较多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设计模式，加速Ajax开发。因为Clean AJAX是基于JavaScript，所以能被用于任何服务器端技术，比如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"的缩写）是一个开源框架，用于加速Ajax应用的创建。它支持主要的服务器端技术，比如 ASP, Cold Fusion, PHP, Perl, Python, 和 Ruby。Sajax有一个庞大的社区，他们的论坛有超过39000个注册用户，因此当你在使用Sajax开发遇到问题时，或者想展示你的工作时，你肯定能有一批响应者。

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结构的时间。创建DOM语句非常简单，只需要复制你的HTML代码到DOMTool中，然后按一下按钮就可以了。当然这不意味着复制粘贴就能解决问题了，你必须校验和优化输出结果，但它毕竟给了你一个好的开始。

10. JavaScript Code Improver

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是一个简单、无装饰的应用程序，它能让你快速整理和格式化你的JavaScript代码。团队开发使用它能让JavaScript代码符合标准，让代码更容易阅读和便于协作。

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非常耗时而且容易出错，JSUnit给开发者提供了一种更简单、自动化的方法去做 单元测试，从而确保彻底测试的时间不过是手工测试的几分之一而已。JSUnit能够在多种浏览器和操作系统平台上执行自动测试。

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是另一个很棒的JavaScript测试框架，它同样能提高开发的速度。它是基于“JavaScript testing sucks… so we want to make it easier”的理念创造的。这个测试插件是一个全面的工具集，它能通过模拟用户的交互操作去做单元测试。

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是一个适用于Firefox 2、, Netscape, 和 Seamonkey的JavaScript debugging环境。它提供一个可视化界面去按步执行JavaScript代码和设置断点。它也内置了一个命令行界面。Venkman是一个扩展插 件，你可以很容易的在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是一个Mozilla Firefox扩展，它提供了大量web开发工具和功能。Firebug拥有一个内置的JavaScript debugger，能让你按步执行脚本，还能通过执行基准测试去看看为什么你的脚本运行缓慢。

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的错误，它甚至能让你过滤和查找特定的错误。另一个方便的功能是DOM检查工具板，它以大纲方式列出网页的结构，当你在开发一个大型网站，或者最近 刚涉足某开源应用时，这个功能会非常有用。它是个非常好的工具，但当我不使用它时，我会将它禁用，这样能提高普通浏览的速度（比如访问Gmail时）。

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 是一个非常方便和省时的Firefox扩展。我多次推荐它，并且它是我每天都会用到的扩展。通过她，你能够很快的校验你的XHTML，查找 JavaScript/CSS的错误，直观显示网页结构，快速填表单以便于测试，一键清除缓存，传输中改变XHTML（对于远程web设计非常有用），检 查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）去开发和测试你的网页，你也不得不为了兼容性而在Internet Explorer下测试你的成果。每当我在IE下测试时，我总是希望获得那些Firebug和Web Developer的功能，比如DOM检测选项或者CSS信息选项。IE Developer Toolbar 是一个IE加载项，它提供了那些我在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是一个被证明理想的web设计模式的大集合，它能帮你节省创建完善设计方案的时间。你能在这个设计模式库中找到的包括：面包屑导航，web表单自动完成和“鼠标拖放”解决方案。它通过提供通用的设计解决方案，

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 是一个基于web的多用途测试应用，它让你不用把时间浪费在那些在线服务和校验上。Test Everything集合了超过100种工具在一个页面上。你能校验你XHTML是否符合web标准和可用性，测试你的设计在多种浏览器下的效果（利用Browsershots这个服务），检查页面等级，还有其他等等等等，所有这些都集中在了一起。

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同样是一个基于web的应用，它能很容易的测试你网页的性能。它提供包括总的页面载入时间，总的对象要求数量等信息去建议你移除或整合某些元 素。它采用可视化的方式显示有多少页面对象被载入了，并且你能根据载入顺序、载入时间（方便你查看什么载入时间最长）、文件大小、文件类型、URL等对结 果排序。

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是一个为Ajax应用设计的集成开发环境(IDE)。它拥有JavaScript 调试器，一个包含为一些流行框架（比如Dojo Toolkit）语法着色的Ajax和JavaScript库，HTML/CSS/JavaScript代码辅助（自动完成和提示）等等。它让Ajax开发更简单，而且让开发者更有效的组织和管理多个工程。

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应用，编译输出高优化的JavaScript文件
• Cuzillion:快速构建网页来查看页面元素如何相互影响，以便于你研究如何改善网页性能。
• CSSFly:通过浏览器实时编辑网页。用于出错和测试网页。
• AppJet:基于web的解决方案，能让你以图形界面去创建一个功能性的web应用或者widget。
• Google Sitemap Generator:快速生成一个基于Sitemap XML协议的sitemap文件，这样你就不用手工编写了。