Debug javascript via IE Development tools

[JerryWang]

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:

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

Launch the UI page, click F12 to open development tool, click tab "Script", select the current UI page from drop down list.

You can identify it via url fragment ".../bspwd_cmp_test/BSPWDApplication.do":

find your own JavaScript in line 292, choose "Insert Break-point" from context menu:

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

Click OK:

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.

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

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.

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

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.