Sublime Text
SublimeText 是一款非常精巧的文字編輯器，適合編寫程式碼、做筆記、寫文章。它使用者介面十分整潔，功能非同凡響，效能快得出奇。這些非常棒的特性包括任意跳轉（GotoAnything）、多重選擇（multiple selections）、指令皮膚（command palette）、免打擾模式（distraction freemode）、分割槽編輯（split editing）、快速專案切換（instant project switch），你還可以隨意地自定義更多功能。
也許你並不瞭解或者熟悉SublimeText，這不奇怪。每個程式設計師都有符合自己使用習慣的IDE或者編輯器，一般也不會輕易去更換。不過，程式設計師的提升需要不斷地嘗試，編輯器也不例外。
教程：這裡有一個長度不到1小時的免費中文視訊，幫助你快速地瞭解並上手Sublime Text。
Yeoman
Yeoman 是一個新興的工具。它結合了 Yo、Grunt 和 Bower等工具，組成了一個完整的工具集合，提供各種 Web 應用開發中所需的實用功能。Yeoman的最大優勢在於它整合了各種流行的實用工具，提供了一站式的解決方案，使得 Web 應用開發中的很多方面變得簡單。Yeoman使得開發人員可以專注於應用本身的實現，而不用在搭建應用的基礎結構、進行任務構建和其他輔助任務上花費過多的時間和精力。
教程：Yeoman官方教程。
Grunt
Grunt 是一個 JavaScript任務執行工具，其核心理念是自動化。在 Web 應用開發過程中，會有很多不同的任務需要執行。這些任務與 Web 應用開發中的不同型別的元件和所處的階段相關。比如對JavaScript 來說，在開發階段會需要使用 JSLint 和 JSHint 這樣的工具來檢查 JavaScript程式碼的質量；在構建階段，從前端效能的角度出發，會需要把多個 JavaScript 檔案在合併之後進行壓縮。對於 CSS檔案也有類似的任務需要執行。其他的任務還包括壓縮圖片、合併壓縮和混淆 JavaScript程式碼以及執行自動化單元測試用例等。藉助Grunt，這些繁瑣的重複工作，可以自動化完成。讓前端開發工程師可以專注與開發本身，極大地提高了開發效率。
教程：一個小時的免費中文視訊教程，快速瞭解Grunt。
Bower
Bower 是一個前端庫管理工具，可以很好的解決在 Web應用中引用第三方庫時可能遇到的問題。在 Web 應用開發中，一般都會使用很多第三方 JavaScript 庫，比如 jQuery 和 TwitterBootstrap 這樣的常見庫。傳統的做法是從這些庫的網站上直接下載所需版本的 JavaScript 庫檔案，放到 Web 應用的某個目錄中，然後在 HTML頁面中引用。這種做法的問題在於引入了很多額外的工作量，包括查詢所需的 JavaScript 庫檔案、下載和管理等。一些 JavaScript庫有很多個版本，也依賴於其他 JavaScript 庫。對於給定版本的某個 JavaScript 庫，需要找到它所依賴的相容版本的其他 JavaScript庫。這可能是一個遞迴的過程，會花費很多的時間。Bower 所提供的功能類似於 Java 開發中會用到的 Apache Ivy、Apache Maven 或Gradle 等工具。
教程：上手Bower （英文）
Firebug
Firebug 是Firefox下的一款擴充套件。它集HTML檢視和編輯、Javascript控制檯、網路狀況監視器於一體，是開發JavaScript、CSS、HTML和Ajax的得力助手。Firebug如同一把精巧的瑞士軍刀，從各個不同的角度剖析Web頁面內部的細節層面，給Web開發者帶來很大的便利。
Firebug 除了功能強大，還非常容易上手。大多數Web開發者對它並不陌生，但未必完全瞭解這個神器，並最大化地發揮它的價值。
教程：全面介紹Firebug的免費中文視訊教程。
Fiddler
Fiddler 是最強大最好用的Web除錯工具之一。它能記錄所有客戶端和伺服器的http和https請求，允許你監視，設定斷點，甚至修改輸入輸出資料，Fiddler包含了一個強大的基於事件指令碼的子系統，並且能使用.net語言進行擴充套件。你對HTTP協議越瞭解， 你就能越掌握Fiddler的使用方法.你越使用Fiddler,就越能幫助你瞭解HTTP協議.Fiddler無論對開發人員或者測試人員來說，都是非常有用的工具。
教程：不到一個小時的免費中文視訊教程，快速瞭解Fiddler。
開發工具之外的Tips
靠譜的“梯子”
技術是無邊界的，然而我們卻被限制在區域網裡。與其花費很多精力去尋找各種免費的代理和工具，不如找一個靠譜的“梯子”，或者自己搭建一個，通過SSH通道，然後再結合使用瀏覽器擴充套件，這並不難。即使是需要為梯子購買VPS，這種小額的花費也是非常值得的！因為這種投資可以節省你大量的時間，而且幫助你保持通暢的思維，工作容易進入“流”狀態（參見維基百科），而不是“撞牆”後思路中斷。
善用搜尋引擎
首先選擇一個好的搜尋引擎，然後掌握一些常用的搜尋技巧。對於程式設計師，Google是不二之選。訪問不了Google？請參考上一條。做了一個明智的選擇後，你需要掌握一些常用的搜尋技巧，幫助你快速地找到需要的內容。大海撈針，信手拈來。這篇文章《如何使用GOOGLE高階搜尋技巧》結合例項分享了很多實用的方法，推薦一讀。
結束語
在Web開發過程中，還有哪些對你的開發效率有幫助的工具和技巧呢？請在評論中分享一下私藏的乾貨吧~
參考資料：
《Fiddler 教程》
《Yeoman：Web 應用開發流程與工具》
《Yeoman官方教程》
《如何在Google中進行搜尋》 （打不開？請參考開發工具之外的第一條Tips）
《如何用好 Google等搜尋引擎？》
《Flow (psychology)》
本文轉載自：http://blog.jobbole.com/72222/
相關閱讀
評論(4)