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

:
public

: protected

: default (package)
Custom renderings
DoodleDebug provides two ways to define custom renderings:
- Implementing the
Doodleable
interface ↓
- Providing a
RenderingPlugin
↓
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.
- Create a class
House
containing
several Room
objects as fields.
- Let
House
implement the Doodleable
interface and find useful
implementations for its doodleOn
and summarizeOn
methods.
- 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:
- Types to render using this plugin
- How to render those objects
- CSS
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:
- Arrays
- java.lang.Boolean
- java.lang.Class
- java.util.Collection
- java.awt.Color
- java.awt.Image
- javax.swing.ImageIcon
- java.util.Iterator
- java.util.Map
- java.lang.String
- Tables and Matrices: 2-dimensional Collections and Arrays
- java.lang.Throwable (Errors & Exceptions)