Debug Your SAPUI5 App with SAP Business Application Studio

Learn how to run and test your web apps with the SAP Business Application Studio and Google Chrome DevTools.

Conrad Bernal March 30, 2021 Created by June 30, 2020 Contributors Open all Close all Add a message page

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/View1.view.xml with

JavaScript Change the log level Add the following line to the webapp/index.html file to change to log level. 
     sapui5
The log level acts like a filter and hides all log messages below the defined severity.
Write a log message to the console

Import the logger to the file webapp/controller/View1.controller.js and add this onBeforeRendering as well. This Log object allows you to write messages to the console. Replace the highlighted lines from this snippet:

JavaScript 
sap.ui.define([ "sap/ui/core/mvc/Controller", "sap/base/Log" ], /** * @param Controller */ function (Controller, Log) < "use strict"; return Controller.extend("sap.btp.sapui5.controller.View1", < onInit: function () < >, onBeforeRendering: function () < window.message = "A random log message"; Log.info(window.message); >, >); >);

This onBeforeRendering method is called every time the view is rendered. E.g., 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 a breakpoint

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 your app.

JavaScript 
sap.ui.define([ "sap/ui/core/mvc/Controller", "sap/base/Log" ], /** * @param Controller */ function (Controller, Log) < "use strict"; return Controller.extend("sap.btp.sapui5.controller.View1", < onInit: function () < >, onBeforeRendering: function () < window.message = "A random log message"; Log.info(window.message); >, 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 modifications to the DOM after the Renderer has finished.

Don’t worry if the SAP Business Application Studio complains about the “debugger” keyword. This warning is valid as breakpoints should not be shipped in production-ready code, but for the sake of learning, this is fine.