JavaFX 2调试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的请求在这里：Java中的CSS样式对象模型。您创建了一个称为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_ api，该API可以（并且可能会）在将来的JavaFX版本中进行更改，并且不会获得公共api的使用和测试支持。

我认为，为此，您不会发现它很有用，除非将该机制实施到诸如ScenicView之类的图形工具中以交互方式提供Firebug样式的CSS信息。我认为ScenicView尚不是开源的，并且内部css的实现未公开记录，因此您可能很难创建这样的工具。