超級棒的170+款web前端開發工具彙總，千萬要收藏好！

超級棒的170+款web前端開發工具彙總，千萬要收藏好！

web前端開發 web前端開發

咱們與企業內部的Web開發團隊進行了不少次交流，研究了很長時間，最後將Debug工具與Web前端開發工具整理彙總在了一塊兒，這些工具對每一個Web開發人員都很是有用。
這些工具將使您的工做更加輕鬆，特別是若是您是Web開發人員，Web設計人員或項目經理。您應該查看一下並嘗試一下。
無論您是網站開發人員仍是設計師？這些工具將使您的生活和工做流程更加輕鬆。

Web前端開發工具

0一、Alertify.js

網址：http://alertifyjs.com/
AlertifyJS是一個JavaScript框架，用於開發漂亮的瀏覽器對話框和通知。它不只能夠替代默認的瀏覽器對話框，還能夠很是輕鬆地建立本身的對話框。是每一個Web前端開發人員必須具有的工具。

0二、Alfred

網址：http://www.alfredapp.com/
Alfred是Mac OS X上屢獲殊榮的應用程序，可經過熱鍵和關鍵字提升工做效率。

0三、AlloyUI

網址：http://alloyui.com/
AlloyUI是在YUI3（JavaScript）之上構建的框架，該框架使用Bootstrap（HTML / CSS）提供用於構建高可擴展性應用程序的簡單API。

0四、AngularJS

網址：https://angularjs.org/
AngularJS容許您擴展應用程序的HTML。具備極強的表現力，可讀性，而且能夠快速構建開發。

0五、Backbone

網址：https://backbonejs.org/

Backbone.js經過提供具備自定義事件的模型與豐富的可枚舉函數API，具備聲明性事件處理的視圖的集合，並經過RESTful JSON接口將其所有鏈接到您現有的API，從而爲Web應用程序提供結構。

0六、Bitbucket

網址：https://bitbucket.org/
Bitbucket提供分佈式版本控制，使您和您的團隊能夠輕鬆地進行協做。

0七、Bower

網址：http://bower.io/
網站由不少東西組成—框架，庫，資產，實用程序和彩虹。Bower爲您管理全部這些事情。沒有它，前端Web開發就困可貴多。

0八、Brackets

網址：http://brackets.io/
現代的，開放源代碼的文本編輯器，可用於Web開發設計。

0九、Colourcode

網址：https://colourco.de/
探索和發現顏色的工具。方案中的色板，色相，亮度，飽和度變化的控件，以.less或png格式導出。

十、CSS Comb

網址：http://csscomb.com/
使您的代碼漂亮的工具。就如此容易。

十一、CSS Compressor

網址：http://www.cssdrive.com/index.php/main/csscompressor/
使用此實用程序壓縮CSS，以提升加載速度並節省帶寬。

十二、CSS Lint

網址：http://www.cssdrive.com/index.php/main/csscompressor/
CSS Lint是一個開源CSS代碼質量工具。會傷到你的心情
（並幫助您更好地編碼）。

1三、CSSCSS

網址：https://zmoazeni.github.io/csscss/
CSS冗餘分析器，用於分析冗餘。

1四、Dabblet

網址：http://dabblet.com/

交互式CSS遊樂場和代碼共享工具。Dabblet能夠將要點保存到Github，併爲CSS編輯提供了許多便利。

1五、Dromaeo

網址：http://dromaeo.com/
以Dromaeosaurs命名的JavaScript性能測試套件。

1六、Ember.js

網址：http://blog.debugme.eu/front-end-web-developer-tools/emberjs.com
用於建立雄心勃勃的Web應用程序的框架。應該在每一個前端Web開發人員的工具包中都包含。

1七、Fontastic

網址：http://fontastic.me/
能夠在幾秒鐘內建立圖標字體。使您的網站運行更快。

1八、Fontello

網址：http://fontello.com/
使用圖標構建自定義字體的工具。

1九、Foundation

網址：https://get.foundation/
Foundation是響應式前端框架家族，可輕鬆設計精美的響應式網站，應用程序和電子郵件，在任何設備上看起來都很棒。

20、Framework 7

網址：https://framework7.io/#.Vd7TmPmqqko
用於構建iOS和Android應用程序的全功能HTML框架。

2一、GitHub

網址：https://github.com/
GitHub是人們構建軟件的方式。擁有超過1000萬的開發者社區，開發人員可使用強大的協做開發工做流程發現，使用並貢獻超過2600萬個項目。

2二、Grunt

網址：https://gruntjs.com/

Grunt生態系統很是龐大，並且天天都在增加。字面上有數百種可供選擇的插件，您可使用Gruntto進行幾乎任何事情的自動化。

2三、HTML5 Boilerplate

網址：https://html5boilerplate.com/
HTML5 Boilerplate可幫助您構建快速，健壯且適應性強的Web應用程序或網站。藉助數百位開發人員的綜合知識和精力，一站式啓動您的項目。

2四、HTML5 Please

網址：https://html5please.com/

查找HTML5，CSS3等功能，瞭解它們是否已準備就緒，以及是否可使用Polyfills，fallbacks或按原樣使用它們。

2五、Icomoon

網址：https://icomoon.io/

IcoMoon應用程序可以讓您構建和使用不一樣格式的圖標集，包括SVG，圖標字體或簡單的PNG / CSS代碼。

2六、JavascriptOO

網址：http://www.javascriptoo.com/
您應該使用示例，類別，安裝命令，CDN連接，項目和做者統計信息來研究每一個JavaScript項目。

2七、jQuery

網址：https://jquery.com/
jQuery是一個快速，小型且功能豐富的JavaScript庫。藉助易於使用的API（可在多種瀏覽器中使用），使HTML文檔的遍歷和操做，事件處理，動畫和Ajax等事情變得更加簡單。

2八、jQuery UI

網址：http://jqueryui.com/
jQuery UI是在jQuery JavaScript庫之上構建的一組精選的用戶界面交互，效果，小部件和主題。不管是構建高度交互的Web應用程序，仍是隻須要向表單控件添加日期選擇器，jQuery UI都是比較理想的選擇。

2九、JS Hint

網址：http://www.jshint.com/
JSHint是一個社區驅動的工具，用於檢測JavaScript代碼中的錯誤和潛在問題並強制執行您團隊的編碼約定。它很是靈活，所以您能夠輕鬆地將其調整爲特定的編碼準則以及但願在其中執行代碼的環境。

30、JSFiddle

網址：https://jsfiddle.net/
使用JSFiddle代碼編輯器在線測試您的JavaScript，CSS，HTML或CoffeeScript。很是好用，推薦使用。

3一、JSontoHTML

網址：http://json2html.com/
json2html是一個開放源代碼的JavaScript庫，它使用JSON模板將JSON對象轉換爲HTML。

3二、LightTable

網址：http://lighttable.com/
Light Table經過即時反饋將您鏈接到您的創做，並顯示數據值流過您的代碼。

3三、LiveReload

網址：http://livereload.com/
LiveReload監視文件系統中的更改。保存文件後，將根據須要對其進行預處理，並刷新瀏覽器。更酷的是，當您更改CSS文件或圖像時，瀏覽器會當即更新，而無需從新加載頁面。

3四、Meteor

網址：https://www.meteor.com/
Meteor是一個完整的開源平臺，可使用純JavaScript構建Web和移動應用程序。

3五、Modernizr

網址：http://modernizr.com/
不管瀏覽器是否支持某個功能，Modernizr都可讓您輕鬆編寫條件JavaScript和CSS來處理每種狀況。

3六、Normalize.css

網址：http://necolas.github.io/normalize.css/
Normalize.css使瀏覽器更一致地渲染全部元素，並符合現代標準。它只針對須要規範化的樣式。

3七、Paletton

網址：http://paletton.com/
設計器工具，用於建立能夠很好地協同工做的顏色組合。

3八、Pesticide

網址：http://pesticide.io/
使用提綱加速CSS佈局調試的工具。

3九、PhantomCSS

網址：https://github.com/Huddle/PhantomCSS
PhantomCSS捕獲由CasperJS捕獲的屏幕截圖，並使用Resemble.js將它們與基線圖像進行比較，以測試rgb像素差別。而後，PhantomCSS生成圖像差別以幫助您找到緣由。

40、QUnit

網址：http://qunitjs.com/
QUnit是一個功能強大，易於使用的JavaScript單元測試框架。它由jQuery，jQuery UI和jQuery Mobile項目使用，而且可以測試任何通用的JavaScript代碼，包括其自身。

4一、Responsinator

網址：https://www.responsinator.com/
Responsinator幫助網站製造商快速瞭解其響應式網站在最受歡迎的設備上的外觀。它不能精確地複製外觀，由於準確的測試老是在真實設備上進行測試。

4二、Responsive

網址：http://responsive.victorcoulon.fr/
用於響應式設計測試的便捷工具。

4三、Responsive Design Testing

網址：http://mattkersley.com/responsive/
該工具旨在幫助您在設計和構建響應式網站時對其進行測試。您能夠在此頁面頂部的地址欄中（而不是瀏覽器的地址欄中）輸入網站的URL，以測試特定頁面。

4四、Retinize

網址：http://retinize.it/
RetinizeIt很是適合須要爲iOS或支持Retina的網站的PSD切片UI元素的Web設計人員和前端開發人員。

4五、Sass

網址：https://sass-lang.com/
Sass是世界上最成熟，穩定，功能最強大的專業級CSS擴展語言。具備超能力的CSS。

4六、Stack Overflow

網址：http://stackoverflow.com/
Stack Overflow是面向專業和發燒級程序員的問答社區網站。並且很大。他們剛剛達到一千萬個問題。

4七、Sublime Text 3

網址：http://blog.debugme.eu/front-end-web-developer-tools/www.sublimetext.com/3
Sublime Text是一款代碼編輯器，標記和散文的高級文本編輯器。
您會喜歡光滑的用戶界面，非凡的功能和出色的性能。

4八、Type-o-matic

網址：http://type-o-matic.net/
在這裏你可找到頁面上的全部所需字體。

4九、TypeWonder

網址：http://typewonder.com/
TypeWonder能夠幫助用戶在其網站上檢查或測試Google字體，而無需實際更改實時網站上的任何內容。

50、Vue.js

網址：http://vuejs.org/
Vue.js是用於構建現代Web界面的庫。它經過簡單靈活的API提供了對數據敏感的組件。

5一、WebStorm

網址：https://www.jetbrains.com/webstorm/
WebStorm是一個輕量級但功能強大的IDE，很是適合使用Node.js進行復雜的客戶端開發和服務器端開發。

5二、What Font Is

網址：http://www.whatfontis.com/
使用什麼字體，您能夠識別所需的字體。

5三、Wordmark.it

網址：http://wordmark.it/
Wordmark.it旨在經過快速顯示計算機上安裝的字體的任何文本的預覽來幫助字體選擇過程。

5四、Yeoman

網址：http://yeoman.io/
Yeoman幫助您啓動新項目，規定最佳實踐和工具以幫助您保持生產力。快速構建完整的項目或有用的部分。

5五、Gulp

網址：http://gulpjs.com/
Gulp是流式構建系統，它是使用Node.js的任務運行程序。您可使用它構建系統自動化任務，例如縮小和複製全部JavaScript文件或靜態圖像等。使人敬畏的前端Web開發人員工具。

5六、React

網址：http://facebook.github.io/react/
React是一個開放源代碼的JavaScript庫，用於建立用戶界面，旨在解決開發單頁應用程序時遇到的挑戰。

5七、Browserify

網址：http://browserify.org/
Browserify容許您捆綁全部依賴項。

5八、Webpack

網址：https://webpack.github.io/
將許多模塊打包到少數捆綁資產中，就使用webpack。

5九、Babel

網址：https://babeljs.io/
用於編寫下一代JavaScript的編譯器。每一個前端開發人員都應使用。

60、PostCSS

網址：https://github.com/postcss/postcss
PostCSS是使用JavaScript插件轉換CSS的工具。

6一、cssnext

網址：http://cssnext.io/
cssnext是一個CSS編譯器，可以讓您今天使用最新的CSS語法。它將新的CSS規範轉換爲更兼容的CSS，所以您無需等待瀏覽器支持。

6二、Visual Studio 2015

網址：https://visualstudio.microsoft.com/zh-hans/vs/
Visual Studio 2015是一個豐富的集成開發環境，用於爲Windows，Android和iOS建立出色的應用程序，以及現代Web應用程序和雲服務。

6三、Can I Use

網址：https://caniuse.com/
兼容性表，用於在各類瀏覽器中支持HTML5，CSS3，SVG和其餘技術。

6四、npm

網址：https://www.npmjs.com/
npm是Node.js的軟件包管理器。它建立於2009年，是一個開源項目，旨在幫助JavaScript開發人員輕鬆共享打包的代碼模塊。

6五、ECMAScript 6

網址：http://es6-features.org/
ECMAScript帶有許多通用數據類型的簡寫形式，這能夠節省您的時間，並使程序更具可讀性。

6六、Atom

網址：https://atom.io/
Atom是一種文本編輯器，它是一種現代，通俗易懂但易於破解的內核-您能夠自定義該工具以執行任何操做，並且還能夠高效使用，而無需接觸配置文件。

6七、MaterializeCSS

網址：https://materializecss.com/
Materialize是基於Google Material Design的現代響應式CSS框架。

6八、JSPM

網址：https://jspm.io/
JSPM是SystemJS通用模塊加載器的軟件包管理器，該軟件包管理器基於動態ES6模塊加載器構建。

6九、Helium CSS

網址：https://github.com/geuis/helium-css
是一種用於發現網站上許多頁面上未使用的CSS的工具。該工具基於JavaScript，可從瀏覽器運行。Helium接受網站不一樣部分的URL列表，而後加載並解析每一個頁面以構建全部樣式表的列表。而後，它訪問URL列表中的每一個頁面，並檢查是否在頁面上使用了樣式表中找到的選擇器。最後，它生成一個報告，其中詳細介紹了每一個樣式表以及未在任何給定頁面上使用的選擇器。

70、更多插件工具

01)、parallel.js: 先後端通用的一個並行庫。02)、zepto: 用於現代瀏覽器的兼容 jQuery 的庫。03)、totoro: 穩定的跨瀏覽器測試工具。04)、TheaterJS: 一個用於模擬人輸入狀態的 JS 庫。05)、stellar.js: 前端用於實現異步滾動效果的庫，現已再也不維護。06)、skrollr: 另外一款實現一步滾動的開源庫，使用人數衆多，可實現各類狂拽酷炫掉渣天的前端效果，看真相。07)、regulex: 用於生成 正則表達式 的可視化流程圖。08)、markdown-it: 新型 Markdown 解析器，快速，支持插件。09)、multiline: 用於 Javascript 中的多行文本，相似於 Ruby 的 HERE Doc。10)、screenfull.js: 全屏插件，支持各大瀏覽器。11)、lunr.js: 相似於 Solr, 可是用於瀏覽器上的全文搜索引擎，能夠爲 JSON 建立索引，離線也可使用。12)、jquery.hotkeys: jQuery 插件，用於綁定熱鍵。13)、breach_core: Javascript 編寫的 Browser (瀏覽器)。14)、octocard: 用於生成 Github 信息卡片的庫。15)、github-cards: 用於生成 Github 信息卡片的庫。16)、money.js: 輕量級貨幣轉換庫，web 和 node 皆可用。17)、accounting.js: 輕量級的數字、貨幣轉換庫。18)、javascript-algorithms: Javascript 實現的各類算法集合。19)、lazy.js: 相似於 underscore, 可是會延遲執行，某些場景下，性能會有很大的提高。20)、seajs: 前端模塊加載器，解決模塊化、依賴等問題。21)、jQuery-One-Page-Nav: 單頁應用中一個用於處理導航欄的庫。22)、js.js: Javascript 實現的 javascript JIT。23)、jquery-ui: jQuery 團隊開發的 UI 相關的前端庫，功能強大。24)、todomvc: 分別基於 AngularJS/EmberJS/Backbone等實現的 TODO List, 幫助開發者選擇前端 MVC 庫。25)、localForage: Mozilla 出品，用於離線存儲，基於IndexedDB, WebSQL 或者。localStorage, 提供一致的接口。26)、EventEmitter: 瀏覽器版的 EventEmitter。27)、jquery.serializeJSON: jQuery 插件，用於將 form 表單序列化成 JSON 數據。28)、knockout: 前端 MVVM 框架，用於開發富前端應用。29)、mermaid: 能夠根據文本生成流程圖，相似於 Markdown 的語法。30)、js-sequence-diagrams: 另外一款能夠根據文本生成流程圖的庫，相似於 Markdown 的語法。31)、flow: 一個用來檢測 Javascript 語法錯誤的庫， Facebook 出品。32)、zoomooz: jQuery 插件，用來處理瀏覽器縮放。33)、fancyBox: 一個用於放大縮小圖片、Web 內容或者多媒體元素的庫，優雅大方。34)、mithril.js: 輕量型前端 MVC 框架，部分使用場景下性能優於 Angular.js 和 React。35)、jquery.smartbanner: smartbanner 是從 IOS6 開始支持的一個新特性, 這個插件提供了對早期 IOS4/5 和 Android 的支持。36)、jquery.scrollTo: 在頁面上以一個元素爲起始以動畫的方式移動(ScrollTo)到另外一個元素， 支持回退等。37)、jScrollPane: 自定義的滾動條，讓全部瀏覽器都顯示同樣的滾動條。38)、onepage-scroll: 提供相似於 iPhone6 展現頁相似的效果，適用於單頁應用，兼容到 IE839)、scrollMonitor: 前端插件用來監控元素的滾動事件(進入、退出等)，性能很好40)、ScrollMagic: 神奇的滾動交互效果插件，能夠在滾動的過程當中設置各類各樣的動態效果41)、infinite-scroll: 滾動加載，滾動到最下到自動加載， Paul Irish 大神之做42)、animatable: 僅僅依靠 border-width 和 background-position 實現的各類動態效果，看真相43)、Fluidbox: 頁面上內嵌圖片的放大縮小效果，相似於 Medium 中的效果44)、jquery-validation: jQuery 的一個插件，用於校驗 Form 表單45)、BigVideo.js: jQuery 的一個插件, 用於實現大背景(視頻、圖片)效果46)、emscripten: 一款基於 LLVM, 能夠將 C/C++ 轉換成 Javascript 的工具，使得 Javascript 能夠近乎 Native 的速度47)、qrcode-generator: 各類語言的二維碼生成工具48)、device.js: 一個能夠檢測設備類型的工具，可讓咱們根據不一樣的設備來爲其定製響應的 Javascript 和 CSS49)、jquery-qrcode: jQuery 插件，用來生成二維碼50)、Wookmark-jQuery: jQuery 的一個插件，能夠用來實現瀑布流的效果51)、isotope: 能夠用來過濾、排列布局，實現美觀的動態佈局切換效果，Demo52)、lazysizes: 功能強大的圖片延遲加載工具，能夠首先加載一個低質量的圖片，而後再加載高質量的圖片53)、progressbar.js: 簡潔美觀的進度條，扁平化54)、pigshell: 一個由 Javascript 實現的Shell, 將互聯網當作一個大的文件系統, 經過 cd/ls/cat…..等命令, 能夠訪問 Facebook/Twitter/Google Drive 等網絡服務55)、spectrum: Js實現的顏色選擇器 (Colorpicker)56)、jQuery.countdown: jQuery 倒計時插件57)、summernote: WYSIWYG 富文本編輯器58)、awesomplete: 很是輕型的一個自動補全 JS 庫, 沒有任何依賴, 配置簡單, 美觀59)、switchery: IOS 7 上 Switch 的 JS 實現, 支持 IE8 及以上瀏覽器60)、trix: Basecamp 公司出品的富文本編輯器，簡潔小巧61)、sensor.js: 在智能移動設備瀏覽器上，經過HTML5的api使用移動設備的功能。定位、運動、傾斜等62)、hyhyhy: 用於建立 基於 HTML5 的 演示文稿63)、swipebox: jQuery 插件，用於處理移動端的觸摸事件64)、FileAPI: 前端用戶處理文件（拖放、多文件上傳等）65)、Sortable: 現代瀏覽器上用於實現元素拖拽排序的功能，支持 Meteor, AngularJS, React，不依賴 jQuery66)、Swiper: 用於實現瀏覽器上的滑動切換效果，支持硬件加速67)、matter-js: 2D 物理效果引擎，碰撞、彈跳等68)、jQTouch: 用於輔助建立手機端的 Web 應用，支持主題、Zepto.js 等69)、snabbt.js: 一個利用 Javascript 和 CSS transform 的 animation 庫70)、c3: 基於 D3 的圖表庫71)、echarts: 企業級圖表庫，百度開發72)、parallax.js: 一個用於響應智能手機 orientation 的庫73)、jQuery-Animate-Enhanced: jQuery 動畫庫的一個加強，用於現代瀏覽器74)、wysihtml: 富文本編輯器，適用於現代瀏覽器75)、slip: 一個經過滑動或者拖拽來操控列表的庫76)、evil-icons: 一個矢量圖庫，提供 Ruby/Node 等支持77)、PhotoSwipe: JS 的一個圖片展現庫78)、focusable: 是頁面上一個元素高亮的庫，有圖有真相79)、firefox.html: Firefox 在瀏覽器端的實現 —— HTML 版的 Firefox80)、jquery-mobile: jQuery 團隊開發的用於輔助手機端 web app 開發的庫，基於 HTML581)、mobile-angular-ui: 基於angularjs和bootstarp的web app開發框架82)、interact.js: 一個適用於現代瀏覽器的，用於處理 手勢、拖放、縮放等的庫83)、rebound-js: 實現部分物理效果，Facebook 出品84)、basket.js: 基於 LocalStorage 的資源加載器，能夠用來緩存 script 和 css, 手機端使用速度快於瀏覽器直接緩存85)、iscroll: 高性能的滾動(scroll)處理庫，功能強大，支持各類事件，不依賴任何的庫，且插件豐富, 大衆點評的手機端列表滾動就是用這個庫處理的86)、metrics-graphics: 基於 D3 的圖表庫，簡潔、高效，Mozilla 出品87)、accessible-html5-video-player: Paypal 出品的 Video 播放器88)、loading: 幾種 Loading 效果，基於 SVG89)、flippant.js: 一款可以漂亮的網頁元素翻轉效果庫，代碼許久不更新，不過做爲源碼學習仍是不錯的90)、move.js: 基於 CSS3 的前端動畫框架91)、scrollReveal.js: 使元素以很是酷帥的方式進入畫布 (Viewpoint)，看 Demo92)、Modernizr: 一個用來檢測 HTML5 和 CSS3 支持狀況的庫93)、foundation: 另外一款前端模版框架，相似於 Bootstrap94)、Flat-UI: Bootstrap 的一款主題，簡潔美觀95)、iCheck: 一款漂亮的 Checkbox 插件96)、Swipe: 很是輕量級的一個圖片滑動切換效果庫, 性能良好, 尤爲是對手機的支持, 壓縮後的大小約 5kb97)、slick: 功能異常強大的一個圖片滑動切換效果庫98)、SocialButtons: 漂亮的社交按鈕99)、sweetalert: 一個很是美觀的用於替換瀏覽器默認 alert 的庫100)、web-animations-js: Javascript 實現的 Web Animation API101)、vivus: 能夠動態描繪 SVG 的 JS 庫, 支持多種動畫102)、plyr: 輕量, 小巧, 美觀的 HTML5 視頻播放器103)、timesheet.js: 基於 HTML5 & CSS3 時間表104)、slideout: 一個很是美觀的側滑菜單若是你還知道更多好用的前端開發工具，也歡迎你在留言區給咱們留言。