The UI view to be debugged is very simple:
There is one hidden button whose onClick event is bound to ABAP event Refresh:
Launch the UI page, click F12 to open development tool, click tab “Script”, select the current UI page from dropdown list.
You can identify it via url fragment “…/bspwd_cmp_test/BSPWDApplication.do”:
Now you observe the breakpoint icon in line 292( just the same as that in ABAP editor ). Click Start Debugging button:
Now debugger automatically stops at the source code which contains one error. This error is related to the script file of UI framework so I can ignore it.
It will be immediately executed and I got the popup window as expected:
Once I click step into button, I could go to the implementation of method getBrowser, and see the Call stack changed in the right part.
You could also view the detail of local variables in tab “Locals”:
and directly change its attribute value just as you have frequently done in ABAP editor:
You could also utilize the debugger to have a quick view about all available functions provided by object thtmlbUtil:
And if you could like to look into the implementation of given function, just use the search function as below. The hit will be automatically positioned in the right part.