To debug in SAPUI5, use your browser's debugging tool.
When you debug code in SAPUI5, keep in mind that you can not debug SAPUI5 in your IDE. If you use Eclipse, for example, a breakpoint set in Eclipse does not stop your script when it is executed in your browser, unless you use the debugger; statement explicitly in your code. The browser does not know about your IDE and does not communicate directly with it.
ABAP Debugger vs. Browser Debugger
This section explains how you use the debugging tool of a Chrome browser. Keep in mind that you have to test your application on all browsers that are officially supported by SAP, because the implementation differs depending on the browser used, seeChoose your Browser. To start the debugger, use the browser menu or choose F12 (valid for most browsers).
The following explanations assume that your application is up and running on your web server, either a local Tomcat, or a remote server.
In a first step, locate the lines of code you would like to inspect and set breakpoints. The following figure shows an application that is opened in the Chrome debugger. The default tab Elements is opened, and a small bell icon with a number located at the right border of the footer indicates the number of messages from the console.
To see the actual content of the HTML page and to set a breakpoint, open the HTML page from the sources tree. This is similar to the ABAP debugger when you execute and debug an application from the workbench. The following figures show the ABAP workbench debugger and the Chrome debugger.
The following figure shows the ABAP workbench debugger. The bubbles indicate the opened application and its location (1), the call stack (2), and the tab where you enter the variables you want to watch (3).
The next figure shows the Chrome debugger. Here, the bubbles indicate the script you are looking at (1), the watch expressions where you can add the variables you want to watch (3), the call stack that indicates if the code execution stops on a breakpoint (2), and the breakpoint (4). The call stack is only visible when the code execution is on hold.
If you are not sure in which file exactly a piece of code is located, Firefox offers you an option to search through several files included in your page. Chrome, however, does not support this option.
The browser debugger supports several options for setting breakpoints. You can, for example, click once on the line number where you would like to break. To remove the breakpoint, click the respective line again. To temporarily disable or edit the breakpoint, right click on an existing breakpoint. To set a conditional breakpoint, right click on a line without breakpoint. You can also set breakpoints on a certain event or event listeners, see the option in the lower right screen area of the figure above. For more information, see the tutorials for your respective browser that are available in the internet.
In most cases after setting a breakpoint, you have to reload the page to execute the code again and to make it stop at the respective line. If you use Internet Explorer, choose Start Debugging in the developer tools to activate your breakpoint.
Adding Variables to Watch
To add a variable to the list of watched variables, open the context menu for the variable in the code line and choose Add to watch. Another option is to choose the + button at the top of the watch list to add a new line, in which you can then enter the name of the variable you want to watch.
Stepping Through Executed Code
In ABAP, a yellow arrow indicates the line of code that is currently being executed. In Chrome, the arrow is red and the code line is highlighted. The following table gives an overview of the function keys for the ABAP workbench and Java Script:
|Step-by-step execution, also stepping into functions and loops||F5||F11|
|Step-by-step execution, stepping over functions||F6||F10|
|Skipping the rest of the current function and stepping out to the last cursor position||F7||SHIFT+F11|
(Internet Explorer: F5)