DocsGitHub

Created by

Software Mansion

LiveView debugging made simple

See what’s happening inside your apps with LiveDebugger

Main features

See your LiveComponents tree

Explore your application’s structure at a glance. See how LiveComponents seamlessly fit together to shape your interface.

Inspect assigns

Check the data of any LiveView or LiveComponent in real time. Track state transitions and understand your data flow in real time.

Trace and filter callback executions

Follow lifecycle callbacks, measure execution time, and analyze performance. Filter events to see what really matters.

Inspect elements

Click on UI elements to reveal which component created them and instantly see how your full interface is structured.

See it in action

Debug case

Step 1

Explore your component structure

Quickly identify where issues originate by navigating your LiveView and component hierarchy.
Explore your component structure
Step 2

Inspect state in real time

Check the current state of affected components and see how it changes as you interact with your app.
Inspect state in real time
Step 3

Filter and focus on key callbacks

Apply filters to isolate the most relevant callbacks for faster debugging.
Filter and focus on key callbacks
Step 4

Observe state transitions and behavior

Watch how each callback impacts your component’s state and behavior.
Observe state transitions and behavior

Watch full video of this case

Getting started

Add live_debugger to your list of dependencies in mix.exs :

defp deps do [ {:live_debugger, "~> 0.5.0", only: :dev} ] end

Add a line to your application root layout. It attaches meta tag and LiveDebugger scripts.

# lib/my_app_web/components/layouts/root.html.heex <head> <%= Application.get_env(:live_debugger, :live_debugger_tags) %> </head>

After you start your application, LiveDebugger will be running at a default port http://localhost:4007.

LiveDebugger v0.5.0

What’s new

Highlights from the December 2025 update.

Improved asssigns inspections and tracking

The Assigns inspector is now faster, smoother, and lets you browse the full history of each assign, see exactly how values changed over time, pin important assigns to keep them always visible & inspect state size measurements to catch heavy structures early.

LiveView Resource Usage Page

We added an entirely new page that shows resource consumption of your LiveView processes. This is a simple way to keep track of how your LiveViews behave behind the scenes.

Async loading & Stream debugging

v0.5.0 brings support for even more LiveView features, like async assigns and stream operations. This gives you deeper insight into LiveView internals than ever before.

Dead LiveViews

LiveDebugger can now show recently crashed LiveViews, making debugging those tricky failure cases a whole lot easier.

Roadmap

Have a feature idea? Let us know!

or