JavaFX 2调试css

Question

在使用JavaFX时，我遇到了一些css样式的问题。

我想知道是否有任何方法可以调试css？

像firebug或者chrome内置的工具，当你按下一个元素时，它会显示什么css样式应用于它。

Answer 1

在Scenic View上看一下，看看它是否至少满足了你的需求。

Answer 2

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

// 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，但没有公开的东西。

公开这个接口的请求在这里：CSS Style Object Model in Java。您创建了一个名为StyleMap的东西，并将其附加到一个节点上，这实际上创建了一个侦听器，该侦听器记录了在添加StyleMap之后对节点所做的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_应用程序接口，该应用程序接口可能(并且可能会)在未来的JavaFX版本中更改，并且将不会获得公共应用程序接口的用法和测试支持。

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