Squash Those Bugs – LANSA WAMs debugging techniques (Part One of Five)

Uncategorized
Debugging LANSA WAMs
Debugging LANSA WAMs

Many Layers

Debugging web applications in general tends to be quite complex, and requires some extra planning and thought. A web application encompasses multiple environments (E.g. server language, TCP connectivity, HTML, JavaScript, jQuery, etc.) and each one may require a different skill-set to deal with. This compounds the possibilities of errors. To make matters worse, browser standards have always differed from one browser to the next.

The LANSA language goes a long way towards simplifying the different layers but there are still times where some bug has ended up in your application and needs to be found and eradicated. Over the years of developing LANSA web sites, I have found that there are some tools and techniques which are invaluable to finding and squashing those bugs.

Break it down

I find that the easiest way to find and remove those bugs in LANSA WAM applications is to break down the areas of focus into five areas. Ask yourself these five questions.
1) Are my client side objects what I think they are?
2) Is my client code correct?
3) Are my values stored in JavaScript correctly?
4) Is my server code correct?
5) Am I passing the correct information between LANSA and the web page?

These questions are not in any particular order, just start with the one which you think is most likely the area which is malfunctioning. Often you will know right away which one is most likely causing you issues. Answering each of these questions requires a different approach.

Are my client side objects what I think they are?

When working with web applications, we often have to reference elements inside of your HTML document. E.g. you may need to grab a value from a TD element in a table or a value from an input field. However, one of the more difficult tasks is knowing that your Javascript/jQuery is referencing the correct object. If you are not already using jQuery to do your Javascript work, you have to start now! It tremendously simplifies your Javascript coding and makes your client side code very powerful. There are other Javascript frameworks around, but this is the one that I am most familiar with. Always try to reference your target fields via ID or Classes. This makes your jQuery code simpler. You can find information about jQuery here.
The tool of choice for me here is Firebug. If you are building a public website, you should be testing for multiple browsers. Likely Firefox will be one of those browsers. Firebug is a plugin for firefox, and makes interrogation of webpage elements and Javascript much easier. You can find information about Firebug here.
Start up Firefox and click on the firebug logo in the top right toolbar and select “On for All Web Pages”
Debugging with firebugNow load up your page and you should see a firebug panel at the bottom of your page. You can right-click on any element on your page and select “Inspect Element with Firebug” to review the HTML. It also allows you to review the JavaScript and will show any JavaScript error on the Console panel.
Our objective in this step is to ensure that your JavaScript is referencing to correct objects in your web page. E.g. you are not getting the output that you expect, and you think that your object is not being populated properly. 1) Click on the Console tab. This will allow you to see any JavaScript errors and your output from the next steps. 2) Type in a string that allows you to view your object. This is where the magic happens….when you are building your site, assign as many ID’s as you can to your HTML objects E.g. button’s and fields. If you cannot assign an ID, at least attach a class and make sure that it’s unique on the page (the exception is for repeating table entries). Once these objects have ID’s or Classes, you can reference them using the jQuery selectors. Type in the jQuery syntax (E.g. $(‘.myClass’) for a class or $(‘#myID’) for an ID) to select an object, and then you can use other jQuery commands on this object to make sure that the element that you are looking for in your web site code is the correct one. My example below shows the “Type” attribute on a button that has the class of “submit_button”, but I could have just as easily shown the value of a hidden text element. 3) Press the Run button, your output will be shown in the lower left window.
Use this technique to make sure that your onClick handler is attached to the right button, or that your handler is pulling the desired data from the right field, Etc.

Debugging with firebug

Some additional Tips:

  • You can use .parent(), .children(), .next(), .prev() to navigate around the HTML document….this is very useful in a table. E.g. $(‘input#name’).parent().next().html()
  • Straight Javascript code can be used and run in the bottom right window. This can be used to interrogate an array or any type of Javascript object.

In my next four Blog posts I will be highlighting a number of tools and techniques to help answer the following questions:

  • Is my client code correct?
  • Are my values stored in JavaScript correctly?
  • Is my server code correct?
  • Am I passing the correct information between LANSA and the web page?

Andy

LinkedIn
https://plus.google.com/+AndyBain
@jandybain