| ------ |
| Ajax/DHTML Guide - Debugging |
| ------ |
| Jesse Kuhnert |
| ------ |
| 11 February 2007 |
| ------ |
| |
| Server Side Debugging |
| |
| There are of course a variety of debugging methods / options you can employ, but the easiest thing to do when getting going initially may |
| be to turn on two key logging categories in your logging configuration file of choice. This example shows how to turn on debugging using |
| log4j configurations: |
| |
| +----------------------------------------------------------- |
| log4j.rootLogger=DEBUG, A1 |
| |
| # A1 is set to be a ConsoleAppender. |
| log4j.appender.A1=org.apache.log4j.ConsoleAppender |
| |
| log4j.appender.A1.layout=org.apache.log4j.PatternLayout |
| log4j.appender.A1.layout.ConversionPattern=%c{1} [%p] %m%n |
| |
| log4j.logger.tapestry.globals.ResponseBuilder=DEBUG |
| log4j.logger.org.apache.tapestry.services.impl.DojoAjaxResponseBuilder=DEBUG |
| +----------------------------------------------------------- |
| |
| This simple configuration example should be enough to turn on an enormous amount of detail on the inner workings of the |
| {{{../apidocs/org/apache/tapestry/services/ResponseBuilder.html}ResponseBuilder}} service. The global |
| {{{../tapestry-framework/hivedoc/service/tapestry.globals.ResponseBuilder.html}tapestry.globals.ResponseBuilder}} hivemind service |
| should be a great place to apply the hivemind {{{http://hivemind.apache.org/hivemind1/hivemind/LoggingInterceptor.html}logging interceptor}} |
| service. An example of applying the logging interceptor would be: |
| |
| +---------------------------------------------------------------------------------- |
| <implementation service-id="tapestry.globals.ResponseBuilder"> |
| <interceptor service-id="hivemind.LoggingInterceptor" /> |
| </implementation> |
| +---------------------------------------------------------------------------------- |
| |
| Client Side Debugging |
| |
| First and foremost, if you don't have the {{{http://getfirebug.com/}FireBug}} firefox extension installed - {{{http://getfirebug.com/}get it now}}. Using |
| this plugin alone should give you a plethora of useful debugging information. Tapestry/Dojo also make good use of some of the core functionality exposed |
| by this plugin in client side debugging facilities, so there is even greater incentive to check it out. |
| |
| * Configuration |
| |
| The logging facilities employed on the client side work in much the same way as the standard log4j style logging semantics many people are used to. The options |
| for turning this kind of logging on / configuration can all be controlled through the {{{../components/general/shell.html}Shell}} or {{{../components/general/scriptincludes.html}ScriptIncludes}} components - |
| whichever you use in your projects. |
| |
| There are 3 core configuration parameters to these components that control the majority of logic here: |
| |
| * <<browserLogLevel>> - Sets the default browser based javascript log level to use to debug client side interactions. If you specify an html element id to |
| place the debug content it will be written there. Otherwise, the default is to write to an element with id "debug", or append to the |
| document body if none exists. |
| |
| See the dojo docs for more information about logging, but the basic idea is that you can write statements like <<<dojo.log.info("Doing some operation");>>> |
| in javascript and have them appropriately filtered based on the log level. |
| |
| * <<debugEnabled>> - Turns browser level logging completely on/off. |
| |
| * <<consoleEnabled>> - Enables/disables the <<<dojo.debug.console>>> functionality which should redirect most logging messages to your browsers javascript console <(if it supports one)>. |
| |
| The debug console is disabled by default. Currently known supported browsers are FireFox<(having FireBug extension helps a great deal)>/Opera/Safari. |
| |
| * Sample |
| |
| Following is a sample screenshot of the kind of debugging statements you'll find in debug mode from the {{{../demos.html}TimeTracker demo}}. |
| |
| [../images/ajax-firebug.png] Sample firebug output with console debugging enabled. |