作者：web前端開發

我們與企業內部的Web開發團隊進行了很多次交流，研究了很長時間，最后將Debug工具與Web前端開發工具整理匯總在了一起，這些工具對每個Web開發人員都非常有用。

這些工具將使您的工作更加輕松，特別是如果您是Web開發人員，Web設計人員或項目經理。您應該查看一下并嘗試一下。

不管您是網站開發人員還是設計師？這些工具將使您的生活和工作流程更加輕松。

Web前端開發工具

01、Alertify.js

網址：http://alertifyjs.com/

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

02、Alfred

網址：http://www.alfredapp.com/

Alfred是Mac OS X上屢獲殊榮的應用程序，可通過熱鍵和關鍵字提高工作效率。

03、AlloyUI

網址：http://alloyui.com/

AlloyUI是在YUI3（JavaScript）之上構建的框架，該框架使用Bootstrap（HTML / CSS）提供用于構建高可擴展性應用程序的簡單API。

04、AngularJS

網址：https://angularjs.org/

AngularJS允許您擴展應用程序的HTML。具有極強的表現力，可讀性，并且可以快速構建開發。

05、Backbone

網址：https://backbonejs.org/

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

06、Bitbucket

網址：https://bitbucket.org/

Bitbucket提供分布式版本控制，使您和您的團隊可以輕松地進行協作。

07、Bower

網址：http://bower.io/

網站由很多東西組成—框架，庫，資產，實用程序和彩虹。Bower為您管理所有這些事情。沒有它，前端Web開發就困難得多。

08、Brackets

網址：http://brackets.io/

現代的，開放源代碼的文本編輯器，可用于Web開發設計。

09、Colourcode

網址：https://colourco.de/

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

10、CSS Comb

網址：http://csscomb.com/

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

11、CSS Compressor

網址：http://www.cssdrive.com/index.php/main/csscompressor/

使用此實用程序壓縮CSS，以提高加載速度并節省帶寬。

12、CSS Lint

網址：http://www.cssdrive.com/index.php/main/csscompressor/

CSS Lint是一個開源CSS代碼質量工具。會傷到你的心情

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

13、CSSCSS

網址：https://zmoazeni.github.io/csscss/

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

14、Dabblet

網址：http://dabblet.com/

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

15、Dromaeo

網址：http://dromaeo.com/

以Dromaeosaurs命名的JavaScript性能測試套件。

16、Ember.js

網址：http://blog.debugme.eu/front-end-web-developer-tools/emberjs.com

用于創建雄心勃勃的Web應用程序的框架。應該在每個前端Web開發人員的工具包中都包含。

17、Fontastic

網址：http://fontastic.me/

可以在幾秒鐘內創建圖標字體。使您的網站運行更快。

18、Fontello

網址：http://fontello.com/

使用圖標構建自定義字體的工具。

19、Foundation

網址：https://get.foundation/

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

20、Framework 7

網址：https://framework7.io/#.Vd7TmPmqqko

用于構建iOS和Android應用程序的全功能HTML框架。

21、GitHub

網址：https://github.com/

GitHub是人們構建軟件的方式。擁有超過1000萬的開發者社區，開發人員可以使用強大的協作開發工作流程發現，使用并貢獻超過2600萬個項目。

22、Grunt

網址：https://gruntjs.com/

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

23、HTML5 Boilerplate

網址：https://html5boilerplate.com/

HTML5 Boilerplate可幫助您構建快速，健壯且適應性強的Web應用程序或網站。借助數百位開發人員的綜合知識和精力，一站式啟動您的項目。

24、HTML5 Please

網址：https://html5please.com/

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

25、Icomoon

網址：https://icomoon.io/

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

26、JavascriptOO

網址：http://www.javascriptoo.com/

您應該使用示例，類別，安裝命令，CDN鏈接，項目和作者統計信息來研究每個JavaScript項目。

27、jQuery

網址：https://jquery.com/

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

28、jQuery UI

網址：http://jqueryui.com/

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

29、JS Hint

網址：http://www.jshint.com/

JSHint是一個社區驅動的工具，用于檢測JavaScript代碼中的錯誤和潛在問題并強制執行您團隊的編碼約定。它非常靈活，因此您可以輕松地將其調整為特定的編碼準則以及希望在其中執行代碼的環境。

30、JSFiddle

網址：https://jsfiddle.net/

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

31、JSontoHTML

網址：http://json2html.com/

json2html是一個開放源代碼的JavaScript庫，它使用JSON模板將JSON對象轉換為HTML。

32、LightTable

網址：http://lighttable.com/

Light Table通過即時反饋將您連接到您的創作，并顯示數據值流過您的代碼。

33、LiveReload

網址：http://livereload.com/

LiveReload監視文件系統中的更改。保存文件后，將根據需要對其進行預處理，并刷新瀏覽器。更酷的是，當您更改CSS文件或圖像時，瀏覽器會立即更新，而無需重新加載頁面。

34、Meteor

網址：https://www.meteor.com/

Meteor是一個完整的開源平臺，可以使用純JavaScript構建Web和移動應用程序。

35、Modernizr

網址：http://modernizr.com/

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

36、Normalize.css

網址：http://necolas.github.io/normalize.css/

Normalize.css使瀏覽器更一致地渲染所有元素，并符合現代標準。它只針對需要規范化的樣式。

37、Paletton

網址：http://paletton.com/

設計器工具，用于創建可以很好地協同工作的顏色組合。

38、Pesticide

網址：http://pesticide.io/

使用提綱加速CSS布局調試的工具。

39、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代碼，包括其自身。

41、Responsinator

網址：https://www.responsinator.com/

Responsinator幫助網站制造商快速了解其響應式網站在最受歡迎的設備上的外觀。它不能精確地復制外觀，因為準確的測試總是在真實設備上進行測試。

42、Responsive

網址：http://responsive.victorcoulon.fr/

用于響應式設計測試的便捷工具。

43、Responsive Design Testing

網址：http://mattkersley.com/responsive/

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

44、Retinize

網址：http://retinize.it/

RetinizeIt非常適合需要為iOS或支持Retina的網站的PSD切片UI元素的Web設計人員和前端開發人員。

45、Sass

網址：https://sass-lang.com/

Sass是世界上最成熟，穩定，功能最強大的專業級CSS擴展語言。具有超能力的CSS。

46、Stack Overflow

網址：http://stackoverflow.com/

Stack Overflow是面向專業和發燒級程序員的問答社區網站。而且很大。他們剛剛達到一千萬個問題。

47、Sublime Text 3

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

Sublime Text是一款代碼編輯器，標記和散文的高級文本編輯器。

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

48、Type-o-matic

網址：http://type-o-matic.net/

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

49、TypeWonder

網址：http://typewonder.com/

TypeWonder可以幫助用戶在其網站上檢查或測試Google字體，而無需實際更改實時網站上的任何內容。

50、Vue.js

網址：http://vuejs.org/

Vue.js是用于構建現代Web界面的庫。它通過簡單靈活的API提供了對數據敏感的組件。

51、WebStorm

網址：https://www.jetbrains.com/webstorm/

WebStorm是一個輕量級但功能強大的IDE，非常適合使用Node.js進行復雜的客戶端開發和服務器端開發。

52、What Font Is

網址：http://www.whatfontis.com/

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

53、Wordmark.it

網址：http://wordmark.it/

Wordmark.it旨在通過快速顯示計算機上安裝的字體的任何文本的預覽來幫助字體選擇過程。

54、Yeoman

網址：http://yeoman.io/

Yeoman幫助您啟動新項目，規定最佳實踐和工具以幫助您保持生產力。快速構建完整的項目或有用的部分。

55、Gulp

網址：http://gulpjs.com/

Gulp是流式構建系統，它是使用Node.js的任務運行程序。您可以使用它構建系統自動化任務，例如縮小和復制所有JavaScript文件或靜態圖像等。令人敬畏的前端Web開發人員工具。

56、React

網址：http://facebook.github.io/react/

React是一個開放源代碼的JavaScript庫，用于創建用戶界面，旨在解決開發單頁應用程序時遇到的挑戰。

57、Browserify

網址：http://browserify.org/

Browserify允許您捆綁所有依賴項。

58、Webpack

網址：https://webpack.github.io/

將許多模塊打包到少數捆綁資產中，就使用webpack。

59、Babel

網址：https://babeljs.io/

用于編寫下一代JavaScript的編譯器。每個前端開發人員都應使用。

60、PostCSS

網址：https://github.com/postcss/postcss

PostCSS是使用JavaScript插件轉換CSS的工具。

61、cssnext

網址：http://cssnext.io/

cssnext是一個CSS編譯器，可讓您今天使用最新的CSS語法。它將新的CSS規范轉換為更兼容的CSS，因此您無需等待瀏覽器支持。

62、Visual Studio 2015

網址：https://visualstudio.microsoft.com/zh-hans/vs/

Visual Studio 2015是一個豐富的集成開發環境，用于為Windows，Android和iOS創建出色的應用程序，以及現代Web應用程序和云服務。

63、Can I Use

網址：https://caniuse.com/

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

64、npm

網址：https://www.npmjs.com/

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

65、ECMAScript 6

網址：http://es6-features.org/

ECMAScript帶有許多通用數據類型的簡寫形式，這可以節省您的時間，并使程序更具可讀性。

66、Atom

網址：https://atom.io/

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

67、MaterializeCSS

網址：https://materializecss.com/

Materialize是基于Google Material Design的現代響應式CSS框架。

68、JSPM

網址：https://jspm.io/

JSPM是SystemJS通用模塊加載器的軟件包管理器，該軟件包管理器基于動態ES6模塊加載器構建。

69、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 展示頁類似的效果，適用于單頁應用，兼容到 IE8

39)、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 和 CSS

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

50)、Wookmark-jQuery: jQuery 的一個插件，可以用來實現瀑布流的效果

51)、isotope: 可以用來過濾、排列布局，實現美觀的動態布局切換效果，Demo

52)、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，不依賴 jQuery

66)、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 版的 Firefox

80)、jquery-mobile: jQuery 團隊開發的用于輔助手機端 web app 開發的庫，基于 HTML5

81)、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 效果，基于 SVG

89)、flippant.js: 一款能夠漂亮的網頁元素翻轉效果庫，代碼許久不更新，不過作為源碼學習還是不錯的

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

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

92)、Modernizr: 一個用來檢測 HTML5 和 CSS3 支持情況的庫

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

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

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

96)、Swipe: 非常輕量級的一個圖片滑動切換效果庫, 性能良好, 尤其是對手機的支持, 壓縮后的大小約 5kb

97)、slick: 功能異常強大的一個圖片滑動切換效果庫

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

99)、sweetalert: 一個非常美觀的用于替換瀏覽器默認 alert 的庫

100)、web-animations-js: Javascript 實現的 Web Animation API

101)、vivus: 可以動態描繪 SVG 的 JS 庫, 支持多種動畫

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

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

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

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。