In my previous document I demonstrate how to debug javascript written in webclient UI component via IE development tools.

In this document I will try to achieve the same using Chrome development tools. The javascript to be debugged is the same.

Launch UI view via Chrome and click F12 to open Development tools. Click tab “Sources” and double click on the correct script execution context “BSPWDApplication.do”, since I will debug the UI page launched by clicking test button in workbench BSP_WD_CMPWB.

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

Locate the line which you would like to debug, choose “Add breakpoint” from context menu:

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

After that you could see the blue icon in line 341 and the breakpoint information in the right part.

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

Reopen the UI page and it automatically stops in the line where the breakpoint is set.

Don’t be confused by the different line number between design time and runtime since I used the Pretty Print function to make brackets more readable.

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

If you could like to see details information of given variable / Object, just double click on it and choose “Evaluate in console”, and its detail will be printed out in the console as below.

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

All global variables could be found under “Global”:

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

Under the tab “Event Listener Breakpoints” you can set some kinds of dynamic breakpoint.

Suppose you would like to dig out what has happend in webclient UI if you have clicked one work center, then you select the breakpoint for event mousedown ( or event click ), and then click one work center in UI. Once click, it stops in debugger immediately and then you can continue to debug.

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

The complete instructions for debugging javascript via Chrome development tools could be found in developer.chrome.com.

Enjoy debugging

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