Debug Your SAPUI5 App

Add a simple message page to let the users know you are still working on this app.

Replace the existing page in the file webapp/view/MainView.view.xml with

<MessagePage showHeader="false"
  description="More content to come"
  text="Stay tuned!"
  icon="sap-icon://home" />

Add this onBeforeRendering hook to the file webapp/controller/MainView.controller.xml. This error function allows you to write error messages to the console. Error messages also write the stack trace to the console, which can be used to trace the message back to the line of invocation.

onBeforeRendering: function() {
  jQuery.sap.log.error("A problem occured!");
}

This onBeforeRendering method is called every time the View is rendered, before the Renderer is called and the HTML is placed in the DOM-Tree. It can be used to perform clean-up-tasks before re-rendering.

Add this onAfterRendering hook to the same file to place a breakpoint in your code. A breakpoint will cause your app to stop when the execution thread reaches it. This gives you the chance to inspect the state of you app.

,

onAfterRendering: function() {
	debugger
}

This onAfterRendering method is called every time the View is rendered, after the HTML is placed in the DOM-Tree. It can be used to apply additional changes to the DOM after the Renderer has finished.