前端開發人員使用的生產力工具

做爲一個前端工程師，工做這幾年遇到並收藏了不少好用的工具，給你們分享一下。

• 瀏覽器插件
• 系統應用
• 在線工具

ps: 其實還有github的一些好工具或好項目，有時間我會補上的。（實際上是由於懶得弄

瀏覽器插件

本人使用的事Chrome，Firefox用戶請自行搜索。

谷歌訪問助手

你懂的，沒有這個不能訪問Chrome應用商店。但下載這個插件要到Chrome應用商店。 死循環？？不可能的，我找到了貌似是官網的東西。 PS：感謝高大哥，他告訴個人這個插件。

花瓣網頁收藏工具

很早以前用過，能夠將好看的圖片蒐藏到花瓣網（一個圖片蒐藏的網站）。 但我都是把它當網頁截圖工具用

百度藥丸 Baidu Capsule

不想看百度搜索的莆田系醫院等垃圾廣告怎麼辦？用這個。不過有個軟件的原理應該是每次都清除cookie，防止百度記錄你的搜索記錄，因此每次使用百度產品都須要登錄。 不過不要緊，我通常不用百度的產品。

廣了結結者【強烈推薦】

必備軟件，不想看那些亂七八糟、傷心病狂、不堪入目的廣告怎麼辦？用這個。

Webtime Tracker

記錄網站使用時間的插件，看下個人（剛重裝了系統）。

OneTab

電腦內存不夠時能夠釋放一部份內存。

Octotree【強烈推薦】

開發必備，看GitHub中項目時不用一層層的點進去。

Evernote Web Clipper

印象筆記剪藏，印象筆記用戶能夠試試，一鍵收藏網頁。

Dark Reader

我們的知識分享平臺這麼難用（滑稽保命.jpg），不敢說話又想黑它怎麼辦？用這個。

Axure RP Extension for Chrome

Axure導出交互式可訪問原型圖時，不能用瀏覽器打開，這是個輔助工具。

Google 翻譯

最好用的網頁翻譯軟件，英語渣必備。

小技巧

安裝的插件多了又不常常用怎麼辦，能夠在擴展程序裏面關閉，也能夠右鍵選擇從chrome中隱藏。

系統應用

印象筆記：跨平臺筆記應用 kindle：跨平臺電子書閱讀 xmind：思惟導圖

PxCook

PSD查詢工具，設計出了UI圖後不用標註，前端可直接用該工具得到頁面內元素尺寸、文字信息、顏色色值甚至CSS樣式代碼。

PicGo

重點說下圖牀工具，由於markdown的特殊性，圖片等文件不能直接放入文檔中，因此圖片只能經過外鏈的形式加進去。 以前用過好多圖牀工具，各有優劣，但今天發現的這個超級好用，這篇文章的圖片都是用的這個工具。 使用時最好搭配一個可靠的cnd服務網站，我選的七牛，免費的就夠用了。

在線工具

即在線應用。

• 谷歌翻譯
• ECMAScript 瀏覽器支持狀況
• Can I use，瀏覽器兼容性查詢
• 在線代碼工具
• 製做ico圖標
• 瀏覽器市場份額
• 畫流程圖的工具

JS中==與===區別

只是做爲參考，儘可能全使用===。

壓縮圖片

很早以前收藏的工具，若是圖片中沒有漸變或陰影等，壓縮效率極好。

圖片生成工具

mock之友，經過控制url參數生成不一樣尺寸的圖片。

HTTP請求輔助工具

相似於mock，本身配置HTTP響應體，獲取UTL供ajax請求使用。

Homebrew

macOS的軟件包管理工具，命令行界面。 有些軟件沒有提供macOS系統的版本，能夠經過此工具能夠安裝。

git提交時的emoje

像下圖這樣，很裝逼極客。

MSDN

收藏了六七年的老網站，下載windows或office軟件用的。

開源軟件國內鏡像

不少軟件都放在國外服務器，下載死慢。 國內有不少鏡像網站，能夠本身搜索。 這裏給出一個彙總文章。

命令行

差點忘了，可能有的人還不知道windows下有PowerShell命令行工具，還有前段時間剛發佈的treminal，看文章說超級好用。 大家本身試吧，我沒用過。^_^

iconfont

重要的留在最後。

假定一個場景，用戶對系統內一個圖標進行替換。以往流程是：

1. 客戶告訴你須要什麼樣一個圖標
2. 你講該需求轉給設計
3. 設計理解需求並設計後給你一個圖標
4. 你放到系統裏面等用戶確認，若不經過，再從步驟2開始

能夠發現不少問題點： 設計拿到的是"二手"需求 若是用戶不經過須要反覆的設計與切圖 設計可能不在這個項目上，須要等待很長時間。

這種小的需求，能夠在這個網站上本身找一些圖標，而且在用戶身邊把圖標調好。優化流程後是這樣：

1. 客戶告訴你須要什麼樣一個圖標
2. 你理解需求後從網站上找到一個圖標並放入系統中
3. 你放到系統裏面等用戶確認，若不經過，現場經過CSS控制調整知道用戶滿意。

以上狀況在咱們開發團隊可能已經用上了，下面說一種大家可能沒用過的。

假定一個場景：設計出完UI文稿，須要將PSD裏面的圖片都切出來，可能根據不一樣分辨率、不一樣狀態要切好幾張圖。

• user-icon.png
• user-icon-hover.png
• user-icon_x2.png
• user-icon-hover_x2.png
• ...

而一種更好的方式（我已經用在生產環境中了，你們可放心使用）是：

1. 在網站上建立一個項目(如圖)
2. 將前端添加設置爲項目協做者
3. 設計出完UI稿後，從網站上找到（找不到能夠本身上傳）對應的圖標添加進項目
4. 前端從網站上就能夠看到設計人員添加的圖標（本身也能夠添加）
5. 前端可根據須要，生成在線圖標庫，或下載到本地添加到項目中

你有什麼好工具呢？

在評論區說下吧。