blob: c25c46e1261c41a73068b8af7ee9420a63721642 [file] [log] [blame]
------
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.