JavaFX 2 debug css

Question

I am struggling with some css styling when working with JavaFX..

i wonder if there is any way to debug the css?

somthing like firebug or the build-in tool in chrome that show you when you press on an element what css styles applies to it.

Answer 1

Have a look on Scenic View to see does it meet your needs a bit at least.

Answer 2

In addition to using ScenicView as Uluk suggested, sometimes I also just dump the active nodes to the console after showing a Stage. This default toString() for the nodes lists their css ids and style classes.

// debugging routine to dump the scene graph.
public  static void dump(Node n) { dump(n, 0); }
private static void dump(Node n, int depth) {
  for (int i = 0; i < depth; i++) System.out.print("  ");
  System.out.println(n);
  if (n instanceof Parent) 
    for (Node c : ((Parent) n).getChildrenUnmodifiable()) 
      dump(c, depth + 1);
}

Sample output:

BorderPane@13c3750
  Text@2e3919[styleClass=lyric-text]
  Button[id=null, styleClass=button change-lyric]
    ButtonSkin[id=null, styleClass=button change-lyric]
      ImageView@13a4e73
      LabeledText@567aef[styleClass=text]

There is some undocumented internal api around css processing, but nothing public.

A request to make this api public is here: CSS Style Object Model in Java. You create a thing called a StyleMap and attach it to a node, which in effect creates a listener which records the css processing changes for the node occurring after you have added the StyleMap.

public void addStyleMaps(Node node, int depth) {
  node.impl_setStyleMap(FXCollections.observableMap(new HashMap<WritableValue, List<Style>>()));
  if (node instanceof Parent) {
    for (Node child : ((Parent) node).getChildrenUnmodifiable()) {
      addStyleMaps(child, depth + 1);
    }
  }
}

If you modify the dump routine above to =>

System.out.println(n + " " + node.impl_getStyleMap());

then the routine will also print out style changes since the stylemaps were added to the nodes.

Note the above call uses an impl_ api which is deprecated which can (and probably will) change in future JavaFX releases and will not have received the usage and testing support of the public api.

I think though, for this, you won't find it too useful until the mechanism is implemented into a graphical tool like ScenicView to interactively provide Firebug style css information. I don't think ScenicView is opensource yet and the internal css implementation is not publicly documented, so it may be difficult to create such a tool yourself.