Beginner’s guide to troubleshooting SAPUI5 errors

Always encountering errors on your SAPUI5 application? Don’t know where to start? Most of the common errors can be easily solved by following the troubleshooting steps below. In this post will focus on zeroing in these errors and how to resolve them quickly.

JavaScript Debuggers

When?
Breakpoints are your best friend, as they provide a way to pause your code. They help trap in the root cause of an error or bug. They also provide ways to manipulate run-time data for ease of testing.

How?
There are two basic ways to place breakpoints:

Run-time

By placing breakpoints at specific line-of-code or function. The program will pause once that line is about to be executed.

Breakpoint at runtime
Breakpoint at runtime (Source: Google Developers)

Inline source code

This breakpoint behaves similar to the breakpoint above, except that this breakpoint is intentionally placed in your code. This kind of breakpoint is exceptionally good if you don’t know when the line of code will be executed. You just wait for the script to be executed and let the browser pause.

Inline Breakpoint
Inline Breakpoint

Alongside these breakpoints, the following shortcut keys are your primary tool for debugging:
Shortcut Keys to note:

  • F8 Resume script execution
  • F10 Step to next function call
  • F11 Step into next function call
  • Shift + F11 Step out of the current function
  • Ctrl + F8 Deactivate breakpoints

SAPUI5 inspector

When?
In addition to basic browser tools, there are many plugins that can enhance and provide more powerful tools. One of those browser plugins is the SAPUI5 inspector. SAPUI5 inspector provides a SAPUI5 context-based display of the DOM, properties, binding information, and more.

SAPUI5 Inspector
SAPUI5 Inspector

The SAPUI5 inspector is very useful for DOM inspection because you can see the direct rendering of the application like you usually code it in an XML view. The binding information can be validated quickly as well thru the “Bindings” panel.

Bindings Panel
Bindings Panel

Console coding

When?
console.log is a complementary tool for breakpoints, as they provide a display of data on runtime without drilling into the variables and elements of the current program.

Console Logs
Console Logs

Did you know that you can actually execute JavaScript directly to the browser console?

Yes! Yes, you can. This is very helpful for modifying run-time values or testing logic and data on the fly.

Console Coding
Console Coding

In the image above, I was able to get a specific control from the screen by using the sap.ui.getCore() function using the console. This opens up the possibility to modify the properties of a rendered control or manipulate the behavior of this control with breakpoints.

How?
Simply apply breakpoints then start accessing the variables and function like coding in a normal IDE. This is very useful for SAPUI5 objects since not all are accessible after the view has already rendered. You can also use the console to assert values.

Conclusion
In summary, these simple approaches can carry you far enough to find and debug the root cause. Debugging in SAPUI5 is similar to debugging a normal JavaScript code, but with icing on top. Since you must understand how to use these tools at the right time and how to place these tools at your disposal.

Reference

https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints

https://chrome.google.com/webstore/detail/ui5-inspector/bebecogbafbighhaildooiibipcnbngo/related?hl=en


Leave a Reply