讓你愛不釋手！前端設計開發的10大利器

01-29

原文鏈接：From design to development, 10 tools I can』t live without
作者：Jonathan Z. White

Atom

Atom 是由Github推出的開源代碼編輯器。過去的一年裡我使用的最多的就是它。Atom擁有插件管理、自動補全、主題等所有必要的功能。

相比Sublime的插件管理界面，Atom簡直人性化太多了。你可以使用APM或者圖形界面來管理你的插件。不需要手動修改設置文件。

在Atom剛剛推出的時候它確實很慢，不過現在的版本運行起來已經非常快了。只有在打開一些巨型文件的時候才會出現卡頓。

要是你對Atom的性能優化感興趣的話，可以閱讀Moving Atom To React 和 Implement text editor DOM updates manually instead of via React

DragDis是一個收集設計靈感的工具，可以安裝Chrome插件，使用起來非常方便。

我自己是根據每周的時間來分類我的素材的，這也能讓我很好的記錄自己品味的變化。

DragDis也支持全屏查看，用起來真是賞心悅目。

iTerm是一個非常簡潔的控制台應用。在iTerm2中有許多新特性，例如無限制分割界面，直接在控制台中查看圖片，搜索等。用起來比原生控制台要方便多了。

Muzli是一個設計類資訊內容聚合的Chrome插件。包含了Designer News, Dribbble, Behance在內的所有主流設計類網站內容。Muzli 默認會在你打開的新標籤頁顯示。

最棒的一點是Muzli還有一個編輯推薦板塊，這就感覺有一個私人助理每天專門為你整理前段設計資訊一樣。

很多開發者都喜歡享受咖啡廳愜意的環境。Noiz.io把這種體驗帶到了你的家中。它可以播放包括雨聲、咖啡廳、雷聲、海浪等環境背景音，讓你感覺漸入佳境。

Invision 是一個可協作的原型設計平台，非常適合前端開發者和設計師之間進行協作。設計師可以上傳設計稿，並添加鏈接把它們串聯起來。

通過為頁面上不同的部分添加鏈接，設計師可以很好地為用戶和開發者解釋交互流程。當作用戶調研測試工具也非常好用。

Invision 最近也推出了名為Boards的素材收集功能，你也可以通過這些素材創建模板，並且能夠和團隊成員協同使用。

文字排版是設計中非常重要的內容。What the Font是一個非常棒的Chrome插件，只需通過點選就可以知道網頁上使用的是什麼字體。

作為一名前端開發者，經常需要測試調用API，例如和後端的介面協同、微信小程序開發等等。Postman可以讓RESTful API的測試變得異常輕鬆。

只需要在圖形化的操作界面上輸入請求地址和參數，Postman就能夠以多種格式返回請求的結果。

Wappalyzer是一個Chrome插件，可以讓你查看當前的網站使用了那些庫和框架，使用什麼伺服器，什麼語言等等。你還能在其官網查看當前各類框架類庫的流行趨勢。可以讓你發現許多網站的秘密襖~

Boom 2是Mac上的一個均衡器軟體。寫代碼的時候來點音樂助興再好不過了。使用Boom 2你可以自定義音樂的EQ.

Boom 中也包含了許多預置的聲音效果，和Bose耳機搭配使用可以讓你獲得完全不同的聽覺體驗。

這裡還有許多不勝枚舉的插件和應用: JSON Viewer for Chrome, Noon Pacific, Flux, Better Snap Tool.

要是上面列出的這些推薦中沒有你最喜歡的，歡迎在評論區和大家分享。