Skip to Content
Author's profile photo Masayuki Sekihara

SAPクラウド演習4. Chrome プラグイン、便利ツール

SAPUI5 のアプリ開発、デバックに便利なプラグインを2つ紹介します。

 

Google Chrome の Developer Tools は UI 開発者にとって便利なツールですが、それにプラスして SAPUI5 用のプラグインがあります。

 

Chrome Web Store で、SAPUI5で検索します。

/wp-content/uploads/2016/01/sapui5_plugin_867519.jpg

 

Fiori Stars と UI5 Inspector の2つを Chrome に追加してください。

  • Fiori Stars

どの UI5 コントロールを使っているかマウス・オーバーで調べられます。標準の Fiori アプリは700以上あるので、SAPの標準アプリからいろいろ学べます。

  • UI5 Inspector

デバッグに便利なツールです

 

では、SAP Fiori, demo cloud edition で Fiori アプリを起動して、各ツールを使ってみましょう。

どのアプリでもいいですが、ここでの例は My Timesheet アプリを使います。

/wp-content/uploads/2016/01/demo_cloud_867520.jpg

Chrome ブラウザの右上に FioriStars のアイコンがあります。

FioriStars.jpg FioriStars2.jpg

Explore モードにすると、マウスをコントロール上に置くと、どの SAPUI5 コントロールが使われているかがわかります。

FioriStar3.jpg

さらに Shift キー + クリックで、そのコントロールの詳細ヘルプ、サンプルへジャンプします。

 

OData sniff を有効にしておくと、右上にコールされた OData サービスがわかります。

FioriStarts7.jpg

次は UI5 Inspector です。

Chrome ブラウザで右クリック、または Ctrl+shift+I で Developer Tools が立ち上がります。

/wp-content/uploads/2016/01/inspect_867534.jpg

UI5 用のタブが追加され、UI5 に絞った情報を見てデバッグできます。

/wp-content/uploads/2016/01/debug_867535.jpg

Assigned Tags

      Be the first to leave a comment
      You must be Logged on to comment or reply to a post.