Eclipse 4 Tools: CSS Spy

The Eclipse 4 Application Platform now uses CSS for theming Eclipse-based applications. But debugging CSS can be painful. The Eclipse 4 team have created two tools to help: the CSS Spy and Scratchpad.

Note: with 0.13, the keyboard shortcuts for the CSS Spy and Scratchpad have changed to avoid conflicts on Windows and Linux. If you are upgrading the Spy or Scratchpad in an existing installation, the original keybindings will be left unchanged.

The CSS Spy (invoked using Shift-Alt-F5) allows examining the widget tree for the active shell. The Spy shows the widget tree for the current window, with the initial selection is set to the control under the cursor. For each widget, the spy shows the CSS class and CSS ids for the different widgets, the current CSS properties for that element, the computed properties that were actually applied to the element, and other useful information for CSS use. The property table is editable, so you can also change the CSS property for an element and see the effect immediately.

The CSS Scratchpad (invoked using Shift-Alt-F6) provides for iteratively refining CSS rules. Clicking on the "Apply" button causes the CSS to be "compiled" and applied to the active application.

The spy tools are from the Eclipse Platform incubator project (called "e4").

Note: 0.16 is only compatible with Eclipse Platform 4.4 (Luna). Previous versions can be installed from earlier Eclipse e4 update sites:

• e4 0.14 for Eclipse Platform 4.3 (Kepler): http://download.eclipse.org/e4/updates/0.14
• e4 0.13 for Eclipse Platform 4.2 (Juno): http://download.eclipse.org/e4/updates/0.13
• e4 0.12 for Eclipse Platform 4.1 (Indigo): http://download.eclipse.org/e4/updates/0.12