JavaScript与的调试六：调试技巧_H5之家 - 中国HTML5教程资源分享第一站

调试技巧

有了宝剑，也要会舞，不然也无用途。有了Firebug这些宝剑，如何才能用好呢？本节将通过例子介绍一些Firebug的调试技巧。

11.6.1 在Firebug中直接调试脚本

11.6.2 测试代码运行速度

11.6.3 查看对象属性

在没有使用Firebug之前，要查看对象的属性，通常的会使用以下方式：

for(var item in object){
alert(item)
}

当对象属性多时，要从中找到需要的属性可不是容易的事，起码单击鼠标或者按键盘上的Enter键也会让你感到郁闷。

使用Firebug的console.dir函数可以很方便地在控制台列出对象的属性，十分便于查看。

下面通过一个例子来来说明其使用方法，例子的代码如下。

HTML代码清单11-6-4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
""><html debug='true'>
<head>
<title>查看对象属性</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link type="text/css"
href="../lib/ext/resources/css/ext-all.css" />
<script type="text/javascript" src="../lib/ext/ext-base.js">
</script>
<script type="text/javascript" src="../lib/ext/ext-all.js">
</script>
<script type="text/javascript" src="../
lib/ext/locale/ext-lang-zh_CN.js">
</script>
<style>
</style>
</head> <body>
<h1>查看对象属性例子</h1>
<br/> <div>
<p>
<div>
</div>
<br>
</p>
<br/>
</div>
<script>
var app = {};

Ext.onReady(function(){

var datas = [[1, '小学'], [2, '初中'], [3, '高中'], [4, '中专'],
[5, '大专'], [6, '大学']];

var store = new Ext.data.SimpleStore({
fields: ["retrunValue", "displayText"],
data: datas
})

var panel = new Ext.Panel({
title: "查看对象属性例子",
applyTo: "form",
autoHeight: true,
width: 750,
frame: true,
items: [{
xtype: 'button',
text: '查看Panel对象的属性',
scope: this,
handler: function(){
console.dir(panel);
}
}, {
xtype: 'button',
text: '查看Store对象的属性',
scope: this,
handler: function(){
console.dir(store);
}
}]
});

})
</script>
</body></html>

图11.31是例子的运行结果。从图中可以看到，页面定义了一个Panel，有两个按钮，分别用来查看Panel的属性以及页面中定义的Store的属性。

（点击查看大图）图11.31 查看对象属性例子的运行结果

单击Firebug窗口中的清除按钮清除控制台的显示，然后单击页面中的"查看Panel对象的属性"按钮，在控制台会看到如图11.32所示的结果。

图11.32 单击"查看Panel对象的属性"按钮后控制台的输出结果

清除控制台的信息，再单击"查看Store对象的属性"按钮，会看到图11.33所示的结果。

图11.33 单击"查看Store对象的属性"按钮后控制台的输出结果

再看看按钮的单击事件，非常简单，将对象作为console.dir函数的参数传入就行了。

通过控制台的属性列表，可以很容易了解到对象的属性，尤其是在调试Ext程序时，对了解API文档中没有提及的属性非常有用，例如对Store数据的访问，从图11.33中可以看到一个data属性，展开后会看到有个items属性，再展开就会看到有6个数据(序号从0到5)，再展开序号为0的数据，然后又有一个data属性，展开这个data属性就会看到数据，通过以上的步骤就可以了解到，要访问store的数据可通过以下代码来访问：

var record = stotre.data.items[序号]

灵活地运用console.dir函数对学习Ext是非常有帮助的，读者要好好地掌握。