作者：web前端開發(fā)

我們與企業(yè)內(nèi)部的Web開發(fā)團(tuán)隊(duì)進(jìn)行了很多次交流，研究了很長(zhǎng)時(shí)間，最后將Debug工具與Web前端開發(fā)工具整理匯總在了一起，這些工具對(duì)每個(gè)Web開發(fā)人員都非常有用。

這些工具將使您的工作更加輕松，特別是如果您是Web開發(fā)人員，Web設(shè)計(jì)人員或項(xiàng)目經(jīng)理。您應(yīng)該查看一下并嘗試一下。

不管您是網(wǎng)站開發(fā)人員還是設(shè)計(jì)師？這些工具將使您的生活和工作流程更加輕松。

Web前端開發(fā)工具

01、Alertify.js

網(wǎng)址：http://alertifyjs.com/

AlertifyJS是一個(gè)JavaScript框架，用于開發(fā)漂亮的瀏覽器對(duì)話框和通知。它不僅可以替代默認(rèn)的瀏覽器對(duì)話框，還可以非常輕松地創(chuàng)建自己的對(duì)話框。是每個(gè)Web前端開發(fā)人員必須具備的工具。

02、Alfred

網(wǎng)址：http://www.alfredapp.com/

Alfred是Mac OS X上屢獲殊榮的應(yīng)用程序，可通過(guò)熱鍵和關(guān)鍵字提高工作效率。

03、AlloyUI

網(wǎng)址：http://alloyui.com/

AlloyUI是在YUI3（JavaScript）之上構(gòu)建的框架，該框架使用Bootstrap（HTML / CSS）提供用于構(gòu)建高可擴(kuò)展性應(yīng)用程序的簡(jiǎn)單API。

04、AngularJS

網(wǎng)址：https://angularjs.org/

AngularJS允許您擴(kuò)展應(yīng)用程序的HTML。具有極強(qiáng)的表現(xiàn)力，可讀性，并且可以快速構(gòu)建開發(fā)。

05、Backbone

網(wǎng)址：https://backbonejs.org/

Backbone.js通過(guò)提供具有自定義事件的模型與豐富的可枚舉函數(shù)API，具有聲明性事件處理的視圖的集合，并通過(guò)RESTful JSON接口將其全部連接到您現(xiàn)有的API，從而為Web應(yīng)用程序提供結(jié)構(gòu)。

06、Bitbucket

網(wǎng)址：https://bitbucket.org/

Bitbucket提供分布式版本控制，使您和您的團(tuán)隊(duì)可以輕松地進(jìn)行協(xié)作。

07、Bower

網(wǎng)址：http://bower.io/

網(wǎng)站由很多東西組成—框架，庫(kù)，資產(chǎn)，實(shí)用程序和彩虹。Bower為您管理所有這些事情。沒有它，前端Web開發(fā)就困難得多。

08、Brackets

網(wǎng)址：http://brackets.io/

現(xiàn)代的，開放源代碼的文本編輯器，可用于Web開發(fā)設(shè)計(jì)。

09、Colourcode

網(wǎng)址：https://colourco.de/

探索和發(fā)現(xiàn)顏色的工具。方案中的色板，色相，亮度，飽和度變化的控件，以.less或png格式導(dǎo)出。

10、CSS Comb

網(wǎng)址：http://csscomb.com/

使您的代碼漂亮的工具。就如此容易。

11、CSS Compressor

網(wǎng)址：http://www.cssdrive.com/index.php/main/csscompressor/

使用此實(shí)用程序壓縮CSS，以提高加載速度并節(jié)省帶寬。

12、CSS Lint

網(wǎng)址：http://www.cssdrive.com/index.php/main/csscompressor/

CSS Lint是一個(gè)開源CSS代碼質(zhì)量工具。會(huì)傷到你的心情

（并幫助您更好地編碼）。

13、CSSCSS

網(wǎng)址：https://zmoazeni.github.io/csscss/

CSS冗余分析器，用于分析冗余。

14、Dabblet

網(wǎng)址：http://dabblet.com/

交互式CSS游樂(lè)場(chǎng)和代碼共享工具。Dabblet可以將要點(diǎn)保存到Github，并為CSS編輯提供了許多便利。

15、Dromaeo

網(wǎng)址：http://dromaeo.com/

以Dromaeosaurs命名的JavaScript性能測(cè)試套件。

16、Ember.js

網(wǎng)址：http://blog.debugme.eu/front-end-web-developer-tools/emberjs.com

用于創(chuàng)建雄心勃勃的Web應(yīng)用程序的框架。應(yīng)該在每個(gè)前端Web開發(fā)人員的工具包中都包含。

17、Fontastic

網(wǎng)址：http://fontastic.me/

可以在幾秒鐘內(nèi)創(chuàng)建圖標(biāo)字體。使您的網(wǎng)站運(yùn)行更快。

18、Fontello

網(wǎng)址：http://fontello.com/

使用圖標(biāo)構(gòu)建自定義字體的工具。

19、Foundation

網(wǎng)址：https://get.foundation/

Foundation是響應(yīng)式前端框架家族，可輕松設(shè)計(jì)精美的響應(yīng)式網(wǎng)站，應(yīng)用程序和電子郵件，在任何設(shè)備上看起來(lái)都很棒。

20、Framework 7

網(wǎng)址：https://framework7.io/#.Vd7TmPmqqko

用于構(gòu)建iOS和Android應(yīng)用程序的全功能HTML框架。

21、GitHub

網(wǎng)址：https://github.com/

GitHub是人們構(gòu)建軟件的方式。擁有超過(guò)1000萬(wàn)的開發(fā)者社區(qū)，開發(fā)人員可以使用強(qiáng)大的協(xié)作開發(fā)工作流程發(fā)現(xiàn)，使用并貢獻(xiàn)超過(guò)2600萬(wàn)個(gè)項(xiàng)目。

22、Grunt

網(wǎng)址：https://gruntjs.com/

Grunt生態(tài)系統(tǒng)非常龐大，而且每天都在增長(zhǎng)。字面上有數(shù)百種可供選擇的插件，您可以使用Gruntto進(jìn)行幾乎任何事情的自動(dòng)化。

23、HTML5 Boilerplate

網(wǎng)址：https://html5boilerplate.com/

HTML5 Boilerplate可幫助您構(gòu)建快速，健壯且適應(yīng)性強(qiáng)的Web應(yīng)用程序或網(wǎng)站。借助數(shù)百位開發(fā)人員的綜合知識(shí)和精力，一站式啟動(dòng)您的項(xiàng)目。

24、HTML5 Please

網(wǎng)址：https://html5please.com/

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

25、Icomoon

網(wǎng)址：https://icomoon.io/

IcoMoon應(yīng)用程序可讓您構(gòu)建和使用不同格式的圖標(biāo)集，包括SVG，圖標(biāo)字體或簡(jiǎn)單的PNG / CSS代碼。

26、JavascriptOO

網(wǎng)址：http://www.javascriptoo.com/

您應(yīng)該使用示例，類別，安裝命令，CDN鏈接，項(xiàng)目和作者統(tǒng)計(jì)信息來(lái)研究每個(gè)JavaScript項(xiàng)目。

27、jQuery

網(wǎng)址：https://jquery.com/

jQuery是一個(gè)快速，小型且功能豐富的JavaScript庫(kù)。借助易于使用的API（可在多種瀏覽器中使用），使HTML文檔的遍歷和操作，事件處理，動(dòng)畫和Ajax等事情變得更加簡(jiǎn)單。

28、jQuery UI

網(wǎng)址：http://jqueryui.com/

jQuery UI是在jQuery JavaScript庫(kù)之上構(gòu)建的一組精選的用戶界面交互，效果，小部件和主題。無(wú)論是構(gòu)建高度交互的Web應(yīng)用程序，還是只需要向表單控件添加日期選擇器，jQuery UI都是比較理想的選擇。

29、JS Hint

網(wǎng)址：http://www.jshint.com/

JSHint是一個(gè)社區(qū)驅(qū)動(dòng)的工具，用于檢測(cè)JavaScript代碼中的錯(cuò)誤和潛在問(wèn)題并強(qiáng)制執(zhí)行您團(tuán)隊(duì)的編碼約定。它非常靈活，因此您可以輕松地將其調(diào)整為特定的編碼準(zhǔn)則以及希望在其中執(zhí)行代碼的環(huán)境。

30、JSFiddle

網(wǎng)址：https://jsfiddle.net/

使用JSFiddle代碼編輯器在線測(cè)試您的JavaScript，CSS，HTML或CoffeeScript。非常好用，推薦使用。

31、JSontoHTML

網(wǎng)址：http://json2html.com/

json2html是一個(gè)開放源代碼的JavaScript庫(kù)，它使用JSON模板將JSON對(duì)象轉(zhuǎn)換為HTML。

32、LightTable

網(wǎng)址：http://lighttable.com/

Light Table通過(guò)即時(shí)反饋將您連接到您的創(chuàng)作，并顯示數(shù)據(jù)值流過(guò)您的代碼。

33、LiveReload

網(wǎng)址：http://livereload.com/

LiveReload監(jiān)視文件系統(tǒng)中的更改。保存文件后，將根據(jù)需要對(duì)其進(jìn)行預(yù)處理，并刷新瀏覽器。更酷的是，當(dāng)您更改CSS文件或圖像時(shí)，瀏覽器會(huì)立即更新，而無(wú)需重新加載頁(yè)面。

34、Meteor

網(wǎng)址：https://www.meteor.com/

Meteor是一個(gè)完整的開源平臺(tái)，可以使用純JavaScript構(gòu)建Web和移動(dòng)應(yīng)用程序。

35、Modernizr

網(wǎng)址：http://modernizr.com/

無(wú)論瀏覽器是否支持某個(gè)功能，Modernizr均可讓您輕松編寫條件JavaScript和CSS來(lái)處理每種情況。

36、Normalize.css

網(wǎng)址：http://necolas.github.io/normalize.css/

Normalize.css使瀏覽器更一致地渲染所有元素，并符合現(xiàn)代標(biāo)準(zhǔn)。它只針對(duì)需要規(guī)范化的樣式。

37、Paletton

網(wǎng)址：http://paletton.com/

設(shè)計(jì)器工具，用于創(chuàng)建可以很好地協(xié)同工作的顏色組合。

38、Pesticide

網(wǎng)址：http://pesticide.io/

使用提綱加速CSS布局調(diào)試的工具。

39、PhantomCSS

網(wǎng)址：https://github.com/Huddle/PhantomCSS

PhantomCSS捕獲由CasperJS捕獲的屏幕截圖，并使用Resemble.js將它們與基線圖像進(jìn)行比較，以測(cè)試rgb像素差異。然后，PhantomCSS生成圖像差異以幫助您找到原因。

40、QUnit

網(wǎng)址：http://qunitjs.com/

QUnit是一個(gè)功能強(qiáng)大，易于使用的JavaScript單元測(cè)試框架。它由jQuery，jQuery UI和jQuery Mobile項(xiàng)目使用，并且能夠測(cè)試任何通用的JavaScript代碼，包括其自身。

41、Responsinator

網(wǎng)址：https://www.responsinator.com/

Responsinator幫助網(wǎng)站制造商快速了解其響應(yīng)式網(wǎng)站在最受歡迎的設(shè)備上的外觀。它不能精確地復(fù)制外觀，因?yàn)闇?zhǔn)確的測(cè)試總是在真實(shí)設(shè)備上進(jìn)行測(cè)試。

42、Responsive

網(wǎng)址：http://responsive.victorcoulon.fr/

用于響應(yīng)式設(shè)計(jì)測(cè)試的便捷工具。

43、Responsive Design Testing

網(wǎng)址：http://mattkersley.com/responsive/

該工具旨在幫助您在設(shè)計(jì)和構(gòu)建響應(yīng)式網(wǎng)站時(shí)對(duì)其進(jìn)行測(cè)試。您可以在此頁(yè)面頂部的地址欄中（而不是瀏覽器的地址欄中）輸入網(wǎng)站的URL，以測(cè)試特定頁(yè)面。

44、Retinize

網(wǎng)址：http://retinize.it/

RetinizeIt非常適合需要為iOS或支持Retina的網(wǎng)站的PSD切片UI元素的Web設(shè)計(jì)人員和前端開發(fā)人員。

45、Sass

網(wǎng)址：https://sass-lang.com/

Sass是世界上最成熟，穩(wěn)定，功能最強(qiáng)大的專業(yè)級(jí)CSS擴(kuò)展語(yǔ)言。具有超能力的CSS。

46、Stack Overflow

網(wǎng)址：http://stackoverflow.com/

Stack Overflow是面向?qū)I(yè)和發(fā)燒級(jí)程序員的問(wèn)答社區(qū)網(wǎng)站。而且很大。他們剛剛達(dá)到一千萬(wàn)個(gè)問(wèn)題。

47、Sublime Text 3

網(wǎng)址：http://blog.debugme.eu/front-end-web-developer-tools/www.sublimetext.com/3

Sublime Text是一款代碼編輯器，標(biāo)記和散文的高級(jí)文本編輯器。

您會(huì)喜歡光滑的用戶界面，非凡的功能和出色的性能。

48、Type-o-matic

網(wǎng)址：http://type-o-matic.net/

在這里你可找到頁(yè)面上的所有所需字體。

49、TypeWonder

網(wǎng)址：http://typewonder.com/

TypeWonder可以幫助用戶在其網(wǎng)站上檢查或測(cè)試Google字體，而無(wú)需實(shí)際更改實(shí)時(shí)網(wǎng)站上的任何內(nèi)容。

50、Vue.js

網(wǎng)址：http://vuejs.org/

Vue.js是用于構(gòu)建現(xiàn)代Web界面的庫(kù)。它通過(guò)簡(jiǎn)單靈活的API提供了對(duì)數(shù)據(jù)敏感的組件。

51、WebStorm

網(wǎng)址：https://www.jetbrains.com/webstorm/

WebStorm是一個(gè)輕量級(jí)但功能強(qiáng)大的IDE，非常適合使用Node.js進(jìn)行復(fù)雜的客戶端開發(fā)和服務(wù)器端開發(fā)。

52、What Font Is

網(wǎng)址：http://www.whatfontis.com/

使用什么字體，您可以識(shí)別所需的字體。

53、Wordmark.it

網(wǎng)址：http://wordmark.it/

Wordmark.it旨在通過(guò)快速顯示計(jì)算機(jī)上安裝的字體的任何文本的預(yù)覽來(lái)幫助字體選擇過(guò)程。

54、Yeoman

網(wǎng)址：http://yeoman.io/

Yeoman幫助您啟動(dòng)新項(xiàng)目，規(guī)定最佳實(shí)踐和工具以幫助您保持生產(chǎn)力。快速構(gòu)建完整的項(xiàng)目或有用的部分。

55、Gulp

網(wǎng)址：http://gulpjs.com/

Gulp是流式構(gòu)建系統(tǒng)，它是使用Node.js的任務(wù)運(yùn)行程序。您可以使用它構(gòu)建系統(tǒng)自動(dòng)化任務(wù)，例如縮小和復(fù)制所有JavaScript文件或靜態(tài)圖像等。令人敬畏的前端Web開發(fā)人員工具。

56、React

網(wǎng)址：http://facebook.github.io/react/

React是一個(gè)開放源代碼的JavaScript庫(kù)，用于創(chuàng)建用戶界面，旨在解決開發(fā)單頁(yè)應(yīng)用程序時(shí)遇到的挑戰(zhàn)。

57、Browserify

網(wǎng)址：http://browserify.org/

Browserify允許您捆綁所有依賴項(xiàng)。

58、Webpack

網(wǎng)址：https://webpack.github.io/

將許多模塊打包到少數(shù)捆綁資產(chǎn)中，就使用webpack。

59、Babel

網(wǎng)址：https://babeljs.io/

用于編寫下一代JavaScript的編譯器。每個(gè)前端開發(fā)人員都應(yīng)使用。

60、PostCSS

網(wǎng)址：https://github.com/postcss/postcss

PostCSS是使用JavaScript插件轉(zhuǎn)換CSS的工具。

61、cssnext

網(wǎng)址：http://cssnext.io/

cssnext是一個(gè)CSS編譯器，可讓您今天使用最新的CSS語(yǔ)法。它將新的CSS規(guī)范轉(zhuǎn)換為更兼容的CSS，因此您無(wú)需等待瀏覽器支持。

62、Visual Studio 2015

網(wǎng)址：https://visualstudio.microsoft.com/zh-hans/vs/

Visual Studio 2015是一個(gè)豐富的集成開發(fā)環(huán)境，用于為Windows，Android和iOS創(chuàng)建出色的應(yīng)用程序，以及現(xiàn)代Web應(yīng)用程序和云服務(wù)。

63、Can I Use

網(wǎng)址：https://caniuse.com/

兼容性表，用于在各種瀏覽器中支持HTML5，CSS3，SVG和其他技術(shù)。

64、npm

網(wǎng)址：https://www.npmjs.com/

npm是Node.js的軟件包管理器。它創(chuàng)建于2009年，是一個(gè)開源項(xiàng)目，旨在幫助JavaScript開發(fā)人員輕松共享打包的代碼模塊。

65、ECMAScript 6

網(wǎng)址：http://es6-features.org/

ECMAScript帶有許多通用數(shù)據(jù)類型的簡(jiǎn)寫形式，這可以節(jié)省您的時(shí)間，并使程序更具可讀性。

66、Atom

網(wǎng)址：https://atom.io/

Atom是一種文本編輯器，它是一種現(xiàn)代，通俗易懂但易于破解的內(nèi)核-您可以自定義該工具以執(zhí)行任何操作，而且還可以高效使用，而無(wú)需接觸配置文件。

67、MaterializeCSS

網(wǎng)址：https://materializecss.com/

Materialize是基于Google Material Design的現(xiàn)代響應(yīng)式CSS框架。

68、JSPM

網(wǎng)址：https://jspm.io/

JSPM是SystemJS通用模塊加載器的軟件包管理器，該軟件包管理器基于動(dòng)態(tài)ES6模塊加載器構(gòu)建。

69、Helium CSS

網(wǎng)址：https://github.com/geuis/helium-css

是一種用于發(fā)現(xiàn)網(wǎng)站上許多頁(yè)面上未使用的CSS的工具。該工具基于JavaScript，可從瀏覽器運(yùn)行。Helium接受網(wǎng)站不同部分的URL列表，然后加載并解析每個(gè)頁(yè)面以構(gòu)建所有樣式表的列表。然后，它訪問(wèn)URL列表中的每個(gè)頁(yè)面，并檢查是否在頁(yè)面上使用了樣式表中找到的選擇器。最后，它生成一個(gè)報(bào)告，其中詳細(xì)介紹了每個(gè)樣式表以及未在任何給定頁(yè)面上使用的選擇器。

70、更多插件工具

01)、parallel.js: 前后端通用的一個(gè)并行庫(kù)。

02)、zepto: 用于現(xiàn)代瀏覽器的兼容 jQuery 的庫(kù)。

03)、totoro: 穩(wěn)定的跨瀏覽器測(cè)試工具。

04)、TheaterJS: 一個(gè)用于模擬人輸入狀態(tài)的 JS 庫(kù)。

05)、stellar.js: 前端用于實(shí)現(xiàn)異步滾動(dòng)效果的庫(kù)，現(xiàn)已不再維護(hù)。

06)、skrollr: 另一款實(shí)現(xiàn)一步滾動(dòng)的開源庫(kù)，使用人數(shù)眾多，可實(shí)現(xiàn)各種狂拽酷炫掉渣天的前端效果，看真相。

07)、regulex: 用于生成 正則表達(dá)式 的可視化流程圖。

08)、markdown-it: 新型 Markdown 解析器，快速，支持插件。

09)、multiline: 用于 Javascript 中的多行文本，類似于 Ruby 的 HERE Doc。

10)、screenfull.js: 全屏插件，支持各大瀏覽器。

11)、lunr.js: 類似于 Solr, 但是用于瀏覽器上的全文搜索引擎，可以為 JSON 創(chuàng)建索引，離線也可以使用。

12)、jquery.hotkeys: jQuery 插件，用于綁定熱鍵。

13)、breach_core: Javascript 編寫的 Browser (瀏覽器)。

14)、octocard: 用于生成 Github 信息卡片的庫(kù)。

15)、github-cards: 用于生成 Github 信息卡片的庫(kù)。

16)、money.js: 輕量級(jí)貨幣轉(zhuǎn)換庫(kù)，web 和 node 皆可用。

17)、accounting.js: 輕量級(jí)的數(shù)字、貨幣轉(zhuǎn)換庫(kù)。

18)、javascript-algorithms: Javascript 實(shí)現(xiàn)的各種算法集合。

19)、lazy.js: 類似于 underscore, 但是會(huì)延遲執(zhí)行，某些場(chǎng)景下，性能會(huì)有很大的提升。

20)、seajs: 前端模塊加載器，解決模塊化、依賴等問(wèn)題。

21)、jQuery-One-Page-Nav: 單頁(yè)應(yīng)用中一個(gè)用于處理導(dǎo)航欄的庫(kù)。

22)、js.js: Javascript 實(shí)現(xiàn)的 javascript JIT。

23)、jquery-ui: jQuery 團(tuán)隊(duì)開發(fā)的 UI 相關(guān)的前端庫(kù)，功能強(qiáng)大。

24)、todomvc: 分別基于 AngularJS/EmberJS/Backbone等實(shí)現(xiàn)的 TODO List, 幫助開發(fā)者選擇前端 MVC 庫(kù)。

25)、localForage: Mozilla 出品，用于離線存儲(chǔ)，基于IndexedDB, WebSQL 或者。localStorage, 提供一致的接口。

26)、EventEmitter: 瀏覽器版的 EventEmitter。

27)、jquery.serializeJSON: jQuery 插件，用于將 form 表單序列化成 JSON 數(shù)據(jù)。

28)、knockout: 前端 MVVM 框架，用于開發(fā)富前端應(yīng)用。

29)、mermaid: 可以根據(jù)文本生成流程圖，類似于 Markdown 的語(yǔ)法。

30)、js-sequence-diagrams: 另一款可以根據(jù)文本生成流程圖的庫(kù)，類似于 Markdown 的語(yǔ)法。

31)、flow: 一個(gè)用來(lái)檢測(cè) Javascript 語(yǔ)法錯(cuò)誤的庫(kù)， Facebook 出品。

32)、zoomooz: jQuery 插件，用來(lái)處理瀏覽器縮放。

33)、fancyBox: 一個(gè)用于放大縮小圖片、Web 內(nèi)容或者多媒體元素的庫(kù)，優(yōu)雅大方。

34)、mithril.js: 輕量型前端 MVC 框架，部分使用場(chǎng)景下性能優(yōu)于 Angular.js 和 React。

35)、jquery.smartbanner: smartbanner 是從 IOS6 開始支持的一個(gè)新特性, 這個(gè)插件提供了對(duì)早期 IOS4/5 和 Android 的支持。

36)、jquery.scrollTo: 在頁(yè)面上以一個(gè)元素為起始以動(dòng)畫的方式移動(dòng)(ScrollTo)到另一個(gè)元素， 支持回退等。

37)、jScrollPane: 自定義的滾動(dòng)條，讓所有瀏覽器都顯示一樣的滾動(dòng)條。

38)、onepage-scroll: 提供類似于 iPhone6 展示頁(yè)類似的效果，適用于單頁(yè)應(yīng)用，兼容到 IE8

39)、scrollMonitor: 前端插件用來(lái)監(jiān)控元素的滾動(dòng)事件(進(jìn)入、退出等)，性能很好

40)、ScrollMagic: 神奇的滾動(dòng)交互效果插件，可以在滾動(dòng)的過(guò)程中設(shè)置各種各樣的動(dòng)態(tài)效果

41)、infinite-scroll: 滾動(dòng)加載，滾動(dòng)到最下到自動(dòng)加載， Paul Irish 大神之作

42)、animatable: 僅僅依靠 border-width 和 background-position 實(shí)現(xiàn)的各種動(dòng)態(tài)效果，看真相

43)、Fluidbox: 頁(yè)面上內(nèi)嵌圖片的放大縮小效果，類似于 Medium 中的效果

44)、jquery-validation: jQuery 的一個(gè)插件，用于校驗(yàn) Form 表單

45)、BigVideo.js: jQuery 的一個(gè)插件, 用于實(shí)現(xiàn)大背景(視頻、圖片)效果

46)、emscripten: 一款基于 LLVM, 可以將 C/C++ 轉(zhuǎn)換成 Javascript 的工具，使得 Javascript 可以近乎 Native 的速度

47)、qrcode-generator: 各種語(yǔ)言的二維碼生成工具

48)、device.js: 一個(gè)可以檢測(cè)設(shè)備類型的工具，可以讓我們根據(jù)不同的設(shè)備來(lái)為其定制響應(yīng)的 Javascript 和 CSS

49)、jquery-qrcode: jQuery 插件，用來(lái)生成二維碼

50)、Wookmark-jQuery: jQuery 的一個(gè)插件，可以用來(lái)實(shí)現(xiàn)瀑布流的效果

51)、isotope: 可以用來(lái)過(guò)濾、排列布局，實(shí)現(xiàn)美觀的動(dòng)態(tài)布局切換效果，Demo

52)、lazysizes: 功能強(qiáng)大的圖片延遲加載工具，可以首先加載一個(gè)低質(zhì)量的圖片，然后再加載高質(zhì)量的圖片

53)、progressbar.js: 簡(jiǎn)潔美觀的進(jìn)度條，扁平化

54)、pigshell: 一個(gè)由 Javascript 實(shí)現(xiàn)的Shell, 將互聯(lián)網(wǎng)當(dāng)做一個(gè)大的文件系統(tǒng), 通過(guò) cd/ls/cat…..等命令, 可以訪問(wèn) Facebook/Twitter/Google Drive 等網(wǎng)絡(luò)服務(wù)

55)、spectrum: Js實(shí)現(xiàn)的顏色選擇器 (Colorpicker)

56)、jQuery.countdown: jQuery 倒計(jì)時(shí)插件

57)、summernote: WYSIWYG 富文本編輯器

58)、awesomplete: 非常輕型的一個(gè)自動(dòng)補(bǔ)全 JS 庫(kù), 沒有任何依賴, 配置簡(jiǎn)單, 美觀

59)、switchery: IOS 7 上 Switch 的 JS 實(shí)現(xiàn), 支持 IE8 及以上瀏覽器

60)、trix: Basecamp 公司出品的富文本編輯器，簡(jiǎn)潔小巧

61)、sensor.js: 在智能移動(dòng)設(shè)備瀏覽器上，通過(guò)HTML5的api使用移動(dòng)設(shè)備的功能。定位、運(yùn)動(dòng)、傾斜等

62)、hyhyhy: 用于創(chuàng)建 基于 HTML5 的 演示文稿

63)、swipebox: jQuery 插件，用于處理移動(dòng)端的觸摸事件

64)、FileAPI: 前端用戶處理文件（拖放、多文件上傳等）

65)、Sortable: 現(xiàn)代瀏覽器上用于實(shí)現(xiàn)元素拖拽排序的功能，支持 Meteor, AngularJS, React，不依賴 jQuery

66)、Swiper: 用于實(shí)現(xiàn)瀏覽器上的滑動(dòng)切換效果，支持硬件加速

67)、matter-js: 2D 物理效果引擎，碰撞、彈跳等

68)、jQTouch: 用于輔助創(chuàng)建手機(jī)端的 Web 應(yīng)用，支持主題、Zepto.js 等

69)、snabbt.js: 一個(gè)利用 Javascript 和 CSS transform 的 animation 庫(kù)

70)、c3: 基于 D3 的圖表庫(kù)

71)、echarts: 企業(yè)級(jí)圖表庫(kù)，百度開發(fā)

72)、parallax.js: 一個(gè)用于響應(yīng)智能手機(jī) orientation 的庫(kù)

73)、jQuery-Animate-Enhanced: jQuery 動(dòng)畫庫(kù)的一個(gè)增強(qiáng)，用于現(xiàn)代瀏覽器

74)、wysihtml: 富文本編輯器，適用于現(xiàn)代瀏覽器

75)、slip: 一個(gè)通過(guò)滑動(dòng)或者拖拽來(lái)操控列表的庫(kù)

76)、evil-icons: 一個(gè)矢量圖庫(kù)，提供 Ruby/Node 等支持

77)、PhotoSwipe: JS 的一個(gè)圖片展示庫(kù)

78)、focusable: 是頁(yè)面上一個(gè)元素高亮的庫(kù)，有圖有真相

79)、firefox.html: Firefox 在瀏覽器端的實(shí)現(xiàn) —— HTML 版的 Firefox

80)、jquery-mobile: jQuery 團(tuán)隊(duì)開發(fā)的用于輔助手機(jī)端 web app 開發(fā)的庫(kù)，基于 HTML5

81)、mobile-angular-ui: 基于angularjs和bootstarp的web app開發(fā)框架

82)、interact.js: 一個(gè)適用于現(xiàn)代瀏覽器的，用于處理 手勢(shì)、拖放、縮放等的庫(kù)

83)、rebound-js: 實(shí)現(xiàn)部分物理效果，Facebook 出品

84)、basket.js: 基于 LocalStorage 的資源加載器，可以用來(lái)緩存 script 和 css, 手機(jī)端使用速度快于瀏覽器直接緩存

85)、iscroll: 高性能的滾動(dòng)(scroll)處理庫(kù)，功能強(qiáng)大，支持各種事件，不依賴任何的庫(kù)，且插件豐富, 大眾點(diǎn)評(píng)的手機(jī)端列表滾動(dòng)就是用這個(gè)庫(kù)處理的

86)、metrics-graphics: 基于 D3 的圖表庫(kù)，簡(jiǎn)潔、高效，Mozilla 出品

87)、accessible-html5-video-player: Paypal 出品的 Video 播放器

88)、loading: 幾種 Loading 效果，基于 SVG

89)、flippant.js: 一款能夠漂亮的網(wǎng)頁(yè)元素翻轉(zhuǎn)效果庫(kù)，代碼許久不更新，不過(guò)作為源碼學(xué)習(xí)還是不錯(cuò)的

90)、move.js: 基于 CSS3 的前端動(dòng)畫框架

91)、scrollReveal.js: 使元素以非常酷帥的方式進(jìn)入畫布 (Viewpoint)，看 Demo

92)、Modernizr: 一個(gè)用來(lái)檢測(cè) HTML5 和 CSS3 支持情況的庫(kù)

93)、foundation: 另一款前端模版框架，類似于 Bootstrap

94)、Flat-UI: Bootstrap 的一款主題，簡(jiǎn)潔美觀

95)、iCheck: 一款漂亮的 Checkbox 插件

96)、Swipe: 非常輕量級(jí)的一個(gè)圖片滑動(dòng)切換效果庫(kù), 性能良好, 尤其是對(duì)手機(jī)的支持, 壓縮后的大小約 5kb

97)、slick: 功能異常強(qiáng)大的一個(gè)圖片滑動(dòng)切換效果庫(kù)

98)、SocialButtons: 漂亮的社交按鈕

99)、sweetalert: 一個(gè)非常美觀的用于替換瀏覽器默認(rèn) alert 的庫(kù)

100)、web-animations-js: Javascript 實(shí)現(xiàn)的 Web Animation API

101)、vivus: 可以動(dòng)態(tài)描繪 SVG 的 JS 庫(kù), 支持多種動(dòng)畫

102)、plyr: 輕量, 小巧, 美觀的 HTML5 視頻播放器

103)、timesheet.js: 基于 HTML5 & CSS3 時(shí)間表

104)、slideout: 一個(gè)非常美觀的側(cè)滑菜單

如果你還知道更多好用的前端開發(fā)工具，也歡迎你在留言區(qū)給我們留言。

END 來(lái)和小伙伴們一起向上生長(zhǎng)呀~~~ 掃描下方二維碼，添加小詹微信，可領(lǐng)取千元大禮包并申請(qǐng)加入 Python學(xué)習(xí)交流群，群內(nèi)僅供學(xué)術(shù)交流，日常互動(dòng)，如果是想發(fā)推文、廣告、砍價(jià)小程序的敬請(qǐng)繞道！一定記得備注「交流學(xué)習(xí)」，我會(huì)盡快通過(guò)好友申請(qǐng)哦！（添加人數(shù)較多，請(qǐng)耐心等待）（掃碼回復(fù) 1024? 即可領(lǐng)取IT資料包） 與50位技術(shù)專家面對(duì)面20年技術(shù)見證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的超级棒的170+款web前端开发工具汇总，千万要收藏好！的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。