View Source LiveInspect (live_inspect v0.1.1)

Inspect LiveView assigns directly in the browser.

installation

Installation

LiveInspect is a developer tool that should never be used in a production environment, so be sure to specify the :only option when adding it to your deps in mix.exs:

def deps do
  [
    {:live_inspect, "~> 0.1.0", only: :dev}
  ]
end

Then, import LiveInspect.live_inspect/1 into the generated Phoenix helpers:

# lib/my_app_web.ex
defmodule MyAppWeb do
  def live_view do
    quote do
      # ...generated code...

      unquote(live_inspect())
    end
  end

  def live_component do
    quote do
      # ...generated code...

      unquote(live_inspect())
    end
  end

  defp live_inspect do
    if Mix.env() == :dev do
      quote do
        import LiveInspect, only: [live_inspect: 1]
      end
    end
  end
end

usage

Usage

Just call the live_inspect/1 function component with any values to examine.

<.live_inspect my_assign={@my_assign} my_other_assign={@my_other_assign} />

All assigns can be inspected at once, e.g.

<.live_inspect {assigns} />

configuration

Configuration

# Default configuration
config :live_inspect, theme: LiveInspect.Theme.Light

themes

Themes

The styling of the inspector is controlled via themes. Two themes are provided with the library:

See LiveInspect.Theme to implement a custom theme.

Link to this section Summary

Functions

Function component wrapper for the LiveInspect.Inspector component.

Link to this section Functions

Function component wrapper for the LiveInspect.Inspector component.

example

Example

<.live_inspect my_assign={@my_assign} my_other_assign={@my_other_assign} />

attributes

Attributes

All other assigns are put into a map and passed as the value attribute to LiveInspect.Inspector.