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.
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.
There are two basic ways to place breakpoints:
By placing breakpoints at specific line-of-code or function. The program will pause once that line is about to be executed.
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.
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
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.
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.
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.
Yes! Yes, you can. This is very helpful for modifying run-time values or testing logic and data on the fly.
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.
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.