SWT Spy - debugging SWT layouts

Do you have to debug an existing SWT view and you are not sure what elements are really on screen? Are you tired of manually coloring composites to find out what’s wrong in your layout?

It is time to remember an oldie but goodie: The SWT spy!

It is a fairly old tool, but still very useful, so let us have a quick look.

Spy can augment a running tool and provide valuable information to debug any SWT application. This can be the IDE in case you are a plugin developer or any RCP or Eclipse 4 application. You can get SWT spy from this location.

Either add it to your target platform or directly install it into your IDE.

In case you install SWT spy into the IDE, you can open it by pressing:

SHIFT+CTRL+ALT+F9

If you would like to use SWT spy in a custom application, you need to include the bundle “org.eclipse.tools.layout.spy” into your product. To trigger the spy, there are two options:

1. If you run on the compatibility layer (3.x), the key binding will also work
2. If you are running on Eclipse 4, you can embed the following code to open the SWT spy window:

final LayoutSpyDialog popupDialog = new LayoutSpyDialog(shell);
popupDialog.open();

The SWT spy will open as a separate dialog, which is connected to the running application. It allows for the inspection of any SWT element with a focus on layout information. To navigate you can either browse the hierarchy or directly jump to an element. The hierarchy is shown as a list on the left side. By double clicking on an element within the current container you will walk down the SWT widget tree, the button on the top left corner will send you one level up. To jump to a specific element, click the button “Select Control” and hover over any element in the running application. A yellow border will help you with the selection. If you check the option “Show overlay”, SWT spy will draw a yellow border around the currently selected element.

The text field on the right side shows the layout data of the current parent composite. If you select an element on the left, you see its layout data in the text field below. This is very helpful to debug layouts. Furthermore, you can use existing layouts as a template. The SWT spy directly shows you how to create the layout data for a selected element, e.g.

GridDataFactory.fillDefaults()
    .grab(true, false)
    .align(SWT.FILL, SWT.BEGINNING)
    .minSize(0, 0)
    .hint(107, SWT.DEFAULT)

During our work on EMF Forms, we often develop or adapt renderers. The goal of EMF Forms is to ease the creation of forms, especially concerning the layout. However, before this can happen, you must first create a renderer which will take care of the layout for you. EMF Forms ships with default layouts, but you might want to adapt them.

When debugging the layout of a combination of renderers, it is often helpful to visualize all elements, which are on screen. Sometimes, elements are not visible (e.g. composites) or have the same background color as their parent. For this purpose, the SWT spy allows you to color controls. If you check the option “Color controls …”, the spy will assign different background colors to each level in your widgets tree. This looks ugly, but is helpful in finding hidden composites or to see how much space certain elements occupy.