五個值得嘗試的前端開發工具

時間 2019-11-17

標籤五個值得嘗試前端開發工具简体版

原文原文鏈接

在過去的幾年時間裏，出現了許多全新的網頁應用程序，不過，因爲應用程序的功能愈來愈豐富，也致使了前端開發的複雜度大幅增長。php

如今也有很多前端開發工具，好比Backbone和EmberJS框架都能提供穩定的App開發解決方案。同時，Javascript的應用也愈來愈常普遍，並且它還能和Node.JS在後端協同工做，快速搭建易於擴展的網絡應用。實際上，爲了應對前端開發複雜度所帶來的挑戰，開發人員建立了許多工具來簡化開發流程。從測試框架，到分析工具，前端開發工具已經很是成熟了，正是得益於這些有用的工具才讓用戶體驗到最佳的互聯網服務。html

開發人員都喜歡使用高質量的軟件開發工具，本文就推薦五個優秀的前端開發工具和框架，但願能供開發人員參考。前端

Chrome dev Tool

這是目前最好的前端開發工具。自從其誕生以來，Chrome在其開發者工具中投入了大量精力，並且直到如今，谷歌仍在不斷優化這些工具。通常而言，谷歌會在每六週發佈對Chrome開發者工具的優化，並推出一些全新功能。html5

Chrome開發工具是各類工具組成的套件，開發人員能夠實時編輯DOM (HTML)/CSS，逐步調試JavaScript，並幫助開發者更加深刻地進行性能分析。Chrome開發工具甚至還能夠新增terminal（DevTool Terminal是一款Chrome開發工具的擴展，能夠幫助開發者在瀏覽器中訪問終端。若是你常常在命令行工做，這款擴展將十分適合你），幫助開發人員解決相關渲染性能問題。git

DOM/CSS編輯器是一個很是強大的工具，能夠爲你的開發團隊提供實時反饋，在開發UI/UX新功能的時候能夠支持快速迭代。github

在官網和谷歌開發者的YouTube頻道上面有許多含金量很高的信息。其中一個名爲「命令行API」的章節就爲開發人員提供了大量很是有用的命令。好比，你能夠調用一個特殊的「複製」功能，就能夠從控制檯複製任何東西（好比對象，函數返回）到剪切板上面。另外，在HTML5 Rocks上面還有不少優秀的教程。若是你的好奇心很強，而且想了解瀏覽器到底是如何工做的，那麼能在這些教程裏學到不少東西，幫助你全面掌控應用程序開發週期。web

若是谷歌不斷優化Chrome開發工具的話，這套工具最終會成爲網頁的集成開發環境（IDE），直接和瀏覽器進行捆綁，爲開發人員提供更增強大的開發空間。shell

Grunt

Grunt在任務自動化中頗有用，它是一個基於任務的JavaScript命令行構建工具，支持捆綁任務插件。此外，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絕對是一個好地方，你能夠到上面逛一逛，就會發現裏面有很多好東西，這裏推薦幾個，拋磚引玉：

一、 WhatFont，它是一個書籤欄工具，採用鼠標懸浮功能特性，點擊後就能夠告訴用戶在網站上所指的字體屬性、字體名稱、大小、顏色等等，很是方便。此外，它還能夠幫助開發人員調試字體風格。

二、 Page ruler，它能夠幫助開發人員測量網站中任何元素的尺寸，像素的寬度和高度。

三、 Proxy SwithcySharp，它能夠用來幫助開發人員調試本地化信息，包括默認貨幣、電話號碼等

四、固然，最受歡迎的當屬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。

若是您恰巧也是一名前端開發工程師，那麼是否也有本身喜歡的工具呢？歡迎在下面的評論欄裏和你們分享。