來試試吧！5個前端工程師必備的最佳開發(fā)工具

原文作者 Arnaud Breton 為前端工程師，特別專注于前端和使用者經(jīng)驗，這篇文章出自于mention blog。以下內(nèi)容由作者以第一人稱撰寫。

過去幾年一直不斷地提到 Web 應用新世代的成長，這些 App 內(nèi)容變得越來越豐富，帶動了前端整體的復雜度大幅增加。

像是 Backbone（藉由提供模型）、AngularJS 和 EmberJS 框架都是創(chuàng)造新 App 非常好的框架，增強了所有 Web 的功能；同時，Web 程式語言 Javascript 在普及度和成熟度上已經(jīng)進步了非常多，而且還能和 NodeJS 在后端協(xié)同工作。

但為了能持續(xù)面對復雜度的新挑戰(zhàn)，開發(fā)者已經(jīng)創(chuàng)造更多工具使整體開發(fā)過程更加流暢，從測試框架到分析工具，這些成熟又有用的工具把最棒的體驗帶給我們的使用者。

就如同剛剛所提到的，我們喜歡能夠幫助我們提供最棒品質(zhì)的軟體，同時也能使得生活變得更加簡單方便，本文要分享給大家 5 個我們每天面對挑戰(zhàn)所使用最棒的工具和框架：

Chrome dev tools

這是目前最好的前端開發(fā)工具！

Chrome 自從它誕生后，就已經(jīng)大量投資在開發(fā)者工具軟體，至今仍不斷的在改善它，每一個發(fā)布會（每六周一次）都會伴隨著它自己的全新開發(fā)功能。

這個開發(fā)工具是一個完整的多元軟體套件，你可以實時編輯 DOM（HTML）/CSS，當進行一個深入的效能分析時，可以一步步找出 Javascript 的錯誤，甚至能增加終端機指令。感謝有它，近來解決了回報效能的問題。

DOM/CSS 編輯器是非常強大的工具，能即時回饋給你的團隊，能夠在 UI/UX 的新功能上很快地執(zhí)行迴圈。

官方網(wǎng)站和 Google Developers YouTube 管道都是資訊的金礦，比如說，命令列的 API（應用程式介面，Application Programming Interface）包含非常多有用的指令，比如說從控制臺功能中的復制指令，復制到剪貼簿上。

許多詳細的使用手冊同樣在 HTML5 Rocks 里都能參考。如果你的好奇心很強，并且想了解瀏覽器究竟是如何運作的，那么你會在這些教學里學到很多東西，幫助你全面掌控開發(fā)周期。

除了上述的之外，最重要的是，透過網(wǎng)絡工具你能知道現(xiàn)在在介面之下到底發(fā)生了什么事情，以及優(yōu)化你的下載速度，時間軸會以更深入的角度來告訴你瀏覽器做了哪些事情。

如果你跟我們一樣充滿好奇心，你可以學到更多關于瀏覽器、Web 是如何運作的，如此一來，你就可以反過來完整的操控應用程式的生命周期。

以我個人觀點來說，如果它們依照現(xiàn)在的路線持續(xù)發(fā)展下去，肯定會變成 Web 供應開發(fā)商最終的IDE（Integrated Developer Environment），最強大的放入整合發(fā)展空間。

Grunt

說到工作自動化，Grunt 是我們的首選。

它是 Javascript 跑任務的專家，針對一般的任務提供大量整合性的外掛程式，擴展程度仍很高，提供很多選項讓你能夠自由的寫任何符合需求的工作內(nèi)容。最棒的是，你能夠?qū)⑦@些任務結(jié)合創(chuàng)造更強大而復雜的工作。Grunt 的范疇超出僅僅是自動化前端相關的工作，舉例來說，當我們在開發(fā)時，我們利用它來測試 PHP：

我們同樣也用它暫時解決在 Vagrant 中自動監(jiān)測與保護的 rsync（Unix 下的一款應用軟體）一些效能問題，這是近來才被引進的方法。Grunt 提供很廣泛的外掛程式，從瀏覽檔案夾、診斷訊息、編譯程式到最簡化你的程式碼。它的句法是一致且容易學習的，可以讓瑣碎的工作變得簡單。

LiveReload

你有沒有算過，每天平均有多少次會按鍵盤上的重新整理鍵呢？非常多，對吧！

LiveReload 是一個簡單的 Web 協(xié)議，不論檔案在哪時候被修改而觸發(fā)事件，客戶都能自行處理事情；客戶端和伺服器端都能進入各種不同的實作。

說到 Chrome 的擴充功能，Chrome 商店就是一個很強大的例子。去體驗看看吧，你一定能發(fā)現(xiàn)很多讓生活變得更簡單的東西。

以下幾個是我們最喜歡的：

1. WhatFont：你可以透過它知道在任何網(wǎng)站上內(nèi)容的字型是什么，當你在找最適合的文字編排時，或是重新調(diào)整美化你的字型風格時，它是非常好用的小工具。

2. Page ruler：另一個很好用的應用程式，主要是因為任何前端開發(fā)者，都對像素要求百分之百的完美。

3. Proxy SwitchySharp：說到找出在地化資訊錯誤最佳的工具就非它莫屬，在地化資訊是哪些？比如說電話號碼、預設貨幣等等。

想知道更多嗎？在 Chrome App 中你能得到更多資訊！

Mocha/Chai/Sinon

測試測試，測試到你很想吐嗎？這是很常發(fā)生的，因為需要一大堆引導指令，而且在前端開發(fā)的初始階段沒有設??計好測試，那么后面的工作往往會變得非常困難。

很幸運的是，我們現(xiàn)在有很棒的測試架構(gòu)，就和你已經(jīng)在使用的其他語言一樣，非常的有用和強大。兩個主要的框架是 Jasmine 和 Mocha。

過去我兩個都有使用過，最終選擇了后者，Mocha。它最主要的優(yōu)勢在于，當你必須和非同步的編碼一同運作的時候，在 Javascript 的發(fā)展中它最普遍使用的方法。比如說，舉一個非常簡單的例子，這里有兩個不同的規(guī)格，一個由 Jasmine 寫，另一個則是 Mocha/Chai：

Jasmine 的句法選擇是預設的，并以官方的文檔作說明，非官方的擴充功能增進了 Jasmine 非同步特色，提供和 Mocha 一樣的功能。花一些時間，來了解這個范例以及觀察 Mocha 的語法有多清楚。

不像 Jasmine，Mocha 只提供行為的測試架構(gòu)，更多關于 BDD（Behavior-driven development），而不是假物件（mock，主要存在的目的是協(xié)助單元測試程式可以順利進行）或是斷言（assertion，放在程式中的一階邏輯，如果一個結(jié)果為真或為假的邏輯判斷式）架構(gòu)，因為它整合專用架構(gòu)非常棒，就像是 Chai 和 Sinon，幾乎沒什么不好的地方。Sinon 有完整的功能來 mock 假物件和 stub 假物件（用途和 mock 很接近）。

舉例來說，你可以如何評估的方法，一直以來都使用 Sinon 的間諜類型（擷取自很杰出的文檔）：

Chai 的功能是在斷言這方面是非常杰出的，以和平常的語言非常相似的語法，舉例來說你可以看到以下的程式碼，就知道它很清楚簡單：

Karma

最后一個是 Karma，Karma（一個測試程式是否符合需求的測試工具）是 Javascript 的程式測試工具，由 AngularJS 的團隊寫的，現(xiàn)在你可以徜徉在 Mocha、Chai 和 Sinon 中寫測試程式，何不同時用它們持續(xù)地測試、跑程式，給你實時的回饋呢？

Karma 可以讓你從你的工作站到持續(xù)整合制造（CI，Continuous Integration）執(zhí)行你的測試，它能同時發(fā)布到多個瀏覽器（Chrome、Firefox、IE 和 PhantomJS 等等），除此之外，還能跑你的測試來挑戰(zhàn)它們，給予你對你的程式碼最大的信心。

當然，我們甚至還沒有提到任何文字編輯器，SublimeText 和 Vim 我們都有用，它們是我們生產(chǎn)力最最重要的基礎。

然而在做開發(fā)的過程中，最真實的快樂就是你第一次寫的程式進行監(jiān)測然后得到結(jié)果，這是一種實時的成就感，然后接下來你就能將它們發(fā)布到瀏覽器上。

現(xiàn)在你已經(jīng)非常有能力成為前端的忍者，在你的開發(fā)旅途中已經(jīng)準備好要迎接每個挑戰(zhàn)了。但如果您剛好是一名前端工程師，也歡迎您在下面和大家分享喜歡的工具。

原文地址：blog.mention
譯文地址：techorange

【優(yōu)設網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關于優(yōu)設網(wǎng)================
"優(yōu)設網(wǎng)uisdc.com"是一個分享網(wǎng)頁設計、無線端設計以及PS教程的干貨網(wǎng)站。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量71萬的人氣微博@優(yōu)秀網(wǎng)頁設計 ，歡迎關注獲取網(wǎng)頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網(wǎng)站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經(jīng)驗分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設計 微信號：【youshege】優(yōu)設哥的全拼
您也可以通過掃描下方二維碼快速添加：