关于WEB前端开发的工具

俗话说：“工谷善其事，先必利其器。”一个用得顺手的工具，确实能为我们的开发带来方 便，更重要的是会让我们更加享受工具开发过程中所带来的乐趣。　

1、编码工具：
记事本之类的编辑器都可以胜任，但我们还是从开发效率和编码体验上面谈谈。
Visual Stuio 
如果你用windows，重量级的Visual Stuio 2013虽然很庞大，对硬件要求比较高，但是用起来绝对方便，比如智能提示、代码格式化，尤其是配合一些拓展插件。界面清爽，项目管理方便，入手简单。
Sublime 
轻量级的话，Sublime绝对是首选，小巧但功能强大，支持主流语言而且跨平台，插件也很多，前端开发很多都用它。
其实你说反了，越是功能简单的编辑器，越考验你的前端编码能力~
2、调试工具
主要是主流浏览器，Chrome、Firefox、IE11、Safari，这些浏览器基本都具备了开发者模式，学会使用后基本轻松应付各种前端调试问题。

NO1、记事本

　　相信接触电脑的人没有人不认识记事本的吧，没错，这个就是系统的自带的记事，不过本人没用过LINUX和APPLE的系统，不知里面是否也是自带了记事本的。这个记事本虽然很简陋，甚至可以用丑来形容，但是却是非常合心的小工具。
　　有时候手头上没有任何的其他工具软件，这时候就可以用记事本来代劳了，直接在里面手写代码。当然，这个只是暂时性的代替，写代码还是有更好的工具的。
　　记事本除了来用可以紧急替代，平时里还有其他作用的。有时候，我们想从网页上保存一些文字下来到WORD里面，直接复制就把HTML和相应的样式什么的都一并复制进来了，影响了美观，当然有经验的人知道可以采用“选择性粘贴”，但没经验的人是一下子复制进来后就不知怎样处理了，这时候可以先将复制的东西粘贴在记事本里，再从记事本里将文字复制到WORD里，这样就完全的将HTML的标签及样式完全的去掉了，成了完完全全的纯文本了。

NO2、EditPlus

　　这个现在是我至爱的一个写代码的工具，不仅功能齐全，自定义程度高，程序文件还非常小，可绿色携带，配置可以移植，语法、模板都可根据自已的书法习惯来进行自定义，还可以定制自定义的着色等等优点，让我用上了就爱不离手了。无论是HTML/Javasctipr/CSS，还是/ASP/PHP/C/C++/Perl/JAVA等语言，基本都是通杀的，当然，我也只是基本用前三种语言而已。另外还有可以进行代码收缩、缩进、查看行数、列数等功能也非常的实用，更重要的有一个基本上是无限次数的撤消或重做的功能，可以上你在任意的时候都可以回到所需要的状态，一些文件比较等小功能还有待更加深入的挖掘。
　　当然，这个软件也是有一些缺点的，例如，没有可视化功能，当然这个并不是在要可视化里面编辑，只是想可以实现在可视化里点击一下就能快速定位到代码部分，这样方便查找（哈哈，这个只是个人的一个想法而已）。还有就是不能智能代码收缩，只能根据代码的缩进量来进行判断，所以有时候收缩代码不太准确，特别是页面长、代码量非常大的时候，有时候要定位某个部分的代码找起来也比较费时。还有一个就是替换的功能试用了感觉不是那么智能和准确，明明输入准确的搜索要替换的条件，且眼睛也都定位到了相应的代码部分，但软件就是死活不认（呵呵，可能他也会有睁眼瞎的时候），搜索替换的时候，也非常的迅速，简直是“迅雷不及掩耳之势”，一下子全部都替换了还没反应过来，还要撤消一下看看是否执行了操作。
　　当然虽然还有这些缺点，但这个工具安装程序才2M多一点，安装解压后也才不过3M左右，实在强大，缺点相对优点已经算是吹毛求疵了，哈哈，本人至爱。
　　另外本人也根本自己的使用习惯，配了一个着色的方字案和相应的语言文件（包括了HTML和CSS的讲法），着色可看上面的图，具体的语法和模板请自行下载亲测。点击此处下载

notepad也不错

NO3、FastStone Capture

　　这个是一个辅助类的小工具，但是这个小工具虽然“麻省虽小，却也是五脏俱全”，非常的优秀，也可以绿色携带。这个小软件有非常多的功能，有各种各样方式的截图，录制屏幕、屏幕放大镜、屏幕尺、屏幕取色等等的功能，本人常用的就截图、屏幕尺、取色等功能，包括本博中的所有截图，基本上都是出自这个软件的。屏幕尺和取色工具可以在写页面的时候用来进行效果图的精确的查看和进行取色。非常得心和方便的小工具。本人已整理了上来，点击下载。

NO4、Topstyle

　　这是一个写CSS的工具，有自动提示功能，当不想每个字母都自己来敲的时候，这个工具就可以派上用场了。工具是支持其他语言的，只不过我一直只用来写CSS。工具还有预览、针对不同的浏览器的检测等其他一大堆的功能，但本人基本不用的，只用一项就已足够了。
　　此工具也有一些缺点，就是不支持自动换行，有时候一个类会写得很长，得拖动横向的滚动条到右边去看，很不方便，个人觉得这个很有必要进行优化。希望软件有做该软件汉化的人或其他的人看到可以向软件作者反映进行优化一下。软件是英文版的，因为本人使用的是汉化版的，所以对中文支持有些问题，部分文字会看不到（当然CSS不可能是中文的，是注释啦，如果有一天，样式也能用中文来写，那个时候就强悍了，呵呵），估计英文版的也会是这样情况，所以可以谅解、忽视。本人已整理了上来，点击下载。

NO5、Dreamveaver

　　这个是一个功能非常强大的开发工具，在使用这么多的写代码的工具中，这个是最完善和强大的了，主流的语言都支持，需要有的功能也基本上全有了，这里就不再多说，相信开发的人都知道这个软件的强大了。其中个人最喜欢的就是智能收缩的，不会像EditPlus那边是根据缩进来进行收缩的，而是完全的做到了根据标签来进行自动关闭收缩，这个是非常有用的；另外一个，就是可以在视图编辑里点击相应的位置，切换到代码视图里就能快速定位到代码所在的地方，这个也是非常的好用的；还有一个就是智能的提示功能，会提示你写的标签不正确的时候会给出提示，或者代码变色，让你很容易的定位到相应出错的代码部分gmf有一个就是强大的搜索功能，可以对单文件、多文件、站点文件、目录文件夹进行查找来替换，这点是我使用过的工具中拥有最强悍的搜索功能的（我在幻想，要是EditPlus也有这四个功能该多强大啊，哈哈）。其他还有数不清的功能大家可以自行继续深入发掘，哈哈。总的来说，Dreamveaver算是一个比较强大和完善的工具了。无论是新手老手，相应都不会陌生的。
　　当然，作为一个如此优秀的工具，该怎么使用也是非常值得一提的。老手当然基本都是用代码模式的，视图模式一般只是用来进来点击定位到代码位置的，这个不用提了；新手更多时候使用的是视图或设计模式，因为通过直接点击和选择就能实现一些页面的效果，但这样是非常不利于学习语言的，只知表面不知其中，个人建议一定要切换到代码模式里一个代码一个代码的敲（当然有代码提示已经省掉了我们很多的敲打了），这样学习起来才会有效果，绝对不要相信那个什么所谓得的教程或书本来点击这里那里的来“插入”来完成网页，这完全是误人子弟的，会让你走很多弯路，到最后来发现，自己会的只是使用这个软件而已，而语言还是永远没有学会。这是本人亲身的体验，希望各位新同学引以为戒。

NO6、FireWork

　　其实这个和PhotoShop的功能上都是非常相似的，FireWork本来是出自Macromedia公司的，后来给ADOBE公司收购了，并且和PhotoShop一同出面在Master Collection（开发套装）中，会让人产生一些疑惑，为什么都是同样的图片处理软件，不整合到一个软件中呢？其实这两个软件虽然相似，但功能和侧重是有所不同的，ADOBE公司不整合在一起肯定是有他的道理的，具体可以自得去深入了解一下，本文重点不在此。
　　此工具本人最常用的也就是切图用来输出图片是最方便的，可以很方便的对图片进行各种规格的输出，是用得最顺手的一个切图工具。其他的功能基本很少用甚至没用过，这里就不再多说了。

NO8、PhotoShop

　　PhotoShop这个大名鼎鼎的工具真的是让人如雷贯耳，现在基本上涉及设计的各个行业都在使用，其中的强大自然是不言而喻。PhotoShop可以让张飞变美女，可以让各种各样生活中的不完美在PhotoShop中变得完美，让各种幻想都可以变成现实，其鬼斧神工之效确实是无人能敌。
　　当然作为前端开发的我也不可能会错过这个软件，但由于本人不擅长设计，所以用得马马虎虎，基本上是只用于一些图片处理和优化输出等等。具体可以查阅一下我写过的文章《前端工程师新手必读》图片优化部分，里面的一些观点也许有错误，现在也有在求真当中，各位有需要的自行深入研究。
　　FireWork和PhotoShop现在虽然同出一家，但里面的一些区别至今我仍无法搞清楚的。如我的另外一篇文章里说到的一个观点：PNG24是否支持透明度？FireWork输出的PNG24和PhotoShop输出的PNG24都不透明，而PhotoShop中输出的PNG24+透明为什么在FireWork和别的看图软件显示的都是PNG32。这个问题困扰了我很久，问了一些业界的包括做设计的也搞不清楚这个问题，所以打算向ADOBE公司里咨询一下。具体本人也在整理这方面的资料，有结果后会再跟大家公布。
　　另外，ADOBE公司的这些软件都很强大很优秀，但是也有有一个很大的弱点，就是软件非常的庞大，一个软件安装包至少也有好几百M，大的上好几个G，我的ADOBE Master Collection CS5（开发套装）中，光镜像文件两个就有13G了，所以安装也要花上半天的时间，机器配置不好的话跑起来更卡，特别是切图写代码的时候，开这两三个软件就已经开始跑得吃力了，无奈公司里的电脑只有2G的内存，集显，有时候跑得那个卡啊。

转载于:https://www.cnblogs.com/tham/p/6827441.html