web前端开发工具 时间：2018-01-03     来源：web前端开发工具汇总

随着web应用如同雨后春笋般成长，前端工程师的薪资也直线提升，而开发工作的复杂程度也水涨船高。

诸如angularJs，ReactJS和vueJs这三个独领风骚的前端框架，在带给开发者便利的开发流程之时，也附带了要开发者首先解决搭建环境的难题。

而且互联网公司之间的撕逼大战，其结果在很大一部分上取决于金钱投入以及出产速度，毕竟，一个goodIdea只要有一次实现就OK了，抢先上线意味着具有优先权能够占据更多的市场份额，能够省去为了铺开用户而花费的大笔的money。

所以选择一款适合自己的开发工具是开发者必须练就的火眼金睛，毕竟，子曾经说过：“工欲善其事，必先利其器。”下面就给大家介绍几款较为优秀的开发工具作为参考。

1. 调试工具

在调试工具的选择上，我们公司的员工通常会首先选择使用Chrome dev tools，其次是Firefox Fierbug，在兼容方向上选择IE开发工具条。

从chrome每6周就发布一次开发者工具软体的速度上，就能够看出chrome对其的重视程度。

这个软体套件功能强大，内置的DOM/CSS编辑器允许开发者快速查看页面布局与css样式，并对更改结果作出反馈实时更新。

sources允许开发者查看页面源码，css文件以及图片文件等等，并设置断点监听页面的执行。

network是监听页面所有的网络请求及资源加载的。

console控制台除了调试打印的功能，还能帮助我们快速查看忘记的属性，拼写等。

Application可以快速查看页面缓存，本地存储，页面的cookies和session信息。

除了以上的介绍，Chrome dev tools 还有许多其他的功能，在这里就不一一介绍了。

2.开发工具

Dreamweaver(推荐一颗星)

刚开始学习的小白们，一般的培训机构都会推荐大家使用的开发工具，提示功能超级给力，包括常用的API，资源路径，项目结构都能够使用该软件进行快速配置。但是因为刚开始在学习开发的时候，很多API的写法都需要记忆的，使用提示功能恰恰不能在日常练习中帮助大家进行记忆，所以在这里不推荐大家使用，但是公司里的设计可以使用的多一点。

HBuilder(推荐三颗星)

这是一款国内的公司DCloud所推出的编辑器，与Dreamweaver相比，提示功能更是强大的令人发指，而且其内置的集成开发环境(以下简称IDE)，既可以配置本地服务，也可以快速对代码进行打包，但是由于其最初的时候bug太多，所以不被很多公司看好，不过随着迭代和不断更新，现在着实有了一大批忠实用户，如果公司不强制要求不能使用，那么在开发工作中也是一个不错的选择。

sublime Text 与 Atom (推荐三颗星)

这里把两者放倒一起来介绍，因为两者同样是文本代码编辑器，sublime text是由国外一个叫做Jon Skinner的程序员所开发的，Atom是近来由GitHub推出的，前者是收费的但是可以永久试用，由于推出时间较长，网上有许多配置好的破解版供大家安装。

文本编辑器是高度的私人订制编辑器，所以他们的体积都非常小，几乎每一个使用sublime text或者Atom的程序员，他们的配置也都不太一样。这样的编辑器能够满足大部分小型项目的开发需求。但是诸如安装插件，配置代码片段，设置用户习惯等对需要我们自己来操作。下面贴出我的个人设置：

<pre>

{

"create_window_at_startup": false,

"font_size": 20,//default font-size is 10

"highlight_line": true,//default set is false

"open_files_in_new_window": false,

"save_on_focus_lost": true,//save this file when the focus has been lost

"word_wrap": true

}

</pre>

同时推荐一些好用的插件：

package controll：这个用来控制安装其他的插件，必装(百度搜索就可以); cssrem：移动端布局自动在css中将px转换为rem(git上搜索一下就可以); emmet：这个是布局的快捷键，mac版本默认是没有的，需要手动装一下;

除此之外就看大家需求了，比如less识别，sass识别，.vue识别，因为sublime text默认是不识别less/sass/.vue等语法的，所以需要安装插件。

另外sublime text文件路径包含中文时，右键在浏览器打开是不能使用的，大家可以安装一个叫做side bar的插件，这样按住command+B就可以打开文件。

插件的安装方法如下(因为版本不同教程不通用，此作为举例)：

对于window平台(安装less转css的插件)：

安装less插件：我们在sublime text中按下ctrl+shift+p输入install ，选择install package输入less回车即可;这个插件的作用是让less文件在sublime中高亮显示。

安装less2css插件：在sublime text中按下ctrl+shift+p输入install ，选择install package输入less2css回车;这个插件的作用有三个，它可以在 .less 文件保存时自动生成同名的 .css 文件，也可以批量编译项目中所有 .less 文件，还可以在保存 .less 文件时提示编译错误信息。

重启sublime text就可以了。

对于mac平台安装less，请参阅：

//blog.csdn.net/jiaoshenmo/article/details/51484052

针对已经安装过package controll 在调用ctrl+shift+p 报错为“there are no pakeages available for installation”的童鞋请参考：

//blog.csdn.net/sysuzjz/article/details/50076923

针对最新版sublime text3 的童鞋，如果以上教程无法解决问题，请参阅：

https://jingyan.baidu.com/article/ad310e80c0def11848f49e64.html

针对部分童鞋按下ctrl+shift+p没有正确调出插件安装的弹窗，说明没有package controll 这个应用安装包，请查阅：

//blog.csdn.net/freshlover/article/details/44261229/或者：

https://jingyan.baidu.com/article/925f8cb817fd49c0dce05653.html

vim(推荐五颗星)

这个文本编辑器大家可以先百度一下看看评论了解一下，这里为什么推荐五颗星呢?我个人推荐前端的小伙伴们都应该学习这个vim的使用，因为很多前端伙伴都有一种“命令行恐惧”，这个vim几乎可以说是命令行编辑工具，除了他的前身vi，可以说是前无古人后无来者的良心大作了，但是学习他需要大家首先实现熟练盲打，也就是熟悉键盘，因为用这个编辑器你会发现一件恐怖的事情：他的快捷键搭配会让你心生绝望而且毕生难忘，另外还有很多的技巧需要掌握，虽然很难，不过这真的是值得我们去学习的，你会发现，学习他不见得会让你成为一个大牛，但是身边的大牛一般都会vim。

Nodepad++(推荐四颗星)

这是我上大学学习编程的时候老师推荐的一款window系统下的文本编辑器，怎么说呢?你肯定觉得还不如txt好用，这个编辑器用时间长了，会让你记住所有的API，不管是好记的还是难记的，因为他没有提示!没有提示!!没有提示!!!重要的事情说三遍，初学者可能非常非常的难以接受，并且和其他编辑器相比，开发效率低下的令人发指，打开软件就像打开了空白的txt文档一样，连一个标签两个尖角号你都得一个一个打出来，但是到了后期你肯定会感谢你最开始的选择与坚持的。

webStorm(推荐五颗星)

这个开发软件有许多的绰号：“最智能的javaScript IDE”，“html5开发神器”，“最强大的web开发编辑器”等等。

同文本编辑器相比，IDE编辑器牺牲了体积小，速度快，换来的是高智能和very good的用户体验，想象一下当你口渴的时候发现水杯就在手边，当你瞌睡的时候枕头就在脑后的感觉，IDE在编辑代码的体验上就会给你这样一种的感觉，如鱼得水，游刃有余。严格来说这已经不算是开发软件了，而是一种开发环境，集成了从编辑，编译，调试，图形界面等一体化的套餐服务，同类型的还有PhpStorm，Visual Studio，Eclipse，以及前面提到的HBuilder等。

IDE的优点是提供给开发者统一的标准，工具以及其他捷径，能够使开发者将精力时间集中在代码实现上从而大幅度提升开发效率，并且它还能够帮你方便的管理开发工作。

当然他的缺点也很明显，体积大，相比于200块一辆的自行车，100000块的汽车需要你掌握更多的技巧才能让它开动起来，IDE提供了繁多的功能，想要完全掌握它不是一件简单的事情，所以相当于增加了初学者的困难，而且由于太过于依赖工具本身，有些不好的代码无法被修复，另外，当你在学习一门新的编程语言时，千万不要使用它。

总体来说，IDE适合用来开发大型项目，而学习和日常开发，我们使用文本编辑器就已经足够了。工具只是完成事情的帮手而已，要完成事情，靠的还是我们工程师扎实的基础和良好的习惯，千万不要对工具的使用有太深的芥蒂，大家在逐渐使用的时候培养良好的习惯就好。