WEB常用前端开发调试工具介绍

只要是设计开发，就需要进行调试，尽管相对来说，前端的调试要简单一些，但使用一些调试工具或插件还是能提高你的工作效率。下面是一些主要用于IE浏览器环境和Firefox浏览器环境等的调试工具简介。

一、IE网页调试插件

IE下的FireBug。HTML及CSS调试工具。.该产品让开发人员能够深入探索和理解Web页面,帮助开发者更好地创建Web应用.安装后可以在IE中快速分析网页的软件.该工具条可集成在IE窗口,或以浮动窗口形式存在.

IE Developer Toolbar 的特性如下:

浏览和修改Web页的文档对象模型(DOM).
通过多种技术方式定位、选定Web页上的特定元素.
禁止或激活IE设置.
查看HTML对象的类名、ID,以及类似链接路径、tab顺序、快捷键等细节

Microsoft(R) Script Debugger 是扩展所有 Microsoft(R) ActiveX(R) Scripting 主机应用程序的调试环境—例如 Microsoft(R) Internet Explorer (IE) 或 Microsoft(R) Internet Information Server (IIS)。

与 IE 和 IIS 联合使用时，Web 开发人员可在客户机和服务器上浏览、编辑和调试带脚本的 HTML 页（.htm、.html 和 .asp 文件）。Script Debugger 使开发人员更加有效地开发脚本应用程序。

Companion.JS

IE下的javascript调试工具。请注意，这可不是一个js文件，而是一个名字，它是作为ie的插件来安装使用的，而且需要结合 Microsoft Script Debugger使用，通过安装这个工具，但页面出现错误时会在左上角弹出一个小错误提示，点击会在IE下面显示出一个错误控制台，就如FF下的 firebug控制台一样。错误信息提示很详细。via

SuperPreview

SuperPreview是微软发布的网页开发调试工具，自带有很多元素查看工具，如箭头、移动、辅助线、对比……，在查看网页的IE6/IE7/IE8不同表现的同时，可以对比效果。

IETester

同时拥有IE6、IE7、IE8（Vista兼容）。查看之前的详细介绍 – IETester: IE兼容性测试软件.

二、firefox网页调试插件

FireBug

Firebug 和 firefox 整合在一起，使你浏览网页时手边有了一套强大的网页开发工具。你可以编辑、调试和监控任何网页上的 CSS、HTML 和 Javascript。要查阅文档、截图和论坛请访问Firebug的网站：http://www.getfirebug.com.

Web Developer

Web Developer作为FF的插件存在，主要功能表现在几个重要的方面：

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

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

YSlow

YSlow是yahoo美国开发的一个页面评分插件，基于Firebug, 非常的棒，从中我们可以看出我们页面上的很多不足，并且可以知道我们改怎么却改进和优化。YSlow从Firebug收集当前网页和该网页的访问信息后进行分析，如有必要则给出如何提高页面加载速度的建议，比如减少DNS查询，使用外部并压缩Javascript等。via

Javascript Debugger

FireFox下的javascript调试工具,比FireBug有更强大的调试功能.

三、其它

Opera Developer Tools

Opera下的DOM,CSS查看工具,类似FireBug.

webkit

Safari下的开发调试工具

Fiddler

一个很强大的http流查看工具

Httpwatch

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