超级棒的170+款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: 一个非常美观的侧滑菜单

如果你还知道更多好用的前端开发工具，也欢迎你在留言区给我们留言。

为了帮助大家学习前端，让学习变得轻松，高效！今天给大家分享一套教学资源，从最零基础开始的的HTML+CSS+JavaScript。jQuery，Ajax，node，angular框架等帮助大家在学习Web前端的道路上披荆斩棘 资料资源的取方式如下：

还可以领取2020年最新前端基础精讲视频教程分享！我们的前端学习Q裙：（518672693） 

 

原文: https://www.cnblogs.com/bjy216326/p/13297412.html