Debugging in Siebel Open UI is the most important and difficult task for any Open UI developer, isn’t it!!
But don’t worry, after reading this article, it will be easier for you to debug script in Siebel Open UI. In Open UI, we write script mainly for Presentation Model, Physical Renderer and Theme. Here we will discuss step by step approach of debugging Siebel Open UI script.
We will use browser developer tool extensively to debug Open UI script. In our previous module on Siebel Open UI theme, you have seen how to use browser developer tool for development purpose. Here you will use the same tool for debugging.
So what is Browser Developer Tool ?
To open browser developer tool, right click on any web page and then click on ‘Inspect Element’. You could use shortcut keys also like F12 for Google Chrome, Shift+Ctrl+Q for Mozilla Firefox.
Steps for debugging in Siebel Open UI:
- Use SiebelJS.Log() function to log messages
- Use debugger statement to add breakpoints inside script
If your code does not work, first step is to verify all files are downloaded properly in the browser. Best tool to do so is browser developer tool (Inspect Element). You first open Siebel Open UI application and right click to choose ‘Inspect Element’ to open developer tool. If your browser is Google Chrome, then go to ‘Source’ tab and search for files.If there is any error or warning in downloading file, you will see a small red or yellow icon on the top right hand corner. You click on those icons and down the ‘Inspect Element’ window, another window will show all errors.
There may be several reasons behind download failure.
– JS file is not properly defined in Manifest Administration. To know more about Manifest Administration, read our article ‘Manifest File Customization‘
– Error in JS file itself
– If class is properly loaded, auto complete feature of the console will recognize the class
– If browser does not suggest the class, then verify the class is properly registered in the namespace of JS file or not
3. Use SiebelJS.Log() function to log messages
Use SiebelJS.Log() to print variable values or any other log messages on inspector tab
– Use GetFieldValue() to get values of controls in the Presentation Model
– Use val() to get values of elements in the Physical Renderer
– To see the output of log messages, open browser tool and go to Inspector tab
- All log messages appear in execution order
- If you have used log statement in multiple places, then add file name or any separator among log messages. It will help you to understand which log message is coming from which file.
4. Use debugger statement to add breakpoints inside script
– Almost all modern browsers have built-in breakpoints feature with developer tool. You could add expression on breakpoints also.
– If the developer tool does not give breakpoints functionality or you want to set breakpoints explicitly, then use ‘debugger’ statement in your script.
– ‘debugger’ behaves the same way as breakpoints, code execution will stop at that point.
Few Recommendations :
– Remove debugger and SiebelJS.log() from script before moving to production
– Try to avoid alert() to print variable values
♦ While debugger and SiebelJS.log() are invisible to end users, alert() throws alert message to end users
– Test with all browser and device combinations before moving the script to production
Session Highlights – Debugging in Siebel Open UI:
1) Use browser developer tool to verify that the JS or CSS files have been downloaded properly
2) Use SiebelJS.Log() to print variable values or to decide that the code execution has reached certain point
3) Use debugger to add breakpoints
This ends our seventh Open UI training module – Debugging in Siebel Open UI.
To check your Siebel Open UI skill, click here – Siebel Open UI Quiz
If you have any question about Siebel Open UI Debugging, please feel free to comment below.
Keep in touch, follow TechOneStop on Facebook / Twitter / LinkedIn / Goolge+.