Sencha Advent Calendar 2014 - 12月20日 App Inspector for Sencha
App Inspector for Sencha の紹介
App Inspector for Senchaについて
インストール
App Inspector for Sencha™ - Chrome ウェブストア
アプリ詳細タブ
- Senchaで作られた画面で開発者ツール開いて、Senchaメニューを選択するとアプリ詳細タブが開かれます。
- この画面がどのバージョンで作られているかなどの情報を見ることができます。
コンポーネントタブ
- コンポーネントタブを選択すると、どのような部品をつかって構築されているか、組み方をしているかをリストで確認できます。
- コンポーネントをクリックすると、画面の対象部分が以下のイメージのように赤くハイライトされます。
ストア
- ストアタブを選択すると、画面で使用しているストアを一覧で確認できます。
- そのストアには何件のレコードが入ってるか確認することができて、レコードの中身も1件ずつデータを確認することが可能となっています。
レイアウト
- 無駄に入れ子になっているコンポーネントを教えてくれます。
イベント
- 記録ボタンをクリックしてから画面上で色々触ってみてください。
- 発生したイベントが随時リスト表示されていきます。
- どのコンポーネントで何というイベントが発生しているかを確認することができます。
まとめ
- 1から開発するときよりかは、既にあるアプリやサンプルの確認時に、どうやって作ってるのかなどを視覚的に把握するのに使えると思ってます。
- ソースも公開されているので、興味ある人はこちらも見てみて下さい。
senchalabs/AppInspector · GitHub
明日は、Shinobu Kawanoさんです!