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.
Locate the line which you would like to debug, choose “Add breakpoint” from context menu:
After that you could see the blue icon in line 341 and the breakpoint information in the right part.
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.
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.
All global variables could be found under “Global”:
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.
Enjoy debugging 🙂