华清远见成都中心
高端IT就业培训专家
随着web应用如同雨后春笋般成长，前端工程师的薪资也直线提升，而开发工作的复杂程度也水涨船高。
诸如angularJs，ReactJS和vueJs这三个独领风骚的前端框架，在带给开发者便利的开发流程之时，也附带了要开发者首先解决搭建环境的难题。
而且互联网公司之间的撕逼大战，其结果在很大一部分上取决于金钱投入以及出产速度，毕竟，一个goodIdea只要有一次实现就OK了，抢先上线意味着具有优先权能够占据更多的市场份额，能够省去为了铺开用户而花费的大笔的money。
所以选择一款适合自己的开发工具是开发者必须练就的火眼金睛，毕竟，子曾经说过：“工欲善其事，必先利其器。”下面就给大家介绍几款较为优秀的开发工具作为参考。
1.调试工具
在调试工具的选择上，我们公司的员工通常会首先选择使用Chromedevtools，其次是FirefoxFierbug，在兼容方向上选择IE开发工具条。
从chrome每6周就发布一次开发者工具软体的速度上，就能够看出chrome对其的重视程度。
这个软体套件功能强大，内置的DOM/CSS编辑器允许开发者快速查看页面布局与css样式，并对更改结果作出反馈实时更新。
sources允许开发者查看页面源码，css文件以及图片文件等等，并设置断点监听页面的执行。
network是监听页面所有的网络请求及资源加载的。
console控制台除了调试打印的功能，还能帮助我们快速查看忘记的属性，拼写等。
Application可以快速查看页面缓存，本地存储，页面的cookies和session信息。
除了以上的介绍，Chromedevtools还有许多其他的功能，在这里就不一一介绍了。
2.开发工具
Dreamweaver(推荐一颗星)
刚开始学习的小白们，一般的培训机构都会推荐大家使用的开发工具，提示功能超级给力，包括常用的API，资源路径，项目结构都能够使用该软件进行快速配置。但是因为刚开始在学习开发的时候，很多API的写法都需要记忆的，使用提示功能恰恰不能在日常练习中帮助大家进行记忆，所以在这里不推荐大家使用，但是公司里的设计可以使用的多一点。
HBuilder(推荐三颗星)
这是一款国内的公司DCloud所推出的编辑器，与Dreamweaver相比，提示功能更是强大的令人发指，而且其内置的集成开发环境(以下简称IDE)，既可以配置本地服务，也可以快速对代码进行打包，但是由于其最初的时候bug太多，所以不被很多公司看好，不过随着迭代和不断更新，现在着实有了一大批忠实用户，如果公司不强制要求不能使用，那么在开发工作中也是一个不错的选择。
sublimeText与Atom(推荐三颗星)
这里把两者放倒一起来介绍，因为两者同样是文本代码编辑器，sublimetext是由国外一个叫做JonSkinner的程序员所开发的，Atom是近来由GitHub推出的，前者是收费的但是可以永久试用，由于推出时间较长，网上有许多配置好的破解版供大家安装。
文本编辑器是高度的私人订制编辑器，所以他们的体积都非常小，几乎每一个使用sublimetext或者Atom的程序员，他们的配置也都不太一样。这样的编辑器能够满足大部分小型项目的开发需求。但是诸如安装插件，配置代码片段，设置用户习惯等对需要我们自己来操作。下面贴出我的个人设置：
pre
{
"create_window_at_startup":false,
"font_size":20,//defaultfont-sizeis10
"highlight_line":true,//defaultsetisfalse
"open_files_in_new_window":false,
"save_on_focus_lost":true,//savethisfilewhenthefocushasbeenlost
"word_wrap":true
}
/pre
同时推荐一些好用的插件：
packagecontroll：这个用来控制安装其他的插件，必装(百度搜索就可以);cssrem：移动端布局自动在css中将px转换为rem(git上搜索一下就可以);emmet：这个是布局的快捷键，mac版本默认是没有的，需要手动装一下;
除此之外就看大家需求了，比如less识别，sass识别，.vue识别，因为sublimetext默认是不识别less/sass/.vue等语法的，所以需要安装插件。
另外sublimetext文件路径包含中文时，右键在浏览器打开是不能使用的，大家可以安装一个叫做sidebar的插件，这样按住北京那家医院专治白癜风白癜风治疗偏方