Tutorial 5

Tracing and Debugging Techniques

 

You must complete Tutorial 3 first

Tutorial 3 is assumed knowledge for this tutorial.

If you have not completed tutorial 3 please do so before attempting this tutorial.

 

Note 

When testing your scripts, they may frequently crash. If this happens, you should not just start a new session in the browser. You should close the browser window(s), and start the browser again. This allows the browser to free up any resources left in use at the time of the failure.

 

 

Using alert() 

When your scripts don't work as expected, the simplest form of debugging is to add an alert to them.

 

Suppose you wanted to check a value being used in your onClick logic for a button:

 

 

Open the Projects Home Page. Select your project and then use the Work as Developer option.

 

Sign on to aXes and then to a 5250 session.

 

Display the System i Main Menu.

 

Start the axes demo, and go to any employee's details.

 

Next you need to identify a field on the screen so that you can debug its value. To do this, name the Job Title field Job_Title in the Screens tab like this:

 

Click on the job title field:

 

 

 

Display the Screens tab and note that the field is automatically selected. Give it the name Job_Title and click the Save button:

 

 

 

Now edit the screen by clicking the eXtensions tab and locking the screen for editing.

 

Add a new element.

 

Select Push Button eXtension from the Extension Toolbox then drag and drop it onto the screen panel.

 

Give the button the caption Debug with an alert

 

Now edit the onClick property. Replace the code with this:

 

var F = FIELDS("Job_Title");
var value = F.getValue();
alert("The value in the job title field is: " + value );

 

Close the script editor and then save

 

 

Now, if you click on the button, you can see the value being processed, in the alert window.

 

 

Debug Basics 

Instead of using alert, you can use a DEBUG statement. This produces a similar result, but it puts the output from all DEBUG statements into the same window.

 

Add a new push button to the employee maintenance screen, with the caption Output to Debug

 

Edit the onClick property and add this code

 

var myField = FIELDS("Job_Title");
var value = myField.getValue();
DEBUG("The value of the Job Title field is:", value, "some more text" );
DEBUG("Another debug statement");

 

 

Save your changes

 

Note that the format for DEBUG is slightly different. The values to be concatenated are separated by commas, and you can have as many values as you want.

 

When you click on the button, a debug window is opened, showing all debug statements.

 

 

 

Tracing Basics 

Sometimes, an alert interrupts the flow of processing too much. Tracing allows you to watch what happens with less impact.

 

Add a new push button to the employee maintenance screen, with the caption Output to Trace

 

Edit the onClick property and add this code

 

var F = FIELDS("Job_Title");
var value = F.getValue();
TRACE("The value in the job title field is: ", value, " more text ", " and more text"   ); 

 

Note the use of the TRACE command. You can specify as many parameters as you want. The TRACE will concatenate them and send them to the trace window.

 

To see the trace output, save your changes and exit aXes.

 

Now open the Projects Home Page. Select your project and then use the Work as Developer (Tracing) option.

 

Navigate back to the employee maintenance screen and press the Output to Trace button. The trace information appears in the trace window

 

 

 

 

 

 

TRACE statements can be left in your code. They will only have an impact if aXes is running in trace mode.

 

 

Debugging Tools and Options 

It is also possible to use the Microsoft Internet Explorer 8 Developer Tools to debug your scripts.

 

Internet Explorer 8 (IE8) comes with a built-in script debugger (part of IE8 developers tools). IE8 can be downloaded from http://www.microsoft.com/windows/internet-explorer/worldwide-sites.aspx

 

Several things that you need to check or configure before you start debugging your scripts

 

·         Select the “Internet Options” option from the “Tools” menu.

 

 

 

·         Go to the “Advanced” tab (last tab), then scroll down until you see the “Browsing” section. Make sure that “Disable script debugging (Internet Explorer)” and “Disable script debugging (Other)” checkboxes are unchecked.

 

 

 

How to force IE8 to enter debug mode so you can step through your script line by line?

 

Suppose that you have the following fragment of code in your button event handler, which has a deliberate error in it (F.setvalue instead of F.setValue):

 

Modify the onClick code for the QPRINT Queue button, on the main screen ,  to contain this code:

 

var F = FIELDS("CommandLine");
F.setvalue("WRKOUTQ QPRINT");
SENDKEY("Enter");

 

You get an error when it runs:

 

 

 

Please note that the above popup window for script error no longer displays in IE 11. To see the error message, you must do the succeeding procedure to step through the code.

 

 

You will want to step through the script, line by line while at the same time watching the changes in the variable values. The easiest way to tell IE8 that you want to debug this piece of code is by putting statement “debugger” at the beginning of this code fragment.

 

debugger;
var F = FIELDS("CommandLine");
F.setvalue("WRKOUTQ QPRINT");
SENDKEY("Enter");

 

 

In the IE window, select Developer Tools from the Tools menu, or use F12 to start the built in IE debugger. In the Developer Tools window click on the Script tab:

 

 

 

 

When you click on the button that runs the onClick script containing the error, the debug window will come up:

 

 

 

Have a closer look at toolbar buttons. Hover your mouse over those buttons to see the descriptions:

v  Continue: exit debug mode and continue normal execution of the script.

v  Break All & Break On Error: don’t worry about these 2.

v  Step Into: if the current statement is calling a function, it will step through the statements inside the function line by line. You don't want to use this option because you will be stepped through all the internal aXes code and the jQuery code, which is generally not helpful.

v  Step Over: it will not step through the statements inside the function. Use this option to step through the statements in the code you can currently see.

v  Step Out: execute the current function in one ago, then break into debug mode again.

 

Now click on “Step Over” button. (This steps over the internal code statements, to the next statement in the visible block of code)

 

 

You can see that it’s moving to the next statement. Note that the highlighted statement is the next statement to be executed – so it hasn’t been executed yet.

 

Now click on the “Watch” tab – we are going to watch the content of  variable F.

 

 

Click on the text “Click to add…” and type in F and press Enter. It will say undefined as the statement hasn’t been executed yet.

Click again the “Step Over” button.

 

Now by expanding F, in the Watch tab, you can see all its properties.

 

 

But we have not encountered the error yet.

 

Try step over, one more time. This time we can see that the previous line was the source of the error. A few more step overs will take us to the actual alert.

 

 

 

So at this point, we would know to focus our attention on the line

 

F.setvalue("WRKOUTQ QPRINT");

 

Correct the line back to:

 

F.setValue("WRKOUTQ QPRINT");

 

and save your change.

For IE 11, the appearance of the Debugger window has changed but the behaviour of the functions are still the same.

Using Fiddler 

Fiddler is a free tool that allows you to watch the traffic sent between the server and the client, as your axes application runs.

 

You can find out about it and download it from here:

http://www.fiddler2.com/fiddler/help/

 

Install fiddler, and start it. Then start an axes session.

 

It produces a screen like this:

 

 

 

where each line in the left panel corresponds to a request and response from the web server

 

 

 

On the panel on the right, in the inspectors tab, is the information about the request sent (top panel) and the response received (bottom panel), for the selected line:

 

 

 

There are many views and features in this product, but one particularly useful one is the ability to save either one or all sessions to file, which can be sent when trying to resolve problems.

 

To save one session, select it and save as follows:

 

 

To save all sessions: