yasutomogのブログ

Software Engineerの雑記

Sencha Advent Calendar 2014 - 12月20日 App Inspector for Sencha

App Inspector for Sencha の紹介

App Inspector for Senchaについて

  • chromeの無料エクステンション
  • chromeにインストールして、開発者ツールから使うことができる
  • Senchaで作られた画面の解析に役立つ

インストール

  • Googleで「sencha chrome」とかで検索してもらえればいいです。
  • 下記リンクからchromeにインストール

App Inspector for Sencha™ - Chrome ウェブストア

アプリ詳細タブ

  • Senchaで作られた画面で開発者ツール開いて、Senchaメニューを選択するとアプリ詳細タブが開かれます。
  • この画面がどのバージョンで作られているかなどの情報を見ることができます。

f:id:yasug:20141220020655p:plain

コンポーネントタブ

  • コンポーネントタブを選択すると、どのような部品をつかって構築されているか、組み方をしているかをリストで確認できます。
  • コンポーネントをクリックすると、画面の対象部分が以下のイメージのように赤くハイライトされます。

f:id:yasug:20141220020941p:plain

f:id:yasug:20141220021400p:plain

f:id:yasug:20141220022409p:plain

ストア

  • ストアタブを選択すると、画面で使用しているストアを一覧で確認できます。
  • そのストアには何件のレコードが入ってるか確認することができて、レコードの中身も1件ずつデータを確認することが可能となっています。

f:id:yasug:20141220022516p:plain

レイアウト

f:id:yasug:20141220022756p:plain

イベント

  • 記録ボタンをクリックしてから画面上で色々触ってみてください。
  • 発生したイベントが随時リスト表示されていきます。
  • どのコンポーネントで何というイベントが発生しているかを確認することができます。

f:id:yasug:20141220022926p:plain

まとめ

  • 1から開発するときよりかは、既にあるアプリやサンプルの確認時に、どうやって作ってるのかなどを視覚的に把握するのに使えると思ってます。
  • ソースも公開されているので、興味ある人はこちらも見てみて下さい。

senchalabs/AppInspector · GitHub

明日は、Shinobu Kawanoさんです!