程序猿必備開發工具，極大提高你的效率

4 人贊了文章

其實本來打算寫的是web開發工具合集，但寫著寫著覺得不太過癮，所以索性把所有用得到的工具都列出來了。

如果能在一開始就把這些工具利用起來，相信可以大大提高工作效率，所以起碼對新手來說是比較有益的。而且從初級開發人員升級為高級開發人員的一個主要方面就是調整工具，簡化任務管理流程，無縫地與其他團隊成員進行交流，並在使用的工具之間建立集成。

所以我總結了60個可以用到的工具，供大家參考。

我是從這幾個方面總結的：

• 1）Chrome擴展
• 2）VS代碼擴展
• 3）UX設計
• 4）web開發
• 5）無需代碼的編程工具
• 6）資料庫工具
• 7）雜七雜八

開始前先推一個在線工具合集網站，真的挺方便。

• 在線工具 - 程序員的工具箱

1.Chrome擴展

• CssViewer - CSSViewer是一款可以幫助用戶快速查看當前的網頁元素的CSS屬性的谷歌瀏覽器插件。
• WhatFont - 可以查找你最喜歡的網站所使用的字體，以便應用到自己的項目上。
• Pesticide - 有助於查看div的輪廓並修改CSS。
• Colorzilla - 將網站上的顏色直接複製到剪貼板，這樣就不會花費太多時間來嘗試獲得正確的RGBA組合。
• CSS Peeper - 以最簡單的方式檢查Web上隱藏的CSS對象、顏色和Asset樣式。
• Wappalyzer - 有助於查看網站上使用的技術，比如網站使用什麼樣的框架或託管什麼服務。
• React Dev Tools - 用於調試React應用程序，只有在編寫React應用程序時才有用。
• Redux Dev Tools - 用於使用Redux調試應用程序，只有在應用程序中實現Redux時才有用。
• JSON Formatter - 使JSON看起來更乾淨。
• Vimeo Repeat and Speed - 加速Vimeo視頻。

2.VS代碼擴展

• 自動重命名標籤 - 在重命名一個HTML / XML標籤時，會自動重命名配對的HTML / XML標籤。從理論上講，效率提高了2倍。
• HTML CSS支持 - CSS支持HTML文檔。對於獲得一些簡潔的語法高亮和代碼建議很有用。
• HTML代碼段 - 有用的代碼段，節省時間的好用工具。
• Babel ES6/ES7 - 如果使用的是Babel，可以更輕鬆地區分代碼中的內容。
• Colorizer -將顏色添加到括弧中以便於塊可視化。
• ESLint -把ESLint集成到Visual Studio代碼中。
• Guides -添加了各種縮進指南。
• Auto - 由Github創建的開源文本編輯器。功能齊全，內置包管理器，智能自動完成，可以更快地編寫代碼。
• Code Spell Checker - 拼寫檢查器。
• VSCode-Icons?- 向文件樹添加圖標。
• Prettier? - 自動代碼格式化程序。
• Git Lens - 檢查代碼何時以及由誰進行了更改，不當背鍋俠，哈哈~

3.UX設計

• Marvel -即時生成設計規範並連接集成。
• Proto.io - 對於想要創建含動畫app的UX設計者特別有用。
• INVISION - 一個原型和工作流平台，非常適合前端和設計師之間的協作。設計師可以將一系列屏幕上傳到項目中。
• Principle - 可以離線工作，互動式原型可以輕鬆轉換為GIF或視頻。
• Whimsical
• Zeplin
• Trunk
• Figma
• Sketch
• Color Hex - 免費的色彩百科全書。
• Color Tool - 提供材料配色方案的移動設計。
• ColorDrop -一種顏色匹配工具，可以保存顏色組合。
• CSS3 Generator - 設計和用戶界面非常乾淨
• Google字體 - 免費，具有600多種字體系列。
• Typetester - 是一種快速解決方案，在一個頁面上提供多種字體的預覽。

4.web開發

• Parcel - 快速，零配置的Web應用程序捆綁器。
• Feather - 簡單漂亮的開源圖標。
• Hyperapp v1.0 - 用於構建現代UI應用程序的1kb庫。
• Sizzy - 快速測試響應式網站的工具。
• Heml - 用於構建響應式電子郵件的開源標記語言。
• Cypress - 對瀏覽器中運行的內容進行快速、簡便和可靠的測試。
• FlowUp - 可跟蹤應用的整體性能，並深入了解各種關鍵性能指標，如FPS，內存使用情況，CPU使用率，磁碟使用情況等。
• Stetho - 一款功能強大的Android開源調試平台，由Facebook開發。
• Android Asset Studio - 一組簡單易用的工具，用於生成設計和開發Android應用程序時需要的各種類型的圖標。
• Android調試資料庫 - 用於調試Android資料庫。
• Vysor - 允許將真實設備鏡像到計算機上。
• LeakCanary - 用於Android和Java的內存泄漏檢測庫。
• Android Arsenal - 可以找到Android的庫，工具和項目的分類目錄。

5.無需代碼的編程工具

• Bubble -Bubble是Web開發框架和可視化編程工具。它使非技術人員無需代碼即可構建Web和移動應用程序。
• Pixate -用於設計沒有代碼的原生移動應用原型。
• Webflow 3D轉換 - 無需編寫任何代碼即可直觀地構建3D交互。

6.資料庫工具

• Navicat for MySQL - 上手最快的操作資料庫的軟體。
• HeidiSQL：資料庫管理軟體。
• Navicat Lite - 支持的資料庫包括 MySQL、Oracle、SQLite、PostgreSQL 和 SQL Server 等。
• MySQL Workbench - 一款圖形化的資料庫設計工具。
• Sequel Pro -用於管理MySQL資料庫（本地或在Internet上）。

7.雜七雜八

• Postman -Postman可以直接查詢端點，而不必編寫相應的前端查詢或cURL請求。
• Zapier - 連接應用程序並自動化工作流程。
• Redash - 一款出色的開源工具，集成了所有最流行的數據源，包括MySQL，PostgreSQL，MongoDB，ElasticSearch等。
• Bitbucket - 為最多五個協作者提供無限的私人代碼存儲庫。
• 求字體 -上傳圖片找字體。
• 用藥助手 - 收錄來自生產廠家的最新藥品說明書，放到這總覺得怪怪的，但又覺得可能有用(??ω??)
• 奇妙清單 - 設置到期日期和提醒，並分配待辦事項，生活不用亂糟糟了。
• DragDis - 當你在網路上遇到想要保留的靈感時，只需要把它拖放到Dragdis側邊欄就行了。健忘症福音啊~
• 萬能搜索網站 - 快搜- 搜索快人一步，什麼搜索內容都有！

文章集錦：

• 程序員整理的各種不錯的工具
• 從設計到開發，我不能沒有10個工具
• Java程序員新手老手常用的八大開發工具
• 8個促進Web開發的頂級工具
• 你經常使用的資料庫管理工具有哪些？

以上足夠把你的工具箱塞得滿滿當當了吧，嘻嘻~如果小夥伴們還有其它覺得不錯的工具歡迎分享出來哈~

個人博客

更多前端技術文章、美術設計、wordpress插件、優化教程、學習筆記盡在我的個人博客喵容 - 和你一起描繪生活，歡迎一起交流學習，一起進步：http://panmiaorong.top

站內文章推薦：

「2018年前端面試知識點」最新匯總

超級好用的開發工具，程序員實用工具整理

乾貨分享:vue2.0做移動端開發用到的相關插件和經驗總結

前端中跨域的幾種方案

vue中Axios的封裝和API介面的管理

原文鏈接：

超級好用的開發工具，程序員實用工具整理 - 喵容?

panmiaorong.top
推薦閱讀：