I am a newbie for Javascript and recently I am processing some office integration tickets from my responsible component CRM-BF-COM. I had to debug the javascript written in UI component view. So I start my first javascript debugging journey.

The UI view to be debugged is very simple:

There is one hidden button whose onClick event is bound to ABAP event Refresh:

/wp-content/uploads/2014/05/clipboard1_457807.png

So the backend event could be directly triggered in Javascript code line 20, if the current browser is IE.

/wp-content/uploads/2014/05/clipboard2_457859.png

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”:

/wp-content/uploads/2014/05/clipboard3_457860.png


find your own javascript in line292, choose “Insert Breakpoint” from context menu:

/wp-content/uploads/2014/05/clipboard4_457861.png

Now you observe the breakpoint icon in line 292( just the same as that in ABAP editor ). Click Start Debugging button:

/wp-content/uploads/2014/05/clipboard5_457862.png

Click OK:

/wp-content/uploads/2014/05/clipboard6_457863.png

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.

The javascript debugger also provides the step into, step out and step over function which are similar as ABAP debugger.

/wp-content/uploads/2014/05/clipboard7_457864.png


under debugging mode I could execute javascript via Console tab: just type the javascript to be executed in command line and click button “Run Script”:

/wp-content/uploads/2014/05/clipboard8_457866.png

It will be immediately executed and I got the popup window as expected:

/wp-content/uploads/2014/05/clipboard9_457867.png

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.

/wp-content/uploads/2014/05/clipboard10_457871.png


And we could observe the javascript execution context is changed from bspwd_cmp_test/BSPWDApplication.do to scripts.js:

/wp-content/uploads/2014/05/clipboard11_457872.png

You could also view the detail of local variables in tab “Locals”:

/wp-content/uploads/2014/05/clipboard12_457873.png

and directly change its attribute value just as you have frequently done in ABAP editor:

/wp-content/uploads/2014/05/clipboard13_457874.png

/wp-content/uploads/2014/05/clipboard14_457875.png

You could also utilize the debugger to have a quick view about all available functions provided by object thtmlbUtil:

/wp-content/uploads/2014/05/clipboard15_457876.png

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.

/wp-content/uploads/2014/05/clipboard16_457877.png

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply