Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
masa_139
Product and Topic Expert
Product and Topic Expert


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

 

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

 

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



 

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

  • Fiori Stars


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

  • UI5 Inspector


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

 

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

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



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



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



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

 

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



次は UI5 Inspector です。

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



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