Firebug插件：Illuminations for Developers

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对象及其子类）。这些对象都会根据你的代码以层次结构显示：