Step 30: Debugging Tools

You can view and download all files in the Explored app in the Demo Kit under Walkthrough - Step 30.

<mvc:View
		controllerName="sap.ui.demo.wt.controller.InvoiceList"
		xmlns="sap.m"
		xmlns:mvc="sap.ui.core.mvc">
	<List
			id="invoiceList"
			class="sapUiResponsiveMargin"
			width="auto"
			items="{
			path : 'invoice>/Invoices',
			sorter : {
				path : 'ShipperName',
				group : true
			}
		}">
		<headerToolbar>
			<Toolbar>
				<Title text="{i18n>invoiceListTitle}"/>
				<ToolbarSpacer/>
				<SearchField width="50%" search="onFilterInvoices"/>
			</Toolbar>
		</headerToolbar>
		<items>
			<ObjectListItem
					title="{invoice>Quantity} x {invoice>ProductName}"
					number="{
					parts: [{path: 'invoice>ExTendedPrice'}, {path: 'view>/currency'}],
					type: 'sap.ui.model.type.Currency',
					formatOptions: {
						showMeasure: false
					}
				}"
				numberUnit="{view>/currency}"
					numberState="{=	${invoice>ExtendedPrice} > 50 ? 'Error' : 'Success' }">
				<attributes>
					<ObjectAttribute text="{
						path: 'invoice>Status',
						formatter: '.formatter.statusText'
					}"/>
				</attributes>
			</ObjectListItem>
		</items>
	</List>
</mvc:View>

We introduced a typo in the binding of the number attribute to simulate a frequent error; instead of using 'invoice>ExtendedPrice' we use 'invoice>ExTendedPrice'. Now we call the app and notice that the price is actually missing. By pressing CTRL + ALT + SHIFT + S we open the SAPUI5 support diagnostics tool and check the app.

Besides technical information about the app and a trace that is similar to the developer tools console of the browser, there is a really handy tool for checking such errors in this dialog. Open the tab Control Tree by clicking on the expand symbol on the right.

A hierarchical tree of SAPUI5 controls is shown on the left and the properties of the selected control are displayed on the right. If we now select the first ObjectListItem control of the tree and go to the Binding Infos tab on the right, we can actually see that the binding path of the number attribute is marked as invalid. We can now correct the error in the view and the price should appear in the list of invoices again.

Sometimes errors are not as easy to spot and you actually need to debug the JavaScript code with the tools of the browser. For performance reasons, the SAPUI5 files are shipped in a minified version, this means that all possible variable names are shortened and comments are removed.

This makes debugging harder because the code is a lot less readable. You can load the debug sources by adding the URL parameter sap-ui-debug=true or by pressing CTRL + ALT + SHIFT + P and select Use Debug Sources in the dialog box that is displayed. After reloading the page, you can see in the Network tab of the browser’s developer tools that now a lot of files with the –dbg suffix are loaded. These are the source code files that include comments and the uncompressed code of the app and the SAPUI5 artifacts.

Figure 2: Information from CTRL + ALT + SHIFT + P