在過(guò)去的幾年時(shí)間里，出現(xiàn)了許多全新的網(wǎng)頁(yè)應(yīng)用程序，不過(guò)，由于應(yīng)用程序的功能越來(lái)越豐富，也導(dǎo)致了前端開(kāi)發(fā)的復(fù)雜度大幅增加。

現(xiàn)在也有不少前端開(kāi)發(fā)工具，比如Backbone和EmberJS框架都能提供穩(wěn)定的App開(kāi)發(fā)解決方案。同時(shí)，Javascript的應(yīng)用也越來(lái)越常廣泛，而且它還能和Node.JS在后端協(xié)同工作，快速搭建易于擴(kuò)展的網(wǎng)絡(luò)應(yīng)用。實(shí)際上，為了應(yīng)對(duì)前端開(kāi)發(fā)復(fù)雜度所帶來(lái)的挑戰(zhàn)，開(kāi)發(fā)人員創(chuàng)建了許多工具來(lái)簡(jiǎn)化開(kāi)發(fā)流程。從測(cè)試框架，到分析工具，前端開(kāi)發(fā)工具已經(jīng)非常成熟了，正是得益于這些有用的工具才讓用戶體驗(yàn)到最佳的互聯(lián)網(wǎng)服務(wù)。

開(kāi)發(fā)人員都喜歡使用高質(zhì)量的軟件開(kāi)發(fā)工具，本文就推薦五個(gè)優(yōu)秀的前端開(kāi)發(fā)工具和框架，希望能供開(kāi)發(fā)人員參考。

Chrome dev Tool

 

這是目前最好的前端開(kāi)發(fā)工具。自從其誕生以來(lái)，Chrome在其開(kāi)發(fā)者工具中投入了大量精力，而且直到現(xiàn)在，谷歌仍在不斷優(yōu)化這些工具。一般而言，谷歌會(huì)在每六周發(fā)布對(duì)Chrome開(kāi)發(fā)者工具的優(yōu)化，并推出一些全新功能。

Chrome開(kāi)發(fā)工具是各種工具組成的套件，開(kāi)發(fā)人員可以實(shí)時(shí)編輯DOM (HTML)/CSS，逐步調(diào)試JavaScript，并幫助開(kāi)發(fā)者更加深入地進(jìn)行性能分析。Chrome開(kāi)發(fā)工具甚至還可以新增terminal（DevTool?Terminal是一款Chrome開(kāi)發(fā)工具的擴(kuò)展，可以幫助開(kāi)發(fā)者在瀏覽器中訪問(wèn)終端。如果你經(jīng)常在命令行工作，這款擴(kuò)展將十分適合你），幫助開(kāi)發(fā)人員解決相關(guān)渲染性能問(wèn)題。

DOM/CSS編輯器是一個(gè)非常強(qiáng)大的工具，可以為你的開(kāi)發(fā)團(tuán)隊(duì)提供實(shí)時(shí)反饋，在開(kāi)發(fā)UI/UX新功能的時(shí)候可以支持快速迭代。

在官網(wǎng)和谷歌開(kāi)發(fā)者的YouTube頻道上面有許多含金量很高的信息。其中一個(gè)名為“命令行API”的章節(jié)就為開(kāi)發(fā)人員提供了大量非常有用的命令。比如，你可以調(diào)用一個(gè)特殊的“復(fù)制”功能，就可以從控制臺(tái)復(fù)制任何東西（比如對(duì)象，函數(shù)返回）到剪切板上面。另外，在HTML5 Rocks上面還有很多優(yōu)秀的教程。如果你的好奇心很強(qiáng)，并且想了解瀏覽器究竟是如何工作的，那么能在這些教程里學(xué)到很多東西，幫助你全面掌控應(yīng)用程序開(kāi)發(fā)周期。

如果谷歌不斷優(yōu)化Chrome開(kāi)發(fā)工具的話，這套工具最終會(huì)成為網(wǎng)頁(yè)的集成開(kāi)發(fā)環(huán)境（IDE），直接和瀏覽器進(jìn)行捆綁，為開(kāi)發(fā)人員提供更加強(qiáng)大的開(kāi)發(fā)空間。

Grunt

Grunt在任務(wù)自動(dòng)化中很有用，它是一個(gè)基于任務(wù)的JavaScript命令行構(gòu)建工具，支持捆綁任務(wù)插件。此外，Grunt是可擴(kuò)展的，開(kāi)發(fā)人員可以按照自己的需要編寫不同的任務(wù)，而且Grunt支持將多任務(wù)整合在一起，提供更強(qiáng)大的功能。

如今，Grunt已經(jīng)不再局限于簡(jiǎn)單的前端自動(dòng)化工作任務(wù)流了，在PHP開(kāi)發(fā)時(shí)，就可以使用Grunt進(jìn)行測(cè)試工作，如下所示：

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還可以用來(lái)創(chuàng)建工作區(qū)，此外開(kāi)發(fā)人員在創(chuàng)建一個(gè)新項(xiàng)目的時(shí)候，往往需要做一些繁瑣且重復(fù)的必要工作，而Grunt提供了不少插件，可以使這些瑣碎的工作變得簡(jiǎn)單。

LiveReload

每天你會(huì)在鍵盤上點(diǎn)擊多少次“刷新”鍵呢？很多次吧。LiveReload是一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)協(xié)議，可以觸發(fā)事件到客戶端，無(wú)論文件什么時(shí)候被改動(dòng)，客戶端都能及時(shí)刷新、處理事件。

一般來(lái)說(shuō)，LiveReload可以和Grunt捆綁在一起使用，搭建本地前端開(kāi)發(fā)環(huán)境。而在客戶端，LiveReload則會(huì)提供一個(gè)簡(jiǎn)單的Chrome擴(kuò)展程序。談到Chrome擴(kuò)展程序，Chrome store絕對(duì)是一個(gè)好地方，你可以到上面逛一逛，就會(huì)發(fā)現(xiàn)里面有不少好東西，這里推薦幾個(gè)，拋磚引玉：

1、? WhatFont，它是一個(gè)書簽欄工具，采用鼠標(biāo)懸浮功能特性，點(diǎn)擊后就可以告訴用戶在網(wǎng)站上所指的字體屬性、字體名稱、大小、顏色等等，非常方便。此外，它還可以幫助開(kāi)發(fā)人員調(diào)試字體風(fēng)格。

2、? Page ruler，它可以幫助開(kāi)發(fā)人員測(cè)量網(wǎng)站中任何元素的尺寸，像素的寬度和高度。

3、? Proxy SwithcySharp，它可以用來(lái)幫助開(kāi)發(fā)人員調(diào)試本地化信息，包括默認(rèn)貨幣、電話號(hào)碼等

4、? 當(dāng)然，最受歡迎的當(dāng)屬Chrome app。

Mocha/Chai/Sinon

反復(fù)測(cè)試有沒(méi)有讓你覺(jué)得想吐？通常情況下，如果在前端開(kāi)發(fā)的初始階段沒(méi)有設(shè)計(jì)好測(cè)試，那么后面的工作往往會(huì)變得非常困難。幸運(yùn)的是，我們有不少優(yōu)秀的測(cè)試框架，它們就像之前使用過(guò)的那些開(kāi)發(fā)語(yǔ)言一樣強(qiáng)大。目前主流的兩個(gè)測(cè)試框架就是Jasmine和Mocha。

按照筆者已往的經(jīng)驗(yàn)，更愿意推薦Mocha。它是一個(gè)功能豐富的Javascript測(cè)試框架，支持異步測(cè)試，這在Javascript中經(jīng)常要用到。下面是兩個(gè)測(cè)試案例，第一個(gè)是用Jasmine寫的，第二個(gè)使用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所選的為默認(rèn)語(yǔ)法，只有通過(guò)插件才能有Mocha一樣的功能，而后者簡(jiǎn)潔的多。

和Jasmine不同，Mocha僅提供行為測(cè)試結(jié)構(gòu)，這種測(cè)試框架通常對(duì)應(yīng)的是行為驅(qū)動(dòng)開(kāi)發(fā)，也就是BDD。但是這點(diǎn)并不會(huì)對(duì)Mocha產(chǎn)生負(fù)面影響，它可以與Chai和Sinon這樣的輔助測(cè)試工具結(jié)合使用。

下面，就是調(diào)用Sinon測(cè)試工具集內(nèi)的spy類進(jìn)行測(cè)試的一個(gè)例子：

// 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的特點(diǎn)在于，開(kāi)發(fā)人員可以使用和自然語(yǔ)言相近的聲明語(yǔ)法。不妨可以參考下面的例子，調(diào)用Chai中的should聲明語(yǔ)法。

foo.should.be.a('string');
foo.should.equal('bar');
foo.should.have.length(3);
tea.should.have.property('flavors').with.length(3);

很清晰，對(duì)嗎？現(xiàn)在就趕緊在你自己的代碼上測(cè)試一下吧！

Karma

雖然筆者把Karma放在了最后一個(gè)，但它仍然是一款非常重要的前端測(cè)試工具。Karma的前身是Testacular，一個(gè)Javascript測(cè)試工具。Karma開(kāi)發(fā)者和開(kāi)發(fā)AngularJS的是同一批人。如果你使用Mocha、Chai以及Sinon，那么連續(xù)不斷的運(yùn)行上述這些測(cè)試框架，會(huì)提供實(shí)時(shí)的反饋嗎？

Karma允許開(kāi)發(fā)人員從工作站（在持續(xù)運(yùn)行模式下）到生產(chǎn)調(diào)用指示，都能進(jìn)行測(cè)試。它還支持多種瀏覽器，包括Chrome、Firefox、IE、PhantomJS，讓你對(duì)自己的代碼充滿自信。

在進(jìn)行開(kāi)發(fā)工作時(shí)，第一快樂(lè)的就是在自己的電腦上寫代碼，并實(shí)時(shí)得到結(jié)果反饋；第二快樂(lè)的，就是自己的程序能夠應(yīng)用在各種瀏覽器上面，想必上述這兩點(diǎn)能夠得到絕大多數(shù)開(kāi)發(fā)人員的共鳴吧?，F(xiàn)在，你是否已經(jīng)做好了準(zhǔn)備，化身成為一個(gè)“前端忍者”，去挑戰(zhàn)一切困難了呢？當(dāng)然，這里沒(méi)有提到一些文本代碼編輯器，比如Sublime Text和Vim，但是它們都是很好的開(kāi)發(fā)工具。另外，本文使用的例子都來(lái)自GitHub Gist。

如果您恰巧也是一名前端開(kāi)發(fā)工程師，那么是否也有自己喜歡的工具呢？歡迎在下面的評(píng)論欄里和大家分享。

VIA TNW

相關(guān)內(nèi)容

幫助設(shè)計(jì)師和開(kāi)發(fā)者的9種CSS技巧

雷峰網(wǎng)原創(chuàng)文章，未經(jīng)授權(quán)禁止轉(zhuǎn)載。詳情見(jiàn)轉(zhuǎn)載須知。