前端开发工具_前端学习必备的开发工具！你值得拥有！

孔子说：“工欲善其事，必先利其器”，学习WEB前端开发也是一样。在开发过程中，经常我们会遇到很多繁杂精细的麻烦问题，虽然知道要去按照步骤解决，但总归耗费大量的时间。

再加上最近很多小伙伴问小渡：有没有好用的前端开发工具推荐呢？”小渡今天就特地整理了一批好用的web前端学习在线工具，遇到问题，打开网页，想要的东西，分分钟就能解决，让开发变得高效，快速。

有了这些工具在手，就可以从繁重的工作任务中解脱出来，有大把的时间去王者峡谷散步打野浪一圈了。

前方干货来袭！还不准备好小板凳认真做笔记~

首先给大家分享两个十分好用的网站导航：

1-大前端导航

http://www.daqianduan.com/nav

大前端不但包含了前端开发网站链接，还有各种大神素材和设计大赏，不论你是开发还是设计，你能想到的分类这里都有。可以说是hin全面了。

2-前端谷

http://qdgu.cn/index.php?m=Index&a=index

和大前端包罗万象不同，前端谷专心前端开发二十年，除了常用的前端框架还有前端案例赏析、JSCSS库、移动UI等等导航，提供了最新最流行的前端工具目录，极大方便了前端工程师。

当然啦，为了防止信息量太大以至于你码走不看，贴心的小渡还特意给大家整理出来了23个具体的开发工具，拿走不谢！

1前端社区-github

网站地址：https://github.com/

GitHub有170万名软件开发人员的忠实用户，他们平均每天更新8万个并新建7千个软件库。对GitHub网站上托管的总计超过300万个软件库，其联合创始人Chris Wanstrath曾经形象地称其为"程序员的维基百科全书"。

2WebStorm

网站地址：http://www.jetbrains.com/webstorm/

这款JavaScript开发工具，相信作为JS开发者的你一定知道，它可是被称作“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”。

功能主要包括：JavaScript,编辑语言,创造便捷的环境等，相信你一定烂熟于心了，在这里就不一一赘述了。

3Sublime Text3

Sublime Text 作为一个尽为人知的代码编辑器，其优点不用赘述。同时支持Windows、Linux、Mac OS X等操作系统。具界面整洁美观、文本功能强大，且运行速度极快，非常适合编写代码，写文章做笔记。它还支持众多插件扩展，实现强强联手，比如说：

Emmet插件：前端开发不可缺少，让编写 HTML和CSS代码变得简单，节省大量时间。Emmet可使开发者用缩写形式书写代码，再用“扩展”功能自动将代码扩展至完整样式；

Autoprefixer：CSS3私有前缀自动补全插件，该插件使用CanIUse资料库，能精准判断哪些属性需要什么前缀；

ColorPicker：编辑CSS样式的时候， ColorPicker调色盘不仅可以查看颜色值，更可以轻松调好颜色，还有个双向选择颜色的功能。

4Firebug

网站地址：https://getfirebug.com/

Firebug是firefox下的一个插件,能够调试所有网站语言，如Html,Css等，但最重要的是有javascript调试功能，在各种浏览器下都能使用(IE,Firefox,Opera, Safari)。

除此之外，其他功能还很强大，比如html,css,dom的察看与调试，网站整体分析等等。总之就是一整套完整而强大的 WEB开发工具，再有就是其为开源的软件。

5Diffchecker

网站地址：https://www.diffchecker.com/

Diffchecker是用于检测/比较两个文件文本有什么不同的差异的在线代码工具 ，它的优点是不需要人工查看，尤其是大文件，且使用方便。

6Grunt

Grunt 是一个基于任务的JavaScript工程命令行构建工具，被称为JavaScript世界的构建工具。当你在Gruntfile文件正确配置好了任务，任务运行器就会自动帮你或你的小组完成大部分无聊的工作。

7Vim

网站地址：https://www.vim.org/

Vim是从 vi 发展出来的一个文本编辑器。代码补全、编译及错误跳转等方便编程的功能特别丰富，在程序员中被广泛使用，和Emacs并列成为类Unix系统用户最喜欢的文本编辑器。

8Alertify.js

网站地址：https://docs.angularjs.org/

AlertifyJS是一个用于开发浏览器对话框和通知的JavaScript框架，它提供了默认浏览器对话框的替代，使得创建自己的界面变得非常简单。

9AngularJS

AngularJS是Google开源的一款JavaScript MVC框架，弥补了HTML在构建应用方面的不足，而且AngularJS还可以允许用户扩展应用程序的HTML词汇表。

10QUnit

QUnit是一个功能强大，易于使用的JavaScript单元测试框架。它由jQuery，jQuery UI和jQuery Mobile项目使用，并且能够测试任何通用的JavaScript代码，包括其自身。

11AntDesign

这个是个基于react的后台UI框架。

12Element

网站地址：http://element.eleme.io/#/zh-CN

一个基于vue2.0的UI框架，可以快速实现建站需求。

13TypeScript

TypeScript是微软开发的自由和开源的编程语言。它是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。

14CoffeeScript

CoffeeScript是一套JavaScript的转译语言，创建者 Jeremy Ashkenas 戏称它是- JavaScript 的不那么铺张的小兄弟。

15Less

网站地址：http://lesscss.org/

Less是一门CSS预处理语言，它扩展了CSS语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展，可以运行在 Node 或浏览器端。

16Gulp

网站地址：https://www.gulpjs.com.cn/

Gulp是一个基于流的自动化构建工具，它可以缩小和复制所有JavaScript文件或静态图像等。

17React

网站地址：https://reactjs.org/

React是一个用于创建用户界面的开源JavaScript库，旨在解决开发单页应用程序时遇到的挑战。

18Webpack

网站地址：http://webpack.github.io/

可以将许多模块包装成几个捆绑资产的打包构建工具。

19Babel

网站地址：https://www.babeljs.cn/

用于编写下一代JavaScript的编译器。每个前端Web开发人员都应该会使用。

20PostCSS

网站地址：https://postcss.org/

PostCSS是一个使用JS插件转换样式的工具。这些插件可以lint你的CSS，支持变量和mixins，转换未来的CSS语法，内联图像等。

21Visual Studio 2015

Visual Studio 2015是一个丰富的集成开发环境，用于为Windows，Android和iOS以及现代Web应用程序和云服务创建令人惊叹的应用程序。

22Can I Use

网站地址：https://caniuse.com/

兼容性表格支持HTML5，CSS3，SVG和其他各种浏览器技术。

23Npm

网站地址：https://www.npmjs.com/

npm是Node.js.的包管理器。它是在2009年创建的一个开源项目，以帮助JavaScript开发人员轻松共享封装的代码模块。

当然，web开发类工具还有很多，小渡介绍的主要涉及的是前端程序开发比较常用的工具，相信你在平常学习过程中一定会熟练掌握更多更适合你开发环境的工具。