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 に絞った情報を見てデバッグできます。
