Web开发辅助工具介绍

janzhu

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

该文章转自[www.jjca.jx.cn] 原文链接：http://www.jjca.jx.cn/ca/tuxingtuxiang/2009/1123/143.html

羲之

哦         知道了！

janzhu

火狐的firbug蛮好用的！