Breeze.Inspector (Breeze v0.4.0)

Copy Markdown View Source

Built-in developer inspector for Breeze applications.

The inspector captures the rendered element tree and exposes layout, style, focus, implicit state, theme, and fragment information while an application is running.

Enabling the inspector

Pass :inspector when starting a Breeze application:

Breeze.Server.start_link(
  view: MyApp.View,
  inspector: true,
  mouse: [mode: :motion]
)

The local inspector uses F4 to toggle its overlay and PageUp to move the panel between the bottom and top of the terminal. With mouse tracking enabled, hovering highlights an element and clicking selects it. Repeated clicks cycle through overlapping targets.

Inspector options can customize the keys or keep snapshots local:

inspector: [toggle_key: "F9", move_key: "F10", remote: false]

The supported options are:

  • :toggle_key - key used to show or hide the inspector. Defaults to "F4".
  • :move_key - key used to move the local panel. Defaults to "PageUp".
  • :remote - publishes snapshots for the remote inspector. Defaults to true.

Available information

The inspector reports:

  • rendered and source-oriented component trees;
  • element IDs, component metadata, classes, resolved styles, and colors;
  • viewport bounds, content dimensions, padding, and scroll offsets;
  • the active focus scope, focus path, focusable elements, and focus memory;
  • implicit modules, state, metadata, and capture configuration;
  • rendered fragment previews, theme details, and application logs.

Remote inspector

Applications publish inspector snapshots remotely by default. Start the inspector UI in another shell:

mix breeze.inspector

To connect to a specific distributed Erlang node, pass its name:

mix breeze.inspector --connect app@host

When remote inspection is enabled and :logger is not configured explicitly, Breeze attaches its log collector so the remote inspector can display application logs without replacing existing handlers.

Programmatic access

Use Breeze.Server.Diagnostics.inspector_snapshot/1 to read the latest snapshot or Breeze.Server.Diagnostics.subscribe_inspector/2 to receive updates. The functions in this module operate on internal server state and are not part of the public inspector API.