Designsor

前端开发这个职业是最近几年才兴起的，很早之前我们统一叫美工，有高级的，有低级的，现在都改叫前端开发，或者页面仔，再有了JavaScript的辅助之后，页面仔的技术含量又大幅度提高，随着胖客户端应用的bs系统越来越多，客户端编程哪怕只是CSS HTML JS都越来越急迫的需要一个开发环境，预期善其事，必先利其器。

开发环境说白了，我个人认为包含以下几个方面：良好的项目管理方法，代码管理方法，发布与测试的方法，调试与debug的工具，代码的测试和发布工具，一些便利的第三方开发工具，如果有需要还要安装项目的服务器环境。

下面就一一介绍一下我个人理解的上面几点，并且分享一下我的这些环境是如何搭建的，需要些什么东西。（由于目前没有一个统一的标准，所以很可能每个开发者都会有一套属于自己的开发环境和工具，根据个人情况吧。）

1.1，项目的管理，所谓项目管理，哪怕你就是只做HTML页面，也需要创建一个项目，根据我平时的经验基本会到一家公司就创建一个fq或者xiaojue的项目，然后根据公司的不同项目再向下级分清楚自己的文件夹结构，最开始入门的时候用的是Dreamweaver里的站点创建，因为F11可以调取和查看文件夹树，现在是用aptana来创建一个project来管理文件夹树。方便自己使用也方便日后查找，条理清晰。

1.2，如果你的开发环境需要具备服务器能力，最好把上面2者和你的服务器环境进行统一协调，就我个人例子来说，公司开发使用java，我个人在本地又假设了个apache的php服务器环境，然后我捆绑的服务器开发环境就是php的，因为我熟嘛，至于java的servers环境就让同事java程序员帮助建立一个，以便日后的时候集成了HTML JS CSS的项目依然需要本地调试时使用。双管齐下……自己的PHP环境是为了方便自己做些JavaScript方面的东西，自己模拟些数据，并拥有一个本地的服务器端口而已。

2，代码管理，这个是从构建可扩展站点那本书上看到的，就是那本热带鱼书。之前我们对代码编写都是ctrl+z,ctrl+y来进行管理的……但是页面保存之后关闭了，再想恢复以前的某个历史版本，Dreamweaver是办不到了，需要使用别的，1，自己弄个vss或者弄个google的svn来进行代码版本的管理，但是需要你得能连上网或者自己有能创建vss的能力。我的解决办法是用eclipse或者aptana里项目自带的history来实现的，至少可以保障一个月内的代码版本自己可以查询追溯，对代码的控制能力大大加强，这也是文本编辑器和ide工具的巨大差别吧。

3，发布与测试的解决,新版本的Dreamweaver cs5里有了选择预览浏览器型号的功能，自己安装各个不同系列的浏览器当然是必须的了，ie tester，opera，firefox，chrome，safari当然都是必备的了。至于代码的压缩发布，cssmin和jsmin的在线工具有很多，在最下面会一一列出。

4，至于调试工具，目前我的环境还是基于ie和firefox下的调试，可能某些同事还需要调试其他浏览器，但是目前我的项目中没太需要到。至于ie和firefox的调试，推荐companion.js当做ie下的debug工具，firebug肯定是ff下的调试工具了，再安装一个web developer在FF下就很强大了。然后再在ie和ff的快捷方式里加入jash的mark按钮。调试和测试的工具环境差不多搞定了。

5，代码的测试，jsunit和qunit自己下载一套安装在自己的项目环境下即可，但是这个仅仅是针对js的，css方面和html方面的用ff的web developer插件可以直接测试是否符合w3c标准，不需要全部符合标准，以网页不变形为保障，以没有错误代码为基准，切忌不要当学究。最后还有就是yslow和page speed对于性能方面的测试工具也必须安装，控制台下对http请求的监控辅助ajax的编码。

6，便利的第三方开发工具，Photoshop，Fireworks，Illustrator，Flash肯定就都得有了。算图形辅助，然后就是word，excel，Adobe Reader，notepad算文档和办公辅助，一套包括完整的js html css 各个方面的CHM手册，算代码储备辅助，ff下的插件工具还有FSCapture这个工具算是屏幕视图的辅助了，包含了吸色截屏尺子放大镜等功能。最后推荐的是google桌面和有道词典，前者是快速搜索相关知识，后者是对于我这样英语不好的人，快速解决了给变量起名字这种恶心事的尴尬……

差不多说到这里应该都明白了，其实前端开发的环境大部分都是基于一些小功能，小浏览器插件和一些很奇怪的小工具外加一些必备的ide工具攒起来的那么个东西。但是麻雀虽小五脏俱全吧，方便开发工作和提高开发效率才是王道。今天整理一下，留作日后查询。相关工具的下载地址本想一起发的，但是想想，还是看客们自己搜索，把握的才会更牢固吧。我也就不浪费多余的时间了，而且大部分都是些常用工具而已。

如果有什么遗漏疑问，欢迎喷我……或者留言给我。