五个值得尝试的前端开发工具

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。它是一个功能丰富的Javascript测试框架，支持异步测试，这在Javascript中经常要用到。下面是两个测试案例，第一个是用Jasmine写的，第二个使用Mocha/Chai写的，如下所示：

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 = 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，一个Javascript测试工具。Karma开发者和开发AngularJS的是同一批人。如果你使用Mocha、Chai以及Sinon，那么连续不断的运行上述这些测试框架，会提供实时的反馈吗？

Karma允许开发人员从工作站（在持续运行模式下）到生产调用指示，都能进行测试。它还支持多种浏览器，包括Chrome、Firefox、IE、PhantomJS，让你对自己的代码充满自信。

在进行开发工作时，第一快乐的就是在自己的电脑上写代码，并实时得到结果反馈；第二快乐的，就是自己的程序能够应用在各种浏览器上面，想必上述这两点能够得到绝大多数开发人员的共鸣吧。现在，你是否已经做好了准备，化身成为一个“前端忍者”，去挑战一切困难了呢？当然，这里没有提到一些文本代码编辑器，比如 Sublime Text和Vim ，但是它们都是很好的开发工具。另外，本文使用的例子都来自 GitHub Gist 。

如果您恰巧也是一名前端开发工程师，那么是否也有自己喜欢的工具呢？欢迎在下面的评论栏里和大家分享。

VIA TNW

相关内容

帮助设计师和开发者的9种CSS技巧