11.5 在IE中使用Firebug

 

11.5  在IE中使用Firebug

Firebug是Firefox的一个扩展，但是习惯在IE中调试页面怎么办？如果在脚本中使用了Firebug的调试函数，势必会在IE里会产生错误，怎么办？不用担心，Firebug提供了Firebug Lite，通过它就可以在IE中正常使用Firebug的调试函数。

要使用Firebug Lite，需要到以下地址下载firebug-lite.js和pi.js两个文件：

http://getfirebug.com/releases/lite/1.2/

然后将两个文件加入到页面中，见源码11-5-1。

源码11-5-1

<script type="text/javascript" src="/路径/pi.js">

</script>

<script type="text/javascript" src="/路径/firebug-lite.js">

</script>

如果只是希望在IE中不出现Firebug调试函数的错误信息，那么可以在页面中加入以下代码。

JavaScript代码清单11-5-1

if (!window.console || !console.firebug){

var names = ["log", "debug", "info", "warn", 

"error", "assert", "dir", "dirxml",

"group", "groupEnd", "time", "timeEnd", "count", "trace", "profile", 

"profileEnd"];

    window.console = {};

for (var i = 0; i < names.length; ++i)

window.console[names[i]] = function() {}

}

11.5.1  DebugBar和Companion.js的基本操作详解

11.5.2  DebugBar和Companion.js的安装

11.5.3  DebugBar和Companion.js的基本操作

打开IE浏览器，在"查看"菜单中选择"浏览器栏"，如图11.27所示，在子菜单中选择DebugBar和Companion.js。然后单击DebugBar工具条上的DebugBar按钮打开DebugBar调试跟踪窗口，最终显示如图11.28所示。

 图11.27  浏览器栏 （点击查看大图）图11.28  DebugBar

在DOM选项卡里，可以通过Document树查看页面实际源代码。而通过Links、Image、Forms、Scripts和Styles Sheets可快速访问页面中的链接、图片、表单、脚本和样式表。

当在DOM树中选中了一个HTML标记时，可通过下面5个按钮查看该标记的Source、Style、Comp.Style、Layout和Attrs：

Source：当前标记的源代码。

Style：当前标记的相关样式。

Comp.Style：当前标记的实际应用样式。

Layout：当前标记的盒子模型，这里不能像Firebug那样进行修改。

Attrs：当前标记的属性列表。在这里可以修改属性值，然后直接在页面看到效果。比较遗憾的是不能增加属性，只能在已有属性上进行修改。

通过拖动图中的 的图标到页面上可以在DOM树中返回相应的HTML标记，类似于在Firebug中使用"查看"按钮。

1. 查看页面流量信息

在HTPP(S)选项卡里可以检测cookies、GET或POST参数、服务器端返回信息和Ajax请求，与Firebug中的"Net"标签功能相同。

通过页面树可以查看当前页面访问与下载了哪些资源。选择其中的资源节点，则可通过下面4个按钮查看该节点的Headers、Content、Timing和Info & Cache。

Headers：当前节点的头信息。

Content：当前节点的返回内容，这个对调试Ajax是非常有用的。

Timing：当前节点的响应时间。

Info & Cache：当前节点的一些信息与是否使用了Cache。

2. 脚本调试

在Scripts选项卡中，如图11.29所示，顶部窗口以树的形式列举了页面中的函数。在中间窗口，可以查看脚本源码。底部窗口类似于Firebug的控制台的命令行，结合Companion.js窗口，可以对脚本进行调试。

 图11.29  脚本调试

在HTMLCheck选项卡中，可以对HTML代码进行校验和优化。因不属于本书内容范围，所以不详细说明了，有兴趣的读者可以找些资料研究一下。

在Info选项卡中，可以查看当前页面的一些属性信息，与在页面右键菜单选择属性看到的信息是相同的。

在Source选项卡中可以查看页面中的脚本文件。

而Console选项卡类似于Firebug中的控制台，主要输出一些调试信息。虽然也有命令行，但功能不强，不能使用Firebug的命令。

在页面脚本中，也可以加入Firebug中的一些调试函数进行调试，如"console.log()"，但以下调试函数目前不支持：console.dir、console.trace、console.group、console.groupEnd、console.profile、console.profileEnd。

总体来说，Companion.js的脚本调试性能不是很强，所以还是建议以Firebug调试为主，再在IE中调试显示效果。