Skip to Content
Author's profile photo Jerry Wang

Debug javascript via Chrome Development tools

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 “”, 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.


The complete instructions for debugging javascript via Chrome development tools could be found in

Enjoy debugging 🙂

Assigned Tags

      Be the first to leave a comment
      You must be Logged on to comment or reply to a post.