Browser Script Debugger

One of the joys of working with Siebel is debugging Script, those late nights troubleshooting spaghetti code sure brings back memories. It is even more memorable when you encounter code that has never been unit tested, and wonder how did this ever get into production..

Ah the good times, but where would the fun be without Siebel's debugger. Set a break point where you think the error is occurring, let the application run, and Siebel will halt the execution of the Application at your designated break point, it will display all your current variables, and let you step through the code line by line.

Browser Script on the other hand has always been the poor cousin of eScript, it lacks the interactive debug tools, which has always made it harder to work with. Make a typo in eScript, and you'll probably get a compile error or it will halt your application, but with browser script, a typo will silently fail and halt execution of every other browser script in your application, its quite insidious.

There are a few common methods that developers rely upon to debug Browser Script.

The Alert/SWEAlert box is helpful but annoying and painful when working with loops. I know of people who have implemented browser popups that log information to a separate window, not bad, but dealing with popups is too clunky and slow. Siebel also provides the browser trace files similar to eScript, but a much better tool is the the IE Developer toolbar (IEDTB). It is shipped as part of IE8, but had been available as a separate Add-on for previous versions, if you've used Firebug on Firefox before, then this will be familiar to you.

The IEDTB allows the Siebel developer to

1. debug browser code
2. add breakpoints
3. use log statements
4. watch run-time objects and variables
5. inspect DOM elements
6. run code against the active session
etc, etc

In short, it is pretty badass.

If you are ready to turn to the dark side, press F12 on your keyboard now, otherwise press ALT-F4.



Logging

The IEDTB provides the browser with an object called "Console", with the following methods.

console.log('start function');
console.info('We love disco');
console.warn('warning');
console.error('error');
console.assert((1==2), 'Disco forever);
console.clear();

These methods can be used inside any of your browser script event in Tools, and the results can be inspected in the console window as shown below.



Note. The console must be open at the time when the scripts are run.

Breakpoints

This has always been the holy grail of Browser Script debugging.

Here's how it works. In the script drop down, find the JS script that you want to debug, and select it before navigating to the Siebel screen that actually fires it.

Click the left side of the left pane to set the break point.


Now navigate to the View that contains your browser script, and trigger your function. The IEDTB will stop at the breakpoint, and allow you to step through your code.

The Local window allows you to inspect all your local variables



The Watch window allows you to focus on particular variables and even change the value during run time.





You can also retrieve the values of the profile attributes, and run other browser commands by using the script console.



This is good news for all the Browser Script Jedi's out there, the IEDTB is an in-dispensible tool for debugging browser script, and beats the hell out of plain ol' Alert or SWEAlert

Best practice has it that we implement our logic using declarative means, then go to Script as a last resort, but there is an even finer unspoken distinction. When we have exhausted all declarative means, and all eScript means, you have reached the last resort, of last resorts. Welcome to Browser script town, when you get into this bad end of town remember to bring your IEDTB.

The IEDTB has saved my life more than once, and it will save yours as well.


4 comments:

  1. Very Helpful!, how can you get the profile attributes? because its disabled by default, how can I activate?

    ReplyDelete
  2. Hi GK

    Profile Attributes are available the debugger in the same way, they are available to Siebel. Ensure that your browser script is working first.

    theApplication().GetProfileAttr
    or
    App().GetProfileAttr

    ReplyDelete
  3. Thank you Jason ! The only way that i can debug with the command you described is when a set in my cfg the parameter HighInteractivity=FALSE. The other way show an error(object expected). But i can´t work with this parameter in FALSE....There is another way that i can debug the profile attributes? Debugging in tools i know , i would like something in the browser and in real time .

    ReplyDelete

Comments are open to all, please make it constructive.