前端调试利器DebugBar

愚人码头 撰写  

前端调试工具有很多,比如FireFox firebug, FireFox Web Developer, DOM Inspector,遨游的PageView,IE WebDeveloper V2,还有IE8自带的开发工具 等等,这里我再推荐一个DebugBar;

大家肯定都知道ieTester(点击查看ieTester相关信息),大家都用ieTester来测试各个IE版本的页面兼容性,其实新版的ieTester(点击下载目前最新版的ieTester v0.3.2 )还有一个很强大的页面调试插件:DebugBar。下面来介绍一下功能:

1.DOM:

DebugBar可以分析出所有的DOM,包括图片,样式,脚本等等,

2009-03-27_130604

我们可以通过拖动目标工具(2009-03-27_140246)到页面中寻找需要的目标元素,如图

2009-03-27_140418

然后就可以在左下角的窗口中看到,源码,样式等代码,还有该元素的盒子模型;唯一一点不足是不能像firebug一样直接修改css,调整页面。

2009-03-27_140435

 

2.http请求

DebugBar可以分析出所有http请求,还能抓出图片等一些404错误文件;

2009-03-27_142026

 转载请注明出处:http://www.css88.com

3.查看JS脚本

DebugBar还能将js中的函数都列出来,

2009-03-27_142138

  转载请注明出处:http://www.css88.com

5.html验证:

DebugBar还能验证html,

2009-03-27_142248

  转载请注明出处:http://www.css88.com

6.IE下的DebugBar插件

DebugBar本来就是为ie开发的插件,在IE下DebugBar多了个工具条,安装后在ie7或者ie8下首先要打开这个工具条,“查看”-“工具栏”-“DebugBar”;

2009-03-27_144317

在IE下的界面就是多了个工具条,还有截图和取色小功能;

2009-03-27_145951

找了半天没找到下载地址,只好问朋友要了一个,下载DebugBa v5.2.2

更多相关链接:


相关日志:

刚刚被浏览过的文章:


2 条评论

  1. 老虎机上分器
    发表了 2009年04月5日 在 10:50 上午 | 永久链接

    这个老是出错吧。我用这个软件用得很不爽。

  2. 发表了 2009年04月11日 在 1:21 下午 | 永久链接

    不错,在ietest的工具栏看到有下,但是页面老是打不开,不知道怎么回事,今天无事到码头老大你这转优,意外收获,呵呵

2 个引用通告

  1. [...] 前端调试工具有很多,比如FireFox firebug, FireFox Web Developer, DOM Inspector,遨游的PageView,IE WebDeveloper V2,还有IE8自带的开发工具 等等,这里我再推荐一个DebugBar; 大家肯定都知道ieTester(点击查看ieTester相关信息),大家都用ieTester来测试各个IE版本的页面兼容性,其实新版的ieTester(点击下载目前最新版的ieTester v0.3.2 )还有一个很强大的页面调试插件:DebugBar。 介绍下载请参见:http://www.css88.com/archives/785 [...]

  2. [...] 详细介绍和演示请看码头的博客:http://www.css88.com/archives/785 [...]

发表评论

Your email is never shared. 标记为 * 的为必填项目

*
*

评论时,昵称或个人网站填的是商业网站的,一概标记为垃圾评论不予显示,并设置相关网站为过滤关键字,提交到google、百度垃圾网站数据库