One of my colleagues today asked me this question: Suppose this below is an application generated by Smart Template, and I would like to debug how the back button is implemented. Since the whole UI page is implemented by framework, I don’t know where to set breakpoint. How to proceed?
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLicmbw5CN0IjM5ADNkJjNjhDZyUWY3Y2N0gjMyMjMyYDZ5E2Yk9CX5d2bs92Yl1iclB3bsVmdlR2LcNWaw9CXt92Yu4GZjlGbh5yYjV3Lc9CX6MHc0RHaiojIsJye.png)
Here below is my process about how to find the back implementation in framework file within several minutes.
(1) Use Chrome extension Inspector ( the UI5 tab in Chrome development tool below ) to figure out that the button is located in UI area sap.uxap.ObjectPageHeader.
Based on the learning in My understanding about how object page in Smart Template is rendered I search by keyword “Back” in file Details.view.xml first, no result.
(2) Then search in next xml file NavigationBar.fragment.xml, this time the button is found.
Perform global search via Ctrl+Shift+F with key word “_templateEventHandlers.onBack“, no result.
Then search “_templateEventHandlers” instead, this time TemplateAssembler-dbg.js is found.
Unfortunately it is difficult to judge the type of _templateEventHandlers simply from context code as it is filled in a generic way
(3) Perform search on onBack instead, and the result is what I am looking for:
Set a breakpoint and click back button to verify: breakpoint is triggered:
So the trick here is the keyword I am using to search in a tentative way.
first time search by _templateEventHandlers.onBack, no result
second time search by _templateEventHandlers, has result but not useful
third time search by onBack, done.