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

Install optional browser extension

LiveDebugger v0.7.0

What’s new

Highlights from the February 2026 update.

Direct Source Code Navigation

Jump straight from the Node Inspector to the exact line where your LiveView is defined. A simple shortcut that cuts out the guesswork of finding specific components in your file tree.

Trace Isolation & Filtering

Use the new component tree to isolate specific nodes within Global Traces. Easily filter out background noise to focus only on the interactions that matter for your current session.

Tree Structure for Nested LiveViews

Replaced the flat list with a proper hierarchical Tree Structure for Active LiveViews, making navigation through complex, multi-layered apps feel completely natural and intuitive.

Stability & Workflow Improvements

Dozens of smaller fixes and optimizations to ensure a rock-solid debugging experience.

Roadmap

Have a feature idea? Let us know!

or