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?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.