Firebug插件：Illuminations for Developers

ゝ一世哀愁。 2022-05-15 05:12 219阅读 0赞

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属性和它 的值。这可以让你在调试时更清晰的了解这个对象。

![20110308-illumination-console.png][]

**方法显示**

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

![20110308-illumination-compare1.png][]

**元素突出显示**

在Illuminations面板，当你将鼠标悬停在Ext.DataView上时，在页面中你可以看到组件已突出显示，就如在HTMl面板在HTML元 素上悬停一样。在这种情况下，由于编码器没有给一个描述性的模块或名称，所以悬停的突出显示只是障眼法，它实际上显示的是页面上与该对象相关的所有内容。 它只对Ext组件和Ext元素起作用。它也支持Ext复合元素，它会突出显示页面上所有的复合节点。

**右键菜单**

当你在Firefox中的页面元素单击右键菜单时，Firebug会增加一个“Inspect Element”的菜单，可以让你在Firebug的HTML面板中显示该元素。Illuminations也能做同样的事情，不过它只能定位一些UI组 件和Ext元素。当你选择组件时，它会切换到Illuminations面板，并选择它。

![20110308-illumination-contexualmenu.png][]

**Illuminations面板**

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

![20110308-illumination-firebug.png][]

一旦看到上面的所有元素，你会觉得调试是那么的有用和有趣。尝试一下这个例子，定位到DataView并观察它。你可以单击store，然后在旁边的面板看到它包括的记录。

在边面板上，你可以查看属性（按对象定义属性顺序排序）和方法，还可以看到相关的事件。还可以在Docs面板查看组件的文档。此外，还可以看到相关的DOM信息，如HTML代码、CSS等等。

此外，当你单击面板中的一个对象时，你可以在console面板中使用“$0”引用改对象，该功能相当棒，尤其是在该对象都是在Javascript闭包中引用的时候。

**Inspect模式**

通过Illuminations面板的Inspect按钮，你可以快速的定位Ext对象。

![20110308-illumination-widget.png][]

**Ext JS 4支持**

因为Extjs 4还没发布，所以该工作一直在跟进。

**下载Illuminations for Developers**

官方网站：[http://www.illuminations-for-developers.com/][http_www.illuminations-for-developers.com]

目前只有免费试用版。

视频预览：[http://www.illuminations-for-developers.com/about/][http_www.illuminations-for-developers.com_about]

[20110308-illumination-console.png]: http://www.sencha.com/files/misc/20110308-illumination-console.png
[20110308-illumination-compare1.png]: http://www.sencha.com/files/misc/20110308-illumination-compare1.png
[20110308-illumination-contexualmenu.png]: http://www.sencha.com/files/misc/20110308-illumination-contexualmenu.png
[20110308-illumination-firebug.png]: http://www.sencha.com/files/misc/20110308-illumination-firebug.png
[20110308-illumination-widget.png]: http://www.sencha.com/files/misc/20110308-illumination-widget.png
[http_www.illuminations-for-developers.com]: http://www.illuminations-for-developers.com/
[http_www.illuminations-for-developers.com_about]: http://www.illuminations-for-developers.com/about/