---
name: johannesrabauer/javafx-devtools-inspection-debugging
source: https://app.decimal.ai/s/johannesrabauer-javafx-devtools-inspection-debugging@1/SKILL.md
source_sha256: 2a97ffe558de
---

# JavaFX Devtools, Inspection, and Debugging

Use this skill when the problem is understanding what the UI is doing: layout issues, CSS
application, live scene-graph state, reducer events, thread diagnostics, or development-only
debugging overlays.

## Example

```java
import javafx.scene.control.Label;
import javafx.scene.input.KeyCode;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.StackPane;

public class InspectableView extends StackPane {

    public InspectableView() {
        var root = new BorderPane(new Label("Press F12"));
        var overlay = new Label("Debug overlay");
        overlay.setVisible(false);
        overlay.setManaged(false);

        setOnKeyPressed(event -> {
            if (event.getCode() == KeyCode.F12) {
                overlay.setVisible(!overlay.isVisible());
            }
        });

        getChildren().addAll(root, overlay);
        setFocusTraversable(true);
    }
}
```

## Setup notes

- Use tools such as Scenic View, CssFX, Scene Builder, browser debuggers, or custom overlays to
  shorten feedback loops during UI work.
- Keep development-only tools behind build flags, shortcuts, or explicit environment checks.
- If the app uses reducer or event-stream state, expose a focused debug surface for actions and state changes.

## Gotchas

- Diagnostic helpers should not leak into production unintentionally.
- CSS issues are often easier to solve with live inspection than by guessing selector precedence.
- Debug surfaces must stay read-mostly unless the product explicitly supports live editing tools.