DoodleDebug tutorial

Contents:

Visualize an object

DoodleDebug's usage works similar to System.out.println() , just type
Doo.dle(object);
anywhere in your code to visualize Object object at this point of execution.
Use java template shortcuts doodle or dd and hit Ctrl + Space , so eclipse will complete it to Doo.dle(); for you.
To visualize multiple objects beside each other on the same tile, use multiple arguments (varargs): Doo.dle(object1, object2, ...)
Create an Array of Color objects and render it using Doo.dle(array) .

Navigation

Use keys j and k to navigate to the next or the last doodled object, respectively.
Some objects inside the doodled ones are clickable, this can be seen from their fine shadow and their color changing to blue when hovering them with the cursor. As they are clicked, a more detailed rendering is doodled into a lightbox, which can contain clickables itself. This mechanism allows users to inspect their objects in a arbitrary deep manner. To navigate back out, breadcrumbs are displayed at top of the lightbox, or, if desired, the lightbox can be fully closed by clicking in the dark background beside it.

Built-in and standard renderings

DoodleDebug includes numerous predefined renderings for commonly used data types like collections, arrays, colors etc., but also for reflection types like classes. If an object should be rendered and neither the user provides custom renderings nor a built-in rendering fits any of the object's types, the following standard rendering procedure is used:
If the object has a maximum of 7 non-static fields, it's visualization is a listing of all it's non-static fields. If there are more than 7, the object's toString() method is used in order to safe space in the output window.
If you want DoodleDebug to use the field visualization anyway, you can simply let your object implement the FieldDoodler interface.

Meaning of field renderings

From a field's visualization, a programmer can see its scope, declared variable name and, of course, its content. Scope modifiers are visualize with a sign in UML style and color for faster perception.
Private scope: private
Public scope: public
Protected scope: protected
Default scope: default (package)

DoodleDebug rendering pipeline (click to show/hide)

Custom renderings

DoodleDebug provides two ways to define custom renderings: Doodleables are easy and fast to implement, but provide only a simple API, whereas RenderingPlugins leave room for any rendering an individual developer desires, still preserving the modularity of DoodleDebug.

Define rendering of an object type directly in its class (Doodleables)

Implement the interface Doodleable , which contains the methods doodleOn(DoodleCanvas c) and summarizeOn(DoodleCanvas c) , so DoodleDebug will automatically use those methods for rendering.
DoodleCanvas uses a (virtual) cursor-like navigation and provides the following methods:
c.draw(Object o) : Render an object (e.g. a field of this object) at the current cursor position.
c.newLine() : Jump to a new line with the virtual cursor, staying in the same column.
c.newColumn() : Jump to a new column with the virtual cursor, i.e. create a new column on the right side of the last one.
  1. Create a class House containing several Room objects as fields.
  2. Let House implement the Doodleable interface and find useful implementations for its doodleOn and summarizeOn methods.
  3. Check your work by creating an instance of House and calling Doo.dle(house).

Create custom RenderingPlugins

DoodleDebug comes with a plug-in structure for software developers to define renderings for their frequently used data types without having to modify the type's source code itself. A RenderingPlugin basically contains following information:
Inherit from AbstractPlugin to define your own plugins.
The methods render(Object, Tag) and renderSimplified(Object, Tag) from the interface Rendering receive the object to be rendered and a HTML tag. The provided tag object refers to Java HTML generator, a simple hierarchically organized HTML framework, slightly modified for some more convenience. Users can generate HTML code and put it into this provided tag, the generated HTML code will directly be used by DoodleDebug, without an more modification.

Dynamical sub-rendering and clickable objects

In order to dynamically render other objects into user-made renderings, the class DoodleRenderer provides a static method
DoodleRenderer.renderInto(Object o, Tag tag, boolean showClassName)
which automatically renders the desired object into the given tag and makes it clickable/inspectable in the rendering output.

List of built-in type renderings

The following data types already have predefined (non-default) renderings in DoodleDebug: