WaveMaker Visual AJAX Studio 4.0 Training Troubleshooting

2 Basic Troubleshooting Techniques ● We will do an overview of debugging techniques –Client Side Troubleshooting –Using Firebug Basics –Server Side Troubleshooting –Logging

3 Client Side Debugging ● It is recommend all developers use Firefox for development. –Generated applications can all be run in IE6, IE7 or FireFox –FireFox provides the best debugging and troubleshooting add-ons. ● Firebug for Firefox –Add-on Tool for FireFox –Allows you to edit, debug, and monitor CSS, HTML, and JavaScript live in any web page... ● What if you are not using Firefox? –Firebug Lite for non Firefox browsers – JavaScript file you can insert into your pages to simulate the Firebug console in browsers that are not named "Firefox". –

4 How to use Firebug ● Enable Firebug –Tools  Add-on’s –Enable ● Once enables a small image will appear in the lower right hand corner of the browser

5 How to use Firebug ● To open Firebug –Use or click on bug icon at the bottom of the browser window –Viewable in a window at the bottom of the browser –To open in a separate screen Click the

6 How to use the Firebug Console ● When client side errors the following will be displayed –Number of errors in the lower right corner –Java Script errors in red in the Firebug Console

7 How to use the Firebug Console ● Once the page loads clear the console. ● Click a button for example Search ● View the Console Log –Post: –Response

8 How to write to the Firebug Console ● Use console.log() to add debug statements to your custom java script and view the output in the console –Example: Check dataValues of a widget before it is inserted into a database –In the onClick event for a button add custom java script –When the code is executed the following will show up in the console

9 Using the Console command line ● Use the command line to: –View a java script object at runtime –Execute java script at runtime ● Common commands –app.main.editor1.getDataValue() –app.main.editor1: give you a pointer to the DOM node where you can inspect all of the widgets properties For more information on see community post:

10 What commands are available ● At the command line –app.main.widget then any function available for that widget ● How do you know what functions are available? Look in the DOM (Domain Object Model). A tree view of your page and all of the objects. –Take practice using the tree to find values and functions for a particular widget.

11 Using the Firebug Script Debugger ● Once the Script option in Firebug is selected –You can select the java script file you want to debug. –Most custom code is put into Main.js –Select any line in the java script file to set a break point –Run the application and use just as you would any other debugger.

12 Server Side Debugging ● Reviewing the log files –Logs are in /WaveMaker/Tomcat/logs –Generic Tomcat logs are saved by date –All stdout and stderr messages are written to the wm.log file

13 Changing Logging levels ● To change the level of detail written to the wm.log you can configure the log4j.properties to be more or less verbose ● Each project has it’s on log4j.properties file in the Projects/ProjectName/src directory ● The file can be edited with any text editor –Example: # log just the SQL #log4j.logger.org.hibernate.SQL=debug –Changing this logger from warn to debug will actually write the SQL being sent to the database out to wm.log ● For the changes to take affect you must redeploy the application or restart the WaveMaker Service

14 Questions?

15 Exercise 13 ● Test Run application using Firebug ● Review Console Messages ● Review the DOM information ● Editing the log4j.properties file ● Reviewing the wm.log file