Tool for debugging LiveView applications
764
stars
689
commits
Elixir
primary language
Sep 11, 2026
updated
README
LiveDebugger is a browser-based tool for debugging applications written in Phoenix LiveView - an Elixir library designed for building rich, interactive online experiences with server-rendered HTML.
Designed to enhance your development experience LiveDebugger gives you:
- π³ See your LiveComponents tree
- π View assigns
- π Trace and filter callback executions
- π¦ Inspect elements
If you want to learn LiveDebugger quickly, start with LiveDebugger Tour on GitHub. Or check out our comprehensive Features Overview to explore all capabilities in detail.
https://github.com/user-attachments/assets/317ab6ad-f9ac-48db-a010-dda5a7a23fd5
Getting started
[!IMPORTANT]
LiveDebugger should not be used on production - make sure that the dependency you've added is:devonly
Mix installation
Add live_debugger to your list of dependencies in mix.exs:
defp deps do
[
{:live_debugger, "~> 1.0.0", only: :dev}
]
end
For full experience we recommend adding below line to your application root layout. It attaches meta tag and LiveDebugger scripts in dev environment enabling browser features.
# 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.
Igniter installation
LiveDebugger has Igniter support - an alternative for standard mix installation. It'll automatically add LiveDebugger dependency and modify your root.html.heex after you use the below command.
mix igniter.install live_debugger
DevTools extension
Since version v0.2.0 you can install official LiveDebugger DevTools extension, giving you the ability to interact with its features alongside your application's runtime.
[!NOTE]
Ensure the main LiveDebugger dependency is added to your mix project, as the browser plugin alone is not enough.
Optional configuration
See Configuration Guide for details on how to customize LiveDebugger to your needs.
Contributing
For those planning to contribute to this project, you can run a dev version of the debugger with the following commands:
mix setup
iex -S mix
It'll run the application declared in the dev/ directory with the library installed.
LiveReload is working both for .ex files and static files, but if some styles don't show up, try using this command
mix assets.build:dev
For more information please look at CONTRIBUTING.md.
What's next
To learn about our upcoming plans and developments, please visit our discussion page.
Authors
LiveDebugger is created by Software Mansion.
Since 2012 Software Mansion is a software agency with experience in building web and mobile apps as well as complex multimedia solutions. We are Core React Native Contributors, Elixir ecosystem experts, and live streaming and broadcasting technologies specialists. We can help you build your next dream product β Hire us.
Copyright 2025, Software Mansion
Licensed under the Apache License, Version 2.0
Similar repos
Languages
Elixir
76.1%
TypeScript
11.9%
JavaScript
7.3%
Astro
2.1%
CSS
1.9%
Tool for debugging LiveView applications
764
stars
689
commits
Elixir
primary language
Sep 11, 2026
updated
README
LiveDebugger is a browser-based tool for debugging applications written in Phoenix LiveView - an Elixir library designed for building rich, interactive online experiences with server-rendered HTML.
Designed to enhance your development experience LiveDebugger gives you:
- π³ See your LiveComponents tree
- π View assigns
- π Trace and filter callback executions
- π¦ Inspect elements
If you want to learn LiveDebugger quickly, start with LiveDebugger Tour on GitHub. Or check out our comprehensive Features Overview to explore all capabilities in detail.
https://github.com/user-attachments/assets/317ab6ad-f9ac-48db-a010-dda5a7a23fd5
Getting started
[!IMPORTANT]
LiveDebugger should not be used on production - make sure that the dependency you've added is:devonly
Mix installation
Add live_debugger to your list of dependencies in mix.exs:
defp deps do
[
{:live_debugger, "~> 1.0.0", only: :dev}
]
end
For full experience we recommend adding below line to your application root layout. It attaches meta tag and LiveDebugger scripts in dev environment enabling browser features.
# 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.
Igniter installation
LiveDebugger has Igniter support - an alternative for standard mix installation. It'll automatically add LiveDebugger dependency and modify your root.html.heex after you use the below command.
mix igniter.install live_debugger
DevTools extension
Since version v0.2.0 you can install official LiveDebugger DevTools extension, giving you the ability to interact with its features alongside your application's runtime.
[!NOTE]
Ensure the main LiveDebugger dependency is added to your mix project, as the browser plugin alone is not enough.
Optional configuration
See Configuration Guide for details on how to customize LiveDebugger to your needs.
Contributing
For those planning to contribute to this project, you can run a dev version of the debugger with the following commands:
mix setup
iex -S mix
It'll run the application declared in the dev/ directory with the library installed.
LiveReload is working both for .ex files and static files, but if some styles don't show up, try using this command
mix assets.build:dev
For more information please look at CONTRIBUTING.md.
What's next
To learn about our upcoming plans and developments, please visit our discussion page.
Authors
LiveDebugger is created by Software Mansion.
Since 2012 Software Mansion is a software agency with experience in building web and mobile apps as well as complex multimedia solutions. We are Core React Native Contributors, Elixir ecosystem experts, and live streaming and broadcasting technologies specialists. We can help you build your next dream product β Hire us.
Copyright 2025, Software Mansion
Licensed under the Apache License, Version 2.0
Similar repos
Languages
Elixir
76.1%
TypeScript
11.9%
JavaScript
7.3%
Astro
2.1%
CSS
1.9%