JavaFX2调试css

Question

在使用JavaFX时，我正在努力处理一些css样式

我想知道是否有办法调试css

比如firebug或chrome中的内置工具，当你按下一个元素时，它会向你显示css样式适用于它

Answer 1

看看Scenic View，看看它是否至少能满足你的需求

Answer 2

除了按照Uluk的建议使用ScenicView之外，有时我还只是在显示一个阶段后将活动节点转储到控制台。节点的默认toString()列出了它们的css ID和样式类

// 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);
}

样本输出：

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]

在css处理方面有一些未记录的内部api，但没有公开

公开此api的请求如下：CSS Style Object Model in Java。创建一个名为样式图的东西，并将其附加到一个节点上，这实际上创建了一个侦听器，用于记录添加样式图后节点发生的css处理更改

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);
    }
  }
}

如果将上面的转储例程修改为=>

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

然后，该例程还将打印自样式映射添加到节点以来的样式更改

注意：上面的调用使用了一个不推荐使用的impl_uAPI，它在未来的JavaFX版本中可能会（也可能会）发生变化，并且不会得到公共api的使用和测试支持

不过，我认为，在将该机制实现为图形工具（如ScenicView）以交互方式提供Firebug样式的css信息之前，您不会觉得它太有用。我认为ScenicView还不是开源的，内部的css实现也没有公开的文档记录，所以自己创建这样的工具可能很困难