Overview

🎓 beginner ⏱ 20 min. Sapui5 Beginner HTML5 Cloud Javascript SAP BTP Cloud Foundry Environment SAP Business Application Studio

You will learn

✔How to add breakpoints to your JavaScript code
✔How to log data to the console
✔How to use the Google Chrome DevTools

C Conrad Bernal August 21, 2026

Created on June 30, 2020

Contributors

More from Conrad Bernal

TUTORIAL Create an Empty SAPUI5 Project ⏱ 15 min. TUTORIAL Improve User Experience of the List and Detail Page ⏱ 15 min. TUTORIAL Deploy Your First SAPUI5 App ⏱ 25 min.

See all 4 tutorials by Conrad Bernal →

Prerequisites

Steps

Step 1 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
<mvc:View
    controllerName="sap.btp.sapui5.controller.View1"
    xmlns:mvc="sap.ui.core.mvc"
    displayBlock="true"
    xmlns="sap.m"
>
	<Shell id="shell">
		<App id="app">
			<pages>
				<MessagePage showHeader="false" description="More content to come" text="Stay tuned!" icon="sap-icon://home"/>
			</pages>
		</App>
	</Shell>
</mvc:View>

Step 2 Change the log level

Add the following line to the webapp/index.html file to change to log level.

HTML
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>sapui5</title>
        <script
            id="sap-ui-bootstrap"
            src="resources/sap-ui-core.js"
            data-sap-ui-theme="sap_fiori_3"
            data-sap-ui-resourceroots='{"sap.btp.sapui5": "./"}'
            data-sap-ui-compatVersion="edge"
            data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
            data-sap-ui-async="true"
			data-sap-ui-logLevel="debug"
            data-sap-ui-frameOptions="trusted"
        ></script>
    </head>
    <body class="sapUiBody">
        <div
            data-sap-ui-component
            data-name="sap.btp.sapui5"
            data-id="container"
            data-settings='{"id" : "sapui5"}'
        ></div>
    </body>
</html>

The log level acts like a filter and hides all log messages below the defined severity.

Step 3 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 {typeof sap.ui.core.mvc.Controller} 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.

Step 4 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 {typeof sap.ui.core.mvc.Controller} 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.

Step 5 Run the web app

Step 6 Stop at the breakpoint

Step 7 Check the log message

Resources

Next Steps

Discussion

Share feedback on this tutorial or join the conversation in SAP Community.

Submit detailed feedback

Discuss in Community

Debug Your SAPUI5 App with SAP Business Application Studio