Skip to Content

Debug Your SAPUI5 App

test
0 %
Debug Your SAPUI5 App
Details
// Explore More Tutorials

Debug Your SAPUI5 App

05/06/2019

Debugging and logging are the nut and bolts to inspect your application. Learn how to debug and test your web apps with the Google Chrome Dev Tools.

You will learn

  • How to do add breakpoints to your JavaScript code
  • How to log data to the console
  • How to use the Google Chrome Dev Tools.


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

<MessagePage showHeader="false"
  description="More content to come"
  text="Stay tuned!"
  icon="sap-icon://home" />
message
Log on to answer question
Step 2: Write a log message to the console

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!");
}
logger

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.

Log on to answer question
Step 3: 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 you app.

,

onAfterRendering: function() {
	debugger
}
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.

Log on to answer question
Step 4: Stop at the breakpoint

Test the changes on your local machine.

npm start

This command should start the app and open your browser automatically. Open the Chrome Dev Tools (or the dev tools of your favorite browser) by clicking F12. Refresh the page to run the script one more time.

You should now see that the app reached the breakpoint (the dev tools automatically switched to the Sources tab).

stopped
Log on to answer question
Step 5: See the error log message

Click F8 to jump over the breakpoint and switch to the Console tab.
Now you should see your error message printed in red. Click on the small triangle on the left side to expand the error message.

Can you spot the line in which you invoked the error message?

testlog
Which file triggered the invocation of this error? Hint: It's the very last line in the stack trace ?
×

Next Steps

Back to top