You have several options at hand when it comes to debugging a qooxdoo application.

qx.log.*

qx.io.Json.stringify()

qx.dev.Debug()

Included in the latter is qx.dev.Debug.debugObject() which will print out a complete recursive hierarchy (or up to some max level) of an object.

This is taken from a firebug interactive session:

>>> var myTest = {a:1, b:[2,3], c:4}
>>> qx.dev.Debug.debugObject(myTest)
1665905: Object, count=3:
------------------------------------------------------------
a: 1
b: Array
 0: 2
 1: 3
c: 4
==================================

Setting qx.disposerDebugLevel

Setting qx.ioRemoteDebug

Setting qx.ioRemoteDebugData

Some browser-specific tools allow for a powerful and often convenient way of debugging applications.

These are helpful idioms you might want to include in your code, i.e. you use them at programming time.

With this.debug() you can print out any string you want to see in the console during execution of your application. Of course you might want to interpolate variable values in the output. If you pass an entire object reference, the whole object will by stringyfied and printed. So beware: for big objects you get the entire instantiation in code printed out!

Example:

this.debug("I found this value for myVar: "+myVar);

In contrast to this.debug(), if you pass an object reference to console.log() Firebug will provide you with a nice hyperlink to the live object which you can follow to inspect the object in a structured way. This is much easier to navigate than to skim through pages of source output.

Example:

var b = new qx.ui.form.Button();
console.log(b);

Will log the current stack trace using the defined logger. This can be useful to inspect from which method the current function was called.

Example:

this.printStackTrace() 

qx.log.MLogging printStackTrace

This section shows you how to access objects of your application at run time, i.e. while it executes. Access to those objects is possible through JavaScript, either in the form of another piece of JavaScript code, or - especially interesting for debugging - from an interactive shell, like Firebug or Venkman, that allows for interactive input and execution of JavaScript commands.

In your running app, the singlton Init object provides you with the getApplication() method, to access the root object of your application. All members and sub-members that you have attached to your application class in your code are accessible this way.

Example:

qx.core.Init.getInstance().getApplication()

The ClientDocument singlton is the top-level container for your application widgets, i.e. visual elements derived from qx.ui.core.Widget. getInstance() returns the ClientDocument instance. Widgets attached with the addToDocument() method show up in the child array of this instance. This is usually true for your top-level GUI class, but also for menus, tooltips, etc. Inspect the elements of the array with the instanceof operator to find your top-level GUI object.

Example:

qx.ui.core.ClientDocument.getInstance().getChildren()[1].name

During runtime qooxdoo maintains a database of all instantiated qooxdoo objects. This object registry can be accessed under the live path qx.core.Object.__db. The __db member is an array that holds references to all living objects. If you know the value of the __dbKey member of the object you are interested in, you can use this as an index into the __db array to get quick access to your object. You can now inspect attribute values or call methods on the selected object.

Example:

qx.core.Object.__db[147].pushMe()

Getting at your application objects fast is a common requirement when debugging. A useful idiom (or usage pattern) with Firebug is to press the “Inspect” button and select the visible page element you are interested in. This will take Firebug to its HTML tab in a split-pane view. The left side holds the HTML code underlying your selection (which is probably not very enlightening). The right side though has a “DOM“ tab, among others. Selecting this will show a display of the underlying DOM node, which features a qx_Widget attribute. This attribute is added to the outermost HTML tag representing a qooxdoo widget. For complex widgets that are made up of nested HTML elements, make sure to select the outermost container node that actually has this attribute qx_Widget. It takes you straight to the qooxdoo object associated with the selected DOM node.

Example:

Inspect -> Web page element -> HTML tab -> right side -> DOM tab -> qx_Widget link

Firebug Lite is a lightweight version of Firebug and can be deployed accross various browsers; it is not limited to Firefox.

Here are the steps to to use Firebug Lite with qooxdoo applications:

• download Firebug Lite from the Firebug homepage. This page has also the basic install and usage information.
• place the contents of the archive in a path that is accessible from the HTML page you want to debug, e.g. under /srv/www/htdocs/
  • in our experience you have to patch the current Firebug Lite script (1.0-b1), in order to work seamlessly with a qooxdoo application in IE: locate the line in firebug.js that says consoleFrame.style.position = “fixed”; and change it to consoleFrame.style.position = “absolute”;
• include the Firebug Lite script in the HTML page you want to debug, typically the notorious index.html of your qooxdoo application:

<script language="javascript" type="text/javascript" 
            src="/firebug/firebug.js"></script>

• load the page in your browser
• hit F12 to open the console; alternatively, you can use <html debug=”true”> in your HTML page to have the console opened automatically
• console.log messages from your application will show up; you have a console input line as in Firebug that allows you to execute arbitrary JavaScript code (reachable usually through Ctrl-Shift-L); there is no command history

Unfortunately, the documentation that comes with Firebug Lite does not give a complete list of available API functions. Therefore, we have compiled it here. All commands are methods of the console object:

• log/debug/info/warn/error(msg) – logging to the console, with various decorations
• assert(bool,msg) – log depending on boolean value
• dir(obj) – show attributes of object
• dirxml(node) – show XML structure of DOM node
• group() – indent all following console output
• groupEnd() – dedent all following console output
• time(name) – start timer identified by name
• timeEnd(name) – end timer and display milliseconds since start

• make sure that your main application has the focus when you work with Firebug Lite shortcut keys, e.g. do not click into embedded iframes before hitting F12
• dir()/dirxml() might not produce any output if it would be too complicated.