Firebug插件:Illuminations for Developers

JavaScript 专栏收录该内容
101 篇文章 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属性和它的值。这可以让你在调试时更清晰的了解这个对象。

      方法显示

      在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/

    原文地址:http://www.sencha.com/blog/firebug-plugin-illuminations-for-developers/

   BTW:这东西是好东西,可惜一来就要收费,相当的郁闷。个人用户每年25美金,说贵不贵,不过……

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2020 CSDN 皮肤主题: Age of Ai 设计师:meimeiellie 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值