Debugging techniques with Google Chrome – Siebel Open UI

Who ever has experience with Open UI must have understood by now that it is very difficult to debug even a moderately complex code in PM/PR using traditional methods. The most common and simplest technique to debug Javascript code is putting SiebelJS.Log/console.log/alert at various points to check state/status of function/variables in Developer Tools console to see the Output. In this post I am going to discuss debugging techniques using chrome that I use while developing in Open UI.

Breakpoints & Watch Expressions:

Some experience developers know how use Chorme Breakpoints and Watch Expression feature. For those who don’t know it here are the steps

Breakpoints:

  1. Open Developer Tools -> Sources Tab
  2. Select your JS File from the tree view on the left
  3. Select the line where you want to apply the breakpoint
  4. Click on the Line number shown on left side or right click on line number and choose Add Breakpoint

image

Watch Expression:

  1. Click on the + symbol on the Watch Expression window
  2. Enter the variable or expression you want to watch ( you can also write a statement)

Values will be shown when debug point is encountered.

Conditional Breakpoints:

Chrome also allows you put conditional breakpoints in addition to plain breakpoints. For example you have loop in your code and you only want to only break when i > 13. Here are the steps you can do achieve this:

  1. Go to Source tab of Chrome Developer tools
  2. Select your JS file
  3. Goto the line where you want to put breakpoint
  4. Right Click and select “Add Conditional Breakpoint”
  5. Enter the desired expression

image image

This breakpoint is displayed in different color than usual blue and will only be effective on if this expression can be evaluated as true.

Pause on Exception:

image           image

Clicking this little button in the developer tool will make chrome stop execution anytime an exception arises in any your code.

Runtime Editing:

Chrome allows you edit JS files at runtime and see them take effect without any need to refresh the page. So, it is possible for me to start with empty JS file and write code in chrome which is really good IDE as it has auto complete even for Siebel Native JS functions. Below are some screenshots to show runtime editing in action.

imageimage

Once your changes are complete just hit CTRL + S and you changes should take effect on next execution iteration. Once done with changes you can copy and paste code back to the source.

In next post we will discuss how can we take  his runtime editing to the next level with chrome workspaces and few more advanced debugging techniques.

Leave a Reply

Contribute