Sencha Inspector のGA版リリースにより、開発とデバックの時間を大幅に削減する強力なツールを提供いたします。

開発チームの生産性を向上させるInspector の5つの機能をご紹介しましょう。

1.オーバーネストされたレイアウトの識別

オーバーネストされたレイアウトというのは、Sencha 利用者が最もよく作り込んでしまう誤りかもしれません。そしてこれはパフォーマンスや表示バグなどいろいろな問題に繋がります。残念なことに、オーバーネストされたレイアウトは複雑なアプリケーションにおいては見つけることが難しくもあります。

Inspector でコンポーネントツリーを見ていると、レイアウトタイプが赤い文字でハイライトされることがあります。それはこのコンポーネンのトレイアウトに問題がある可能性を示しており、そこで赤文字にマウスを合わせれば詳細が表示されます。

2.データバインディングのデバッグ

ViewModel とデータバインディングはExt JS 5 で追加された新機能の1つです。これらの機能によりアプリケーションのコードが複雑になることを抑えられるようになったものの、デバッグは容易ではありません。

例えばコンポーネントにバインドした値が正しく使われていない場合はどこを見ればよいでしょうか？

Inspector は対象コンポーネントのデータバインディングを解析し、バインドされた値が見つからなかったキーをハイライトします。上記の例では「feeed」の綴りが誤っていることに気づきます。大きなコードベースでこのような単純な誤りを見つけることは非常に難しいものです。

3.アプリケーションアーキテクチャの探索

開発者を悩ますもう一つの作業は定義したクラスが存在するかどうかを簡単に見つけることです。プロジェクトにクラスを新規に定義した後に sencha app refreshを実行し忘れたときには特にです。

Inspector の“App Architecture” タブを利用すれば、アプリケーションで検出されたクラスのリストを素早くフィルターすることができます。特定のファイルがロードされたかをブラウザのデベロッパーツールを使って手動で探すことに比べて、大抵の場合は楽になるでしょう。

4.テーマ設定

Inspector を使えば、その場でテーマの変更をプレビューすることができます。Fashionの登場により、Ext JS 6 のテーマは以前よりも強力なものになりましたがそれでも、基本的な変更を試すために膨大な量のSass変数の中から必要なものを見つけることを開発者はしたくないものです。

テーマ設定ガイドに従ってアプリケーションを Inspector につなげましょう。“Theme” タブで全てのSass 変数を自由に変更できるようになり、その変更は即時にブラウザーで確認することができます。Inspector はさらにその変更を保存もします。

5.APIドキュメントへの直接リンク

大半のSencha 利用者には我々のドキュメンテーションが充実したものであると感じていただけていることでしょう。フレームワーク内の全てのクラスで利用できるコンフィグプロパティやメソッド、イベントの数を考えるとこれは非常に役立つものです。Inspector によりアプリケーションで利用しているコンポーネントのドキュメンテーションをより簡単に見つけることができます。

コンポーネントの詳細を見ている時、右側のペインにはExt JS コンポーネントのドキュメンテーションへのリンクが表示されます。このリンクをクリックすることで、選んだコンポーネントのAPIドキュメントを直接ブラウザに表示します。

今日から始めましょう

InspectorはExt JS Premiumパッケージで入手できます。評価版はExt JS trialの一部としてダウンロードしていただけ、上でご説明した機能だけでなくその他の素晴らしい機能もそちらでご利用いただけます。