在过去的几年时间里，出现了许多全新的网页应用程序，不过，由于应用程序的功能越来越丰富，也导致了前端开发的复杂度大幅增加。
现在也有不少前端开发工具，比如Backbone和EmberJS框架都能提供稳定的App开发解决方案。同时，
开发人员都喜欢使用高质量的软件开发工具，本文就推荐五个优秀的前端开发工具和框架，希望能供开发人员参考。
Chrome dev Tool
这是目前最好的前端开发工具。自从其诞生以来，Chrome在其开发者工具中投入了大量精力，而且直到现在，谷歌仍在不断优化这些工具。一般而言，谷歌会在每六周发布对Chrome开发者工具的优化，并推出一些全新功能。
Chrome开发工具是各种工具组成的套件，开发人员可以实时编辑DOM (HTML)/CSS，逐步调试
DOM/CSS编辑器是一个非常强大的工具，可以为你的开发团队提供实时反馈，在开发UI/UX新功能的时候可以支持快速迭代。
在官网和谷歌开发者的YouTube频道上面有许多含金量很高的信息。其中一个名为“命令行API”的章节就为开发人员提供了大量非常有用的命令。比如，你可以调用一个特殊的“复制”功能，就可以从控制台复制任何东西（比如对象，函数返回）到剪切板上面。另外，在HTML5 Rocks上面还有很多优秀的教程。如果你的好奇心很强，并且想了解浏览器究竟是如何工作的，那么能在这些教程里学到很多东西，帮助你全面掌控应用程序开发周期。
如果谷歌不断优化Chrome开发工具的话，这套工具最终会成为网页的集成开发环境（IDE），直接和浏览器进行捆绑，为开发人员提供更加强大的开发空间。
Grunt
Grunt在任务自动化中很有用，它是一个基于任务的
如今，Grunt已经不再局限于简单的前端自动化工作任务流了，在PHP开发时，就可以使用Grunt进行测试工作，如下所示：
terminal = require(color-terminal)
log = (error, stdout, stderr, cb) ->
if error
terminal.color(red).write stdout
else
terminal.color(green).write stdout
cb()
module.exports = (grunt) ->
grunt.loadNpmTasks grunt-contrib-watch
grunt.loadNpmTasks grunt-shell
grunt.initConfig
testFilepath: null
watch:
php:
options:
event: changed
spawn: false
files: [
foo/bar/**/*.php
foo/bar/**/*Test.php
]
tasks: shell:phpunit
shell:
phpunit:
options:
callback: log
command: echo <%= testFilepath %> && phpunit -c app <%= testFilepath %>
grunt.event.on watch, (action, filepath, ext) ->
regex = new RegExp("foo/bar/([a-z0-9]+)/([a-z0-9/]+)", "i")
if filepath.match regex
if filepath.indexOf(Test) is -1
testFilepath = filepath.replace regex, "foo/bar/$1/Tests/$2Test"
else
testFilepath = filepath
grunt.config testFilepath, testFilepath
Grunt还可以用来创建工作区，此外开发人员在创建一个新项目的时候，往往需要做一些繁琐且重复的必要工作，而Grunt提供了不少插件，可以使这些琐碎的工作变得简单。
LiveReload
每天你会在键盘上点击多少次“刷新”键呢？很多次吧。LiveReload是一个简单的网页协议，可以触发事件到客户端，无论文件什么时候被改动，客户端都能及时刷新、处理事件。
一般来说，LiveReload可以和Grunt捆绑在一起使用，搭建本地前端开发环境。而在客户端，LiveReload则会提供一个简单的Chrome扩展程序。谈到Chrome扩展程序，Chrome store绝对是一个好地方，你可以到上面逛一逛，就会发现里面有不少好东西，这里推荐几个，抛砖引玉：
1、 WhatFont，它是一个书签栏工具，采用鼠标悬浮功能特性，点击后就可以告诉用户在网站上所指的字体属性、字体名称、大小、颜色等等，非常方便。此外，它还可以帮助开发人员调试字体风格。
2、 Page ruler，它可以帮助开发人员测量网站中任何元素的尺寸，像素的宽度和高度。
3、 Proxy SwithcySharp，它可以用来帮助开发人员调试本地化信息，包括默认货币、电话号码等
4、 当然，最受欢迎的当属Chrome app。
Mocha/Chai/Sinon
反复测试有没有让你觉得想吐？通常情况下，如果在前端开发的初始阶段没有设计好测试，那么后面的工作往往会变得非常困难。幸运的是，我们有不少优秀的测试框架，它们就像之前使用过的那些开发语言一样强大。目前主流的两个测试框架就是Jasmine和Mocha。
按照笔者已往的经验，更愿意推荐Mocha。它是一个功能丰富的
Jasmine
AsyncProcess = require(./async-process).AsyncProcess
describe(AsyncProcess, function() {
var asyncProcess;
beforeEach(function() {
asyncProcess = new AsyncProcess();
});
it(should process 42, function() {
var done = false;
var processed = null;
deferred = asyncProcess.process();
deferred.then(function(result) {
done = true;
processed = result;
});
waitsFor(function() {
return done;
}, "the async process to complete", 10000);
runs(function() {
expect(processed).toEqual(42);
});
});
});
Mocha/Chai
AsyncProcess = require(./async-process).AsyncProcess;
Chai = require(chai);
Chai.should();
describe(AsyncProcess, function() {
var asyncProcess;
beforeEach(function() {
asyncProcess = new AsyncProcess();
});
it(should process 42, function(done) {
deferred = asyncProcess.process();
deferred.then(function(processed) {
processed.should.be.equal(42);
done();
});
});
});
Jasmine所选的为默认语法，只有通过插件才能有Mocha一样的功能，而后者简洁的多。
和Jasmine不同，Mocha仅提供行为测试结构，这种测试框架通常对应的是行为驱动开发，也就是BDD。但是这点并不会对Mocha产生负面影响，它可以与Chai和Sinon这样的辅助测试工具结合使用。
下面，就是调用Sinon测试工具集内的spy类进行测试的一个例子：
// Function under test
function once(fn) {
var returnValue, called = false;
return function () {
if (!called) {
called = true;
returnValue = http://www.admin10000.com//document/fn.apply(this, arguments);
}
return returnValue;
};
}
it("calls the original function", function () {
var spy = sinon.spy();
var proxy = once(spy);
proxy();
assert(spy.called);
});
Chai的特点在于，开发人员可以使用和自然语言相近的声明语法。不妨可以参考下面的例子，调用Chai中的should声明语法。
foo.should.be.a(string); foo.should.equal(bar); foo.should.have.length(3); tea.should.have.property(flavors).with.length(3);
很清晰，对吗？现在就赶紧在你自己的代码上测试一下吧！
Karma
虽然笔者把Karma放在了最后一个，但它仍然是一款非常重要的前端测试工具。Karma的前身是Testacular，一个
Karma允许开发人员从工作站（在持续运行模式下）到生产调用指示，都能进行测试。它还支持多种浏览器，包括Chrome、Firefox、IE、PhantomJS，让你对自己的代码充满自信。
在进行开发工作时，第一快乐的就是在自己的电脑上写代码，并实时得到结果反馈；第二快乐的，就是自己的程序能够应用在各种浏览器上面，想必上述这两点能够得到绝大多数开发人员的共鸣吧。现在，你是否已经做好了准备，化身成为一个“前端忍者”，去挑战一切困难了呢？当然，这里没有提到一些文本代码编辑器，比如Sublime Text和Vim，但是它们都是很好的开发工具。另外，本文使用的例子都来自GitHub Gist。
如果您恰巧也是一名前端开发工程师，那么是否也有自己喜欢的工具呢？欢迎在下面的评论栏里和大家分享。
VIA TNW
