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

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

一、IE网页调试插件

IE Developer Toolsbar

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

IE Developer Toolbar 的特性如下:

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

Microsoft Script Debugger

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数据查看.等等

上一篇:2008年最佳Web设计/前端开发技巧、脚本及资源总结


下一篇:linux awk命令详解--转载