前端开发工程师优秀开发工具推荐

原文作者 Arnaud Breton 为前端工程师，特别专注于前端和使用者经验，这篇文章出自于mention blog。以下内容由作者以第一人称撰写。

过去几年一直不断地提到 Web 应用新世代的成长，这些 App 内容变得越来越丰富，带动了前端整体的复杂度大幅增加。

像是 Backbone（藉由提供模型）、AngularJS 和 EmberJS 框架都是创造新 App 非常好的框架，增强了所有 Web 的功能；同时，Web 程式语言 Javascript 在普及度和成熟度上已经进步了非常多，而且还能和 NodeJS 在后端协同工作。

但为了能持续面对复杂度的新挑战，开发者已经创造更多工具使整体开发过程更加流畅，从测试框架到分析工具，这些成熟又有用的工具把最棒的体验带给我们的使用者。

就如同刚刚所提到的，我们喜欢能够帮助我们提供最棒品质的软体，同时也能使得生活变得更加简单方便，本文要分享给大家 5 个我们每天面对挑战所使用最棒的工具和框架：

Chrome dev tools

这是目前最好的前端开发工具！

Chrome 自从它诞生后，就已经大量投资在开发者工具软体，至今仍不断的在改善它，每一个发布会（每六周一次）都会伴随着它自己的全新开发功能。

这个开发工具是一个完整的多元软体套件，你可以实时编辑 DOM（HTML）/CSS，当进行一个深入的效能分析时，可以一步步找出 Javascript 的错误，甚至能增加终端机指令。感谢有它，近来解决了回报效能的问题。

DOM/CSS 编辑器是非常强大的工具，能即时回馈给你的团队，能够在 UI/UX 的新功能上很快地执行迴圈。

官方网站和 Google Developers YouTube 管道都是资讯的金矿，比如说，命令列的 API（应用程式介面，Application Programming Interface）包含非常多有用的指令，比如说从控制台功能中的复制指令，复制到剪贴簿上。

许多详细的使用手册同样在 HTML5 Rocks 里都能参考。如果你的好奇心很强，并且想了解浏览器究竟是如何运作的，那么你会在这些教学里学到很多东西，帮助你全面掌控开发周期。

除了上述的之外，最重要的是，透过网络工具你能知道现在在介面之下到底发生了什么事情，以及优化你的下载速度，时间轴会以更深入的角度来告诉你浏览器做了哪些事情。

如果你跟我们一样充满好奇心，你可以学到更多关于浏览器、Web 是如何运作的，如此一来，你就可以反过来完整的操控应用程式的生命周期。

以我个人观点来说，如果它们依照现在的路线持续发展下去，肯定会变成 Web 供应开发商最终的IDE（Integrated Developer Environment），最强大的放入整合发展空间。

Grunt

说到工作自动化，Grunt 是我们的首选。

它是 Javascript 跑任务的专家，针对一般的任务提供大量整合性的外挂程式，扩展程度仍很高，提供很多选项让你能够自由的写任何符合需求的工作内容。最棒的是，你能够将这些任务结合创造更强大而复杂的工作。Grunt 的范畴超出仅仅是自动化前端相关的工作，举例来说，当我们在开发时，我们利用它来测试 PHP：

   
   
   
   

    
    
    
    
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
   
   
   
   

我们同样也用它暂时解决在 Vagrant 中自动监测与保护的 rsync（Unix 下的一款应用软体）一些效能问题，这是近来才被引进的方法。Grunt 提供很广泛的外挂程式，从浏览档案夹、诊断讯息、编译程式到最简化你的程式码。它的句法是一致且容易学习的，可以让琐碎的工作变得简单。

LiveReload

你有没有算过，每天平均有多少次会按键盘上的重新整理键呢？非常多，对吧！

LiveReload 是一个简单的 Web 协议，不论档案在哪时候被修改而触发事件，客户都能自行处理事情；客户端和伺服器端都能进入各种不同的实作。

说到 Chrome 的扩充功能，Chrome 商店就是一个很强大的例子。去体验看看吧，你一定能发现很多让生活变得更简单的东西。

以下几个是我们最喜欢的：

1. WhatFont：你可以透过它知道在任何网站上内容的字型是什么，当你在找最适合的文字编排时，或是重新调整美化你的字型风格时，它是非常好用的小工具。

2. Page ruler：另一个很好用的应用程式，主要是因为任何前端开发者，都对像素要求百分之百的完美。

3. Proxy SwitchySharp：说到找出在地化资讯错误最佳的工具就非它莫属，在地化资讯是哪些？比如说电话号码、预设货币等等。

想知道更多吗？在 Chrome App 中你能得到更多资讯！

Mocha/Chai/Sinon

测试测试，测试到你很想吐吗？这是很常发生的，因为需要一大堆引导指令，而且在前端开发的初始阶段没有设​​计好测试，那么后面的工作往往会变得非常困难。

很幸运的是，我们现在有很棒的测试架构，就和你已经在使用的其他语言一样，非常的有用和强大。两个主要的框架是 Jasmine 和 Mocha。

过去我两个都有使用过，最终选择了后者，Mocha。它最主要的优势在于，当你必须和非同步的编码一同运作的时候，在 Javascript 的发展中它最普遍使用的方法。比如说，举一个非常简单的例子，

   
   
   
   

    
    
    
    
Q = require('q');
    
    
    
    
 
    
    
    
    
var AsyncProcess = (function() {
    
    
    
    
    function AsyncProcess() {}
    
    
    
    
 
    
    
    
    
    AsyncProcess.prototype.process = function() {
    
    
    
    
        var deferred;
    
    
    
    
        deferred = Q.defer();
    
    
    
    
        setTimeout((function() {
    
    
    
    
            deferred.resolve(42);
    
    
    
    
        }), 100);
    
    
    
    
        return deferred.promise;
    
    
    
    
    };
    
    
    
    
 
    
    
    
    
    return AsyncProcess;
    
    
    
    
 
    
    
    
    
})();
    
    
    
    
 
    
    
    
    
exports.AsyncProcess = AsyncProcess;
   
   
   
   

这里有两个不同的规格，一个由 Jasmine 写，另一个则是 Mocha/Chai：

   
   
   
   

    
    
    
    
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);
    
    
    
    
        });
    
    
    
    
    });
    
    
    
    
});
   
   
   
   

 

   
   
   
   

    
    
    
    
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 的句法选择是预设的，并以官方的文档作说明，非官方的扩充功能增进了 Jasmine 非同步特色，提供和 Mocha 一样的功能。花一些时间，来了解这个范例以及观察 Mocha 的语法有多清楚。

不像 Jasmine，Mocha 只提供行为的测试架构，更多关于 BDD（Behavior-driven development），而不是假物件（mock，主要存在的目的是协助单元测试程式可以顺利进行）或是断言（assertion，放在程式中的一阶逻辑，如果一个结果为真或为假的逻辑判断式）架构，因为它整合专用架构非常棒，就像是 Chai 和 Sinon，几乎没什么不好的地方。Sinon 有完整的功能来 mock 假物件和 stub 假物件（用途和 mock 很接近）。

举例来说，你可以如何评估的方法，一直以来都使用 Sinon 的间谍类型（撷取自很杰出的文档）：

   
   
   
   

    
    
    
    
// 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 的功能是在断言这方面是非常杰出的，以和平常的语言非常相似的语法，举例来说你可以看到以下的程式码，就知道它很清楚简单：

   
   
   
   

    
    
    
    
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（一个测试程式是否符合需求的测试工具）是 Javascript 的程式测试工具，由AngularJS 的团队写的，现在你可以徜徉在 Mocha、Chai 和 Sinon 中写测试程式，何不同时用它们持续地测试、跑程式，给你实时的回馈呢？

Karma 可以让你从你的工作站到持续整合制造（CI，Continuous Integration）执行你的测试，它能同时发布到多个浏览器（Chrome、Firefox、IE 和 PhantomJS 等等），除此之外，还能跑你的测试来挑战它们，给予你对你的程式码最大的信心。

当然，我们甚至还没有提到任何文字编辑器，SublimeText 和 Vim 我们都有用，它们是我们生产力最最重要的基础。

然而在做开发的过程中，最真实的快乐就是你第一次写的程式进行监测然后得到结果，这是一种实时的成就感，然后接下来你就能将它们发布到浏览器上。

现在你已经非常有能力成为前端的忍者，在你的开发旅途中已经准备好要迎接每个挑战了。但如果您刚好是一名前端工程师，也欢迎您在下面和大家分享喜欢的工具。

原文地址：blog.mention