# Javafx Devtools Inspection Debugging

> Improve JavaFX development with scene inspection, CSS debugging, state-devtools, and diagnostic overlays.

- Skill: `johannesrabauer/javafx-devtools-inspection-debugging` (Agent Skill)
- Install (CLI): `npx skillmds@latest add johannesrabauer/javafx-devtools-inspection-debugging`
- Raw SKILL.md: https://api.skillmd.com/api/skills/johannesrabauer/javafx-devtools-inspection-debugging/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: JohannesRabauer (https://skillmd.com/u/johannesrabauer)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/johannesrabauer/javafx-devtools-inspection-debugging

---


# 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.