Firebug插件(调试ExtJs专用)：Illuminations for Developers

Posted 周日, 03/13/2011 - 14:45 by admin

Illuminations for Developers是一个辅助开发的小工具，它可以让你在使用Ext JS和Firebug开发Web应用时更直观。它以下在三个方面协助开发人员：在Firebug中增加一个针对Extjs的面板，在面板中可以查看Extjs对象，在页面中通过右键菜单定位和查看ExtJS对象。
我创建Illuminations是因为我在开发大型Javascript应用时，我需要知道那些数据对象有问题。在Firebug中，只能简单处理代码和数据，不能显示和处理设计模式。因此，我创建了Illuminations来弥补这方面的不足，它可以在调试、检查和浏览体验时达到我需要的抽象级别。
主要特性
Illuminations让我们易于了解ExtJS框架，使对象更直观更易于调试。我们现在来了解一下它的几个主要特性。
对象显示
Illuminations会非常智能的显示框架对象。它会显示对象名称，而不是显示“Object”。如下图，在console面板或其它Firebug面板，它会显示“Ext.DataView”，而不是显示“Object”。此外，一些被随机增加的属性也会被显示，如下图的id属性和它的值。这可以让你在调试时更清晰的了解这个对象。

方法显示
在Illuminations面板，你可以看到对象的方法。这会让你在使用断点和堆栈跟踪调试时更方便。如下图，你会看到initComponent方法不同：

元素突出显示
在Illuminations面板，当你将鼠标悬停在Ext.DataView上时，在页面中你可以看到组件已突出显示，就如在HTMl面板在HTML元素上悬停一样。在这种情况下，由于编码器没有给一个描述性的模块或名称，所以悬停的突出显示只是障眼法，它实际上显示的是页面上与该对象相关的所有内容。它只对Ext组件和Ext元素起作用。它也支持Ext复合元素，它会突出显示页面上所有的复合节点。
右键菜单
当你在Firefox中的页面元素单击右键菜单时，Firebug会增加一个“Inspect Element”的菜单，可以让你在Firebug的HTML面板中显示该元素。Illuminations也能做同样的事情，不过它只能定位一些UI组件和Ext元素。当你选择组件时，它会切换到Illuminations面板，并选择它。

Illuminations面板
一个名称为“Illuminations”的面板会增加到Firebug中。当你使用右键菜单时，你会看到这个面板。在Illuminations面板可以查看Ext对象：组件（通常是继承Ext.Componext的组件，但并不一定）、数据（Store、Record或模型、字段）和元素（Ext.Element对象及其子类）。这些对象都会根据你的代码以层次结构显示：

一旦看到上面的所有元素，你会觉得调试是那么的有用和有趣。尝试一下这个例子，定位到DataView并观察它。你可以单击store，然后在旁边的面板看到它包括的记录。
在边面板上，你可以查看属性（按对象定义属性顺序排序）和方法，还可以看到相关的事件。还可以在Docs面板查看组件的文档。此外，还可以看到相关的DOM信息，如HTML代码、CSS等等。
此外，当你单击面板中的一个对象时，你可以在console面板中使用“$0”引用改对象，该功能相当棒，尤其是在该对象都是在Javascript闭包中引用的时候。
Inspect模式
通过Illuminations面板的Inspect按钮，你可以快速的定位Ext对象。

Ext JS 4支持
因为Extjs 4还没发布，所以该工作一直在跟进。
下载Illuminations for Developers
官方网站：http://www.illuminations-for-developers.com/
目前只有免费试用版。
视频预览：http://www.illuminations-for-developers.com/about/
英文原文：Firebug Plugin: Illuminations for Developers