SAP UI5: bootstrap with sap-ui-core.js and debug tip

sap-ui-core.js
SAP UI5 is started by loading the bootstrap js file sap-ui-core.js. The UI5 document has a tutorial to create a simple app at
https://openui5.hana.ondemand.com/#docs/guide/5b9a170d9f6a4d5784e8ab2ded3d8517.html

<script src="resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-libs="sap.m" data-sap-ui-theme="sap_bluecrystal"> </script>

The important thing is data-sap-ui-libs, which tells sap-ui-core.js to load additional UI5 libraries to be used by the application. for example, if you want to create a button from sap.ui.commons library (not sap.m library) using the below code, but does not include "sap.ui.commons" in the library collection, then the call will fail:

btn = new sap.ui.commons.Button(...)

Internally, sap-ui-core.js just calls jquery.sap.require() to load each library specified in this property.

However,  UI5 document does not clearly indicate how it organizes the UI5 library or give a clarr library list for the library information

Debug tips:
0. on Windows, click CTRL+SHIFT+ALT+S to open UI5 diagnostic window

1. As ui5 loads view.js at runtime by xhr request, instead of using the <script> tag, so it cannot attach desktop browser as debugger to those js file. in order to debug the js view code, one option is pre-loading the js file explicitly in html file, and then the file will be ready for debugging as regular js file. In this case, the xhr loader will check and skip the already loaded file.

2. Changing sap-ui-core.js to sap-ui-core-dbg.js in bootstrap script element or setting parameter "sap-ui-debug=true" in the query string will load debug version of sap-ui-core-dbg.js. The first method is recommended as it can be used to debug sap-ui-core functions. it can also be set at bootstrap script tag as
sap-ui-debug="true"

Note, you can also directly load sap-ui-core-dbg.js in bootstrap ui5 script, as that will show the parameter name properly in javascript debugger variable window.

3. Set log level to debug in configuration object to get detailed log

<script src="resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-libs="sap.m" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-config="logLevel:'DEBUG'"> </script>

4. By default, all ui5 libraries are loaded synchronously, to load them asynchronously, set  data-sap-ui-preload="sync" in bootstrap script, and then listen for UI5 core's attachInitEvent

<script src="resources/sap-ui-core-dbg.js"

id="sap-ui-bootstrap"

data-sap-ui-config="theme:'sap_bluecrystal',

                    libs:'sap.m',

                    logLevel:'DEBUG',

                    preload:'async'">

</script>

<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->

5. click  CTRL + ALT + SHIFT + P to show UI5 technical information dialog box, including setting debug source, and check ui5 version. CTRL + ALT + SHIFT + S to show diagnostic dialog, to see UI5 tree control, property window and binding

Key methods
The bootstrap process uses few key methods in sap-ui-core.js:

sap.ui.define 
Defines a Javascript module with its name, its dependencies and a module value or factory.

sap.ui.require
Resolves one or more module dependencies synchronous (for single parameter) or asynchronously (for callback method)

sap.ui.getCore
Retrieve the SAPUI5 Core instance for the current window.

Get UI5 Version

To check UI5 version from ABAP system, send request to 

http://<HOST>:<port>/sap/public/bc/ui5_ui5/ 
for example:
https://ldai1uia.wdf.sap.corp:44300/sap/public/bc/ui5_ui5 
or 
https://ldai1uia.wdf.sap.corp:44300/sap/public/bc/ui5_ui5/index.html