Firebugのイルミネーションプラグイン

Firefoxプラグイン間で掘り出された興味深い発見を共有したいと思います。 このプラグインは、Firebug for DevelopersのIlluminationsと呼ばれ、主にExtJSとSencha Touchで重いJSライブラリを操作するためのFirebugに追加されます。 さらに、ベータ版では、プラグインはDojo Toolkit、SproutCore、qooxdoo、YUI、Google Closure Library、jQuery UIをサポートしていると述べています。



私は主に仕事のためにExtJSを使用する必要があるため、まずこのプラグインがこのライブラリに基づいた開発にどのように役立つかが一番興味深かったです。

このアドオンをインストールするとき、どのような機能がありますか?



1.コードデバッグ中およびFirebugコンソールでのオブジェクトクラスの表示。 たとえば、コンソールからExt.getCmp(「gridUsers」)を呼び出すと、以前のように「Object」ではなく「Ext.grid.GridPanel」が表示されます。







2.ページ上のコンポーネント、およびExtコンポーネントをすばやく移動するためのInspect ...コンテキストメニューの新しいアイテムを強調表示します。







3.最も重要なことは、Firebug-Illuminations Panelに特別なタブを追加することです。 ウィジェット、データストレージ(ストア)、およびページで使用されるその他の要素を表示します。 各コンポーネントには、クリックすると展開するツリー構造があります。 使用されるすべてのプロパティとメソッド、および保存されたデータ(たとえば、Storeの場合)について詳しく説明します。







私には、非常に便利な機能である適切なコンポーネント(Extサイトから外部から読み込まれる)に関するドキュメントがまだ残っているように思えます。 したがって、たとえば、グリッドを編集している場合、Firebugの使用法、プロパティ、イベント、メソッドなどの例を直接見ることができます。







ExtJS でのイルミネーションの使用については、 こちらをご覧ください 。 現時点では、私が理解しているように、このプラグインはExtの3番目のバージョンおよび4番目のバージョンでの作業に適しています。



他のライブラリについて-プラグインがjQueryUIおよびYUIでどのように使用されるかを確認しようとしましたが、正直なところ、ExtJSで使用する場合と同じ深刻な利点に気付きませんでした。 jQueryUI、コンポーネント(アコーディオン、タブなど)の場合、それらはパネルに表示されますが、デバッグ時に深刻な利点をもたらすとは言いません。 YUIの場合、何らかの理由で、すべてのウィジェットが選択されたわけではありません(YUI 2の場合、パネルにはほとんど何もありませんでした)が、Illuminations Panelにまだ表示されているウィジェットでは、APIのすべてのプロパティとドキュメントを見ることができました。



さて、軟膏のハエ。 残念ながら、プラグインは無料ではありません(組織と個人の開発者向けの商用ライセンスと個人ライセンスの2種類のライセンスがあります)。 試用版は無料で使用できます。 しかし、試用版と非試用版の基本的な違いを理解できませんでした。 Senchaブログのプラグインの開発者の1人によると:「PS:試用版では利用できない隠されたものがいくつかあります...」



All Articles