• Step1 Launch the application via Chrome.
• Step2 Go to tab “Sources”, enable Event Listener Breakpoints with type = Mouse.click.

Suppose I need to find out the implementation of button “Create” in Customer Engagement Initiative (CEI):

We could observe that once button is clicked, a pop up appears:

And I have to find out how is this implemented.

Step1 Launch the application via Chrome.

Click F12 to open Chrome developer tool, and click “Inspect Element” button, and put the mouse onto the Create button,

and click it. Then the html source code of this button is automatically located. However in “Event Listeners” in the right part, still I could not find information I want:

Step2 Go to tab “Sources”, enable Event Listener Breakpoints with type = Mouse.click.

Then switch application to debug mode by clicking “Pause” button:

Then click the Create button, and expand the “Call Stack” tab:

In callstack hierarchy you could see lots of framework stuff ( sap-ui-core.js ), and the highlighted entry below is just what I am looking for.

Double click on it, and the JavaScript code to open the popup window is automatically displayed. It is implemented in js view CUAN_INI_OW_WSI.view.js:228.

In CEI, you could also find the corresponding deployed js view in ABAP backend, using tcode SE80 to open the BSP application.

or we can also find CUAN_INI_OW_WSI.view.js manually in Sources tab: