Eclipse 4 Tools: CSS Spy

Add this URL to your Eclipse Installation to reach this solution's update site.

Luna (4.4)

https://download.eclipse.org/e4/updates/0.16

Kepler (4.3)

https://download.eclipse.org/e4/updates/0.14

Juno (4.2, 3.8)

https://download.eclipse.org/e4/updates/0.13

Learn more...
Solution Description

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:

Additional Details

Eclipse Versions: Luna (4.4), Kepler (4.3), Juno (4.2, 3.8)

Platform Support: Windows, Mac, Linux/GTK

Organization Name: The Eclipse Foundation

Development Status: Beta

Date Created: Wednesday, June 27, 2012 - 11:11

License: EPL

Date Updated: Wednesday, December 14, 2022 - 09:47

Submitted by: Brian de Alwis

Screenshot
Date Ranking Installs Clickthroughs
July 2024 292/646 27 10
June 2024 258/681 57 28
May 2024 223/682 84 22
April 2024 242/687 73 12
March 2024 255/694 71 14
February 2024 272/687 54 10
January 2024 272/691 59 15
December 2023 253/671 64 10
November 2023 259/686 73 7
October 2023 63/673 759 11
September 2023 52/663 853 14
August 2023 54/673 753 10
View Data for all Listings

Unsuccessful Installs

Unsuccessful Installs in the last 7 Days: 0

Download last 500 errors (CSV)

Marketplace Drag to Install Button

By adding the following code below to your website you will be able to add an install button for Eclipse 4 Tools: CSS Spy.

HTML Code:

Markdown Syntax:

Output:

Drag to your running Eclipse* workspace. *Requires Eclipse Marketplace Client

Reviews Add new review

Is this plugin still maintained? It does not install in a recent Eclipse 4.8. It tried via marketplace, updatesite, etc. without luck.

Any idea or any alternative? I want to increase the enitre font-size of my eclipse (not only text editor). On my large-screen Eclipse is impossible to use without eagle-eyes that I fail to have.

BTW: Would be lovely if Eclipse would support such obvious things out of the box. Check google or stackoverflow to see that many users have issues with that.

This is the first time I'm trying out this tool.

When I open it with Alt+Shift+F5, the window and the two tabs (CSS/Scratchpad) appear, but the content of the tabs is empty.

Linux Fedora 21 w/ Gtk2.