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".

– http://www.getfirebug.com/lite.html

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 <F12> 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: http://dev.wavemaker.com/forums/?q=node/1316

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 <installDirectory>/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