Web开发辅助工具介绍

 

1.       FireBug ： Firebug 是Firefox下的一款开发类插件，现属于 Firefox的五星级强力推荐插件之一。它集HTML查看和编辑、Javascript控制台、网络状况监视器于一体，是开发JavaScript、CSS、HTML和Ajax的得力助手。Firebug如同一把精巧的瑞士军刀，从各个不同的角度剖析Web页面内部的细节层面，给Web开发者带来很大的便利。这是一款让人爱不释手的插件，如果你以前没有接触过它，也许在阅读本文之后，会有一试的欲望。使用方法请查看： http://blog.csdn.net/SeaverDing/archive/2008/07/08/2624603.aspx。

2.       Web Developer：建立符合WEB标准的网站，应用XHTML与CSS来构建网站，我们往往处在开发与调试两个重要的环节，对于DIV+CSS的XHTML开发环境，页面的调试更加的重要。我们完全手写代码，需要不断的预览所形成的页面效果。而DIV+CSS这一形式是刚刚兴起的一种新技术，目前还不是非常的普及，我们需要不断的学习，浏览他人的成功作品从中汲取制作经验显得非常重要，也是我们学习的一种捷径。Web Developer作为Firefox的插件存在，主要功能表现在几个重要的方面：

对页面中的文本、图像、媒体文件进行控制，对网页所应用的CSS文件的id与class辅助查看，表格辅助查看，可以实现修改CSS文件实时显示出得到的页面效果等等；

Web Developer 插件能够帮助我们对CSS网站进行分析，我们使用 Firefox 对网页进行浏览，运用Web Developer插件不仅仅只是能看到对方的源代码，还能方便的分析出页面的布局结构，CSS书写方式，鼠标所在位置的id或class是什么等等，使我们能迅速的理解、学习别人的成功经验，进而更加方便快捷的掌握CSS布局技术；

用鼠标右键单击网页，选择菜单Web Developer-->CSS-->Edit Css，打开可编辑CSS的侧栏。在里面输入CSS代码，你的代码将立即作用于网页。所以，这也是另一种意义上的可视化网页制作方式。在调试定位的时候， 你可以为对象加上不同颜色的边框，这样可以使用对象间的位置关系更加显然；

使用该插件可以查看Cache中的信息。

注：为了防止代码丢失，经常把你的CSS代码保存在你所创建的CSS文件中。功能上可能跟Firebug有一些重叠，但是也很强大。

3.       Javascript Debugger ：FireFox下的javascript调试工具,比FireBug有更强大的调试功能。

4.       YSlow ：why slow，页面性能优化查看器。基于FireBug。

5.       CSSViewer：火狐插件，看具体DOM的CSS，Web开发者可以用。

6.       JSView：火狐插件，可以查看当前页面的外埠js和css，这对开发者来说很重要。

7.       IE WebDeveloper ：一款用于IE浏览器的插件，允许直接地在浏览器窗口中浏览、传输和更新HTML DOM。该软件可以实时分析网页并且显示为一种允许你察看表格风格、Java脚本，表格以及其它网页元素的树形风格。该软件还可以在浏览器中交互式地突出显示被选择的网页元素，因此你可以在实际网页中定位其代码。相当于IE下的FireBug.HTML及CSS调试工具。

8.       IETester ：虽然以前有过IE6、IE7、IE8共存的解决方案，但是有了IETester这个软件以后那些都已经没有意义了（那些办法副作用比较大，而且实现起来有些难度）。使用IETester能够较好的解决，测试网页兼容性的多IE版本的需求。暂时已经支持IE5.5——IE8beta1，我想这已经足够了。还在苦苦找寻IE6和IE7共存或者IE7和IE8共存的朋友，可以试试这个软件。当然这个软件也不是万能的，在最后，官方非常厚道的给出了暂时存在的重要bug列表。推荐理由：同时拥有IE 5.5、IE6、IE7、IE8；常用的IE6绿色版不能在Vista上使用。

9.       Companion.JS ：IE下的javascript调试工具。

10.   Opera Developer Tools ：Opera下的DOM,CSS查看工具,类似FireBug。

11.   Webkit ：Safari下的开发调试工具。

12.   JavaScript 压缩工具 ：这程序是由Mike Hall写的，JavaScript的压缩不是为了保护代码而压缩，而是压缩后的js代码文件可以小一倍甚至多倍，从而使这个js代码快速的下载到客户端，特别js文件较大时速度效果非常明显。使用方法：使用下面的表单,你可以浓缩JavaScript代码.只用将任何脚本代码粘贴到输入的文本框,压下 '压缩' 按钮,那浓缩的版本就出现在 '输出' 里. 然后你可以使用 '全选' 按钮,快速选中'输出'里的代码,剪切粘贴到一个新的源码文件。

13.   Fiddler : 一个很强大的http流查看工具。

14.   Httpwatch : 数据分析工具,头消息接受/发送的查看,POST数据查看。

15.   Aptana : web 开发利器。Aptana是创建动态网络应用程序的JavaScript集成开发环境，目前这种专注于JavaScript开发的集成开发环境很是罕见，尽管微软在VS 2008中为了更方便于Ajax的应用，已经把JavaScript提到一个很重要的位置，也可编译和调试JavaScript，但是我相信VS2008的价格足以让一大部分人望而却步。Aptana集成开发环境是完全免费的，它除了可以开发JavaScript，也可以对其进行调试。下面是我总结的一些Aptana的亮点：

l  代码助手 Aptana的代码助手，就是我们常说的代码的“智能感知”，可以帮助你轻松而快速地完成JavaScript，HTML...还有CSS的编码过程，当然也包括自定义的函数过程；

l  代码大纲 有了大纲以后，编写和查看JavaScript，HTML，CSS代码就像查看有了文档结构图的Word文档一样方便快捷；

l  FTP/SFTP 上传、下载以及同步等支持；

l  JavaScript 调试程序debugger让你的代码更快更高效无误地编写出来；

l  支持代码错误和警告提示；

l  Aptana 界面自定义及Plug-in扩展；

l  跨平台支持；

l  免费开源的用户授权EPL(Eclipse Public Licese)。

16.   ColorPic ：抓色工具。特点：有方案的概念，可以建立多组方案；强大的色盘功能，多种方式可以选择；吸色时，局部放大（放大比率可以自己调整），方便抓取细微部分的颜色；使用Ctrl+G快捷键取色。

17.   XHTML 、CSS、标准代码检测 ：做网页的朋友应该都去过 http://validator.w3.org/ 和 http://jigsaw.w3.org/css-validator/。现在有人把他们集成到了一起，搞了一个网站叫 “ XHTML-CSS Validator”，点击旁边的 “Advanced” ，还可以选择校验文档类型、CSS版本等等，有兴趣可以试试。

18.   CSSTidy ：CSS整形工具。我们在写CSS样式的时候通常会根据自己的一些习惯来写，比如有些时候不会使用样式缩写，样式格式随意，大小写不分（另存下来的样式是大写的）等等; 网上有一种CSS整形工具叫CSSTidy 1.2大家可以使用一下，可以优化你写的样式，特备是节省字节方面效果显著。

19.   搜索引擎 ——百搜吧：输入一次关键字能同时搜索百度、谷歌、雅虎三大搜索引擎及国内知名网站和专业网站的资源，具备根据您自己的需要自定义搜索引擎偏好，随时切换网页、电影、新闻、娱乐、图像、音乐、视频、论坛、博客、词典等专业搜索，保存您的搜索历史记录，中英文界面切换等人性化功能。

20.   Action Script Viewer : flash 破解。可以分析 Flash 文件(.swf)文件的内部结构，并将其中的动作脚本(action scripts)分解出来，软件支持 Flash 3 4 5 及最新的 MX 制作的 swf 文件，分解出的动作脚本可以保存为文本格式，在编辑过程中可以随时对 Flash 文件进行预览。4.0版支持Macromedia Flash 4, 5 , MX , MX 2004和flash 8的 SWF 文件。

21.   Beyond Compare ：Beyond Compare 是一款不可多得的专业级的文件夹和文件对比工具。使用他可以很方便的对比出两个文件夹或者文件的不同之处。并把相差的每一个字节用颜色加以表示，查看方便。并且支持多种规则对比。对软件汉化者来说，这绝对是一款不可多得的工具。