第一篇：5個前端工程師必備的最佳開發工具

原文作者 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：

我們同樣也用它暫時解決在 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 的發展中它最普遍使用的方法。比如說，舉一個非常簡單的例子，這里有兩個不同的規格，一個由 Jasmine 寫，另一個則是 Mocha/Chai：

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

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

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

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

Karma

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

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

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

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

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

第二篇：前端工程師常用工具

前端工程師常用工具

雖然有一段時間不做前端工程師，但還是免不了做前端的思維，碰到了很好的前端實用工具帖還是忍不住轉了過來。這個帖子被轉了好多次了，也不知道原本的作者是誰，但無論是誰都是萬分的感謝，沒有您的整理也沒有大家的方便。

帖子整理了前端工程師常用的工具手冊以及一些著名的相關博客，是工作中不可缺少的資料。概要：

? ?

?

? ? ?

? ? ? ?IE下的調試工具前端開發者社區及權威網站前端開發工具集

在線工具集

?

o o o o ?

o o o o 棄他了

?

o

o o ?

o

o o 其他：—— 做某些東西(Firefox插件)時需要唯一資源標志符時用CSS類： CSS選擇器性能測試—— CSS格式化工具 CSS Compressor —— CSS壓縮 書籍類： Book Shelf 2.0 beta —— 薦，分類很清晰，下載很方便原版圖書免費下載鏈接收集站JavaScript類：—— JavaScript格式化工具，效果很理想 AJAX Libraries API—— 以前一直用這個壓JS，自從有了TBCompressor，就放

常用Firefox插件

? ? 支付寶安全控件 和 旺旺協議 —— 網購專用，Firefox+浦發網銀，無敵了—— 這個不用介紹了吧，附空幃的外部編輯器亂碼修正版

o o o o o ?

? ? ? ? ? ? ?—— 支持Cookie的查看和編輯—— 調試性能的，用起來比較麻煩，沒試過—— Why Slow? YUI出品—— 把設計稿直接拖到Firefox里進行對比—— JS高亮，性能不是很理想—— 簡化在Firefox里切換Fiddler的操作，感謝Taobao UED的空幃同學—— 把Html, Dom, JavaScript等手冊放在側欄里，可以自定義增加，快捷鍵Ctrl+F9。可以在找到更多的Package。—— 針對每個站點發送想要的HTTP Referer—— 看某個網站不爽，寫個小腳本來優化下還是不錯的—— 查看當前Http鏈接狀態，類似IE下的HttpWatch—— 切換User-Agent，同時開發iphone和web版本的時候很方便—— 穿墻工具，配合使用很和諧

IE下的調試工具

?—— 非常強悍的一款http流查看工具，默認支持IE，其他瀏覽器可以設置將

{Document}ScriptsBrowserPAC.js設為代理進行使用。Firefox下可用上述”Fiddler 開關”進行快速切換。支持插件。

? ?—— 查看元素、禁用緩存、禁用CSSJS、Outline元素、查看生成的源碼等功能，IE8自帶了一個加強版的。+—— 調試JS用，雖然報錯還是有誤差，但是

我已經滿足了。安裝順序是：Microsoft Script Debugger，Companion.JS，在”IE選項-高級”里取消禁用腳本調試。

?

o

o 多版本IE共存兩種方案： IE7/8 +—— 大眾型配置，可以基本滿足日常需要。IE6 +—— 在IE 6用戶占絕對優勢以及IE 6神奇bug

滿天飛的時代，我還是推薦這種方案，因為只有神奇的原裝IE 6，才能抵擋運營神奇的問題。另外如果還有其他機器可供支配的話，建議再裝個IE 8 + IE Tester，因為IE 8下的Developer Toolbar還是有很大改進的，調試起來會方便一些。

?

o o o 以下三個軟件相對不重要些：—— http流查看—— 可查看JS生成的源碼—— 網速限制

參考手冊

?

資料。

?

?

?

? 蘇昱的CSS中文手冊和Dom中文手冊XMLHTTP參考手冊—— 整理的版本，包含了W3C手冊以及其他有用的? ?

?

?

? ? ? 和()PHP手冊

批處理工具

? ? ?—— 淘寶UED的JS/CSS壓縮工具，詳見—— png優化工具—— jpeg去冗余meta工具

IDE及其他工具

?

? ?

?—— 灰常灰常好用，灰常灰常移動，見

Bookmarklet(右鍵另存)

? ? ? ?——————，—— for IE 開發者社區及權威網站

? ? ? ? ? ?

? ? ? ? ? ? ? ?(Web 前端開發技術專題)—— 在線PPT分享，資源豐富—— Web開發人員的百科全書(香港，維基百科

推薦訂閱的博客和網站(排名不分先后)

?

o

o

o

?

o

o

o 國內 內容聚合：，，團隊Blog：淘寶，口碑，阿里巴巴國際站，阿里巴巴中文站，阿里巴巴中文站前端開發團隊(方凳)，阿里媽媽，支付寶，阿里軟件，19樓，九天音樂，金蝶與友商網 個人Blog，這里列出的是原創并更新相對頻繁的博客，如有遺漏，請告之：懌飛，手氣不錯，Realazy，old9(需穿墻術)，沙灘涼鞋(空幃)，射雕(玉伯)，Aether，振之，嗷嗷，，，，，，，盧力，CSS森林(Ghost)，Twinsen，Gulu77，Rlog，Dlog，子鼠，西風坊 …

? ?

?

?

用

?

?

?

?浮動標簽清除浮動方法小結 前端工程師國外 內容聚合：，，，，團隊Blog：，個人Blog：John Resig，PPK: QuirksMode，Douglas Crockford，Dean Edwards，，，

第三篇：什么是前端開發工程師

www.tmdps.cn

什么是前端開發工程師

前端開發工程師是Web前端開發工程師的簡稱，是近五年才真正開始受到重視的一個新興職業。Web前端開發技術是一個先易后難的過程，主要包括三個要素：HTML（標準通用標記語言下的一個應用）、CSS和JavaScript，這就要求前端開發工程師不僅要掌握基本的Web前端開發技術，網站性能優化、SEO和服務器端的基礎知識，而且要學會運用各種工具進行輔助開發以及理論層面的知識，包括代碼的可維護性、組件的易用性、分層語義模板和瀏覽器分級支持等。

前端開發工程師是一個很新的職業，在國內乃至國際上真正開始受到重視的時間2005年開始，是指Web前端開發工程師的簡稱。Web前端開發是從美工演變而來的，名稱上有很明顯的時代特征。在互聯網的演化進程中，Web 1.0時代，網站的主要內容都是靜態的，用戶使用網站的行為也以瀏覽為主。

2005年以后，互聯網進入Web 2.0時代，各種類似桌面軟件的Web應用大量涌現，網站的前端由此發生了翻天覆地的變化。網頁不再只是承載單一的文字和圖片，各種富媒體讓網頁的內容更加生動，網頁上軟件化的交互形式為用戶提供了更好的使用體驗，這些都是基于前端技術實現的。

www.tmdps.cn

隨著Web 2.0概念的普及和W3C組織的推廣，網站重構的影響力正以驚人的速度增長。XHTML+CSS布局、DHTML和Ajax像一陣旋風，鋪天蓋地席卷而來，包括新浪、搜狐、網易、騰訊、淘寶等在內的各種規模的IT企業都對自己的網站進行了重構。

（ps：本文章由北大青鳥廣安門校區搜集自互聯網）

第四篇：前端工程師個人介紹

前端工程師個人介紹

篇一：web前端開發工程師 個人簡歷模板 找web前端開發工程師就上才智尚招聘網 找web前端開發工程師就上才智尚招聘網

找web前端開發工程師就上才智尚招聘網

篇二：web前端開發工程師_個人簡歷模板

找web前端開發工程師就上才智尚招聘網

找web 前端開發工程師就上才智尚招聘網

篇三：應聘前端工程師簡歷模板

個人簡歷

第五篇：前端工程師的崗位職責

前端工程師的崗位職責

崗位職責：

1、負責網站前端開發，實現產品的頁面交互及功能實現;

2、與程序開發人員緊密合作，制作前端及后端程序接口標準;

3、完成產品的設計、開發、測試、修改bug等工作，包括業務需求的溝通，功能模塊詳細設計，業務功能實現和功能變更維護;

4、跟蹤研究HTML5和最新前端技術，參與前端框架和技術規范的開發制定。

5、持續的優化前端體驗和頁面響應速度，優化代碼并保持良好兼容性，提升web界面的友好和易用;

崗位要求：

1.具有___年以上JavaScript語言為主的Web前端開發經驗;

2.熟悉es6，nodejs;熟悉mvvm開發模式;熟悉使用react,vue,angularjs其中一種或多種框架，vue優先，精通webpack，babel等工具;

3.熟悉Ajax，CSS等Web相關前端技術、熟悉HTML5、CSS3;

4.熟悉各主流瀏覽器的兼容性調試，有相關的性能優化經驗，具有良好的編程習慣;

5.具有很強的業務需求分析能力、問題定位和溝通表達能力;

6.具備較強的學習能力和主動性，有良好的時間和流程意識;

7.具備一定的美工經驗優秀。

篇二

崗位職責：

1、依據產品需求完成高質量的包括PC端和移動端的開發和維護;

2、利用HTML/CSS/JavaScript等各種Web技術進行產品的前端開發;

3、解決開發中遇到的各種前端技術問題,和實現產品,后臺開發提出的前端需求.應聘要求：

1、___年以上前端開發經驗，計算機及相關專業本科及以上學歷;

2、精通JavaScript/HTML(5)/CSS(3)等前端技術，具有豐富的頁面性能、瀏覽器兼容性實踐經驗;

3、熟練運用主流的JS開發框架，如：jQuery、Zepto、Angular、Vue、React等，VUE必須熟練運用;

4、技術視野廣闊，有主導前端技術方案設計的能力和經驗，能夠獨立承擔項目開發工作;

5、良好的團隊合作精神和積極主動的溝通意識，具有很強的學習能力和對新技術的追求精神，樂于分享。

篇三

崗位職責：

1、配合前端組長工作，實現前端框架設計實現，參與設計文檔編寫;

2、根據UI設計師提供的設計圖，優化代碼并保持在各瀏覽器下良好的兼容性;

3、配合后臺開發人員實現產品界面和功能;

4、對完成的頁面進行維護和對網站前端性能做相應的優化;

5、解決項目開發過程中遇到的技術和業務難題，高質量完成web前端開發工作。

任職資格：

1.計算機相關專業畢業，___年以上前端開發經驗;

2、精通jquery，requireJs、glup、nodejs等框架技術;

3、有前后端分離經驗，解決多瀏覽器兼容性問題有一定的經驗，對組件封裝和代碼規范有實踐經歷，有前端框架搭建維護經驗者優先;

4、了解react、vue等MVVM框架;

5、較強責任心，具備吃苦耐勞和團隊協作精神。