Some debug tips for SAPUI5 application

[lucky_li]

• How to easily inspect UI5 on Chrome ?

          Install the Chrome extension "UI5 Inspector", detail see  https://github.com/SAP/ui5-inspector

• How to get call stack when some exception happens

• How to debug source code in product system such as ABAP Server?

• How to access UI5 resource locally to accelerate loading ?

1. We can put SAPUI5 source code locally, and directly access it locally by add following parameter ( --args --disable-web-security  --allow-file-access-from-files )to Chrome. but Chrome new version no longer support it, you need install a old version. 
2. we can install Tomcat, and download the UI5 resources to locally ( for example you put all source code under c:/Users/xxx/git,  then you can put the UI5 resource under  c:/user/xxx/git/resource ). And change the tomcat host to the local directory:

            Change file    tomcat_dire/conf/server.xml ( go to bottom), default like

               <Host name="localhost"  appBase="webapps"

                      unpackWARs="true" autoDeploy="true">

            change it to:

           <Host name="localhost"  appBase=""

                 unpackWARs="true" autoDeploy="true">

                 <Context path="/" docBase="/C:/Users/xxx/git" />

           and adjust your index.hml location accordingly

<script id="sap-ui-bootstrap"

       src="../../resources/sap-ui-core.js"

          then start you application like:    localhost:8080/youapp/index.html

• How to manually change source code ?

For solve a issue, the normal process is that you investigate the issue, then change source code in Git, then do release build, then wait the source code transport from one system to another system, after the source code reach the system, then you do test to verify that the fix really work. If the fix not work,then repeat the process.

How can we easily check whether our solution can work ? The answer is:  manually change the source code by browser debug tool.

We need first understand how SAPUI5 application run:

When an SAPUI5 application ( for the Fiori application, it is a Component) first time run, the browser will load the source code and execute it. When you return to the launchPad,  the component instance will be deleted but the source code is still kept. The next time you run it, because the source code has been loaded, so the browser will directly create the new instance and run it.

Understand function format

After following code executed, the browser will put the function into the class prototype

sap.ca.scfld.md.controller.BaseFullscreenController.extend("sap.suite.ui.smartbusiness.drilldown.view.Drilldown",

{

    _getChartPercentFormatter  = function() {

     ......

   }

}

So if you want to change the function  _getChartPercentFormatter, you need paste following source code into Browser console window:

sap.suite.ui.smartbusiness.drilldown.view.Drilldown.prototype._getChartPercentFormatter = function() {

  ......

}

• How to run code in Chrome, Firefox, IE ?
• for Chrome

    Choose "Develop tool" from menu, click the "Console" window, then directly paste you code, press 'Enter' to execute it

• for Firefox

     Choose "Developer"-->"Developer Toolbar" from the menu, then paste code, press 'Enter' to execute it.  

• for IE

     Choose "F12 Developer Tool" from menu, click "Console" window, paste code, then press green triangle button to execute it.