kraleppa

kraleppa

LiveDebugger - tool for debugging LiveView apps

I’m happy to announce LiveDebugger v0.1.0! :mega:

LiveDebugger is a browser-based tool for debugging LiveView applications, designed to enhance your development experience. It gives you:

  • :deciduous_tree: A detailed view of your LiveComponents tree
  • :mag: The ability to inspect assigns for LiveViews and LiveComponents
  • :link: Tracing of their callback executions

The idea for LiveDebugger came up while developing a large-scale LiveView application for a client - we faced some challenges in tracking state changes and component interactions.

We plan to continue developing LiveDebugger, with new features like highlighting LiveComponents on the way. We’d love your feedback to help improve this tool for everyone!

https://github.com/software-mansion/live-debugger

Most Liked

kraleppa

kraleppa

LiveDebugger v0.3.0 Released! :rocket:

The newest version of LiveDebugger is here, packed with powerful new features:

  • Global Callback Traces: Get a comprehensive view of your components interactions.
  • Callback Execution Time: Identify and optimize performance bottlenecks.
  • Improved Debugging for Redirects and Errors: Troubleshoot with ease.
  • Firefox Extension Support: Broaden your debugging capabilities across more browsers.

:backhand_index_pointing_right: Check our roadmap for what’s coming next and join the LiveDebugger channel on elixir-lang Slack for support and feedback.

Happy debugging!

kraleppa

kraleppa

Catch the second sneak peek of the upcoming LiveDebugger v0.2.0 features :rocket:

In this video you will see how we implemented callbacks filtering and brand new dark mode

kraleppa

kraleppa

Check out the first sneak peek of upcoming features in LiveDebugger v0.2.0 :hammer_and_wrench:

In this version, we plan to release features that will make your life much easier, including component highlighting and an option to run LiveDebugger in Chrome DevTools.

The second sneak peek will be published next week, and we will show you new callback filters and dark mode.

LiveDebugger v0.2.0 will be published in early May. Stay tuned for more!

kraleppa

kraleppa

LiveDebugger v0.4.0 is here :tada:

In this release we focused on refactor and made some big changes to the code architecture that will speed up future development. Besides that we added a set of new features:
:man_detective: Inspect mode
:magnifying_glass_tilted_left: Phrase searching in callback traces
:sparkles: Smoother debugging across reloads & errors

https://youtu.be/UxCUEC4Op6A

Our repo: https://github.com/software-mansion/live-debugger

kraleppa

kraleppa

LiveDebugger Survey Results & Next Steps

Hi everyone :waving_hand:

We recently ran a community survey about LiveDebugger and gathered some really valuable insights. Below are results, a summary of the key findings and our proposed action points moving forward.

:bar_chart: Results

You can find the results here

:warning: Current Issues with LiveDebugger

While the community clearly sees LiveDebugger as a helpful tool, the survey surfaced several recurring challenges that we need to address before moving forward with more advanced features.

Performance and stability remain top concerns

Many users noted that LiveDebugger can feel slow, especially when inspecting large assigns or working in more complex projects. In these cases, the debugging workflow becomes harder rather than easier. Improving efficiency and responsiveness is essential to make LiveDebugger a tool that can be relied on day-to-day.

Core features need refinement

Assigns inspection is by far the most widely used feature, but it also drew the most requests for improvement. Users want more control and flexibility e.g. the ability to search through assigns #320, keep nested structures open, or track specific values over time #740.

Similarly, requests for visibility into stateless components #349 show that developers want a clearer, more consistent view of their application’s state. Callback tracing works well overall, but a few respondents pointed out small quality-of-life improvements that could make it smoother to use, like starting callback tracing automatically #741.

Gaps in user experience

Some feedback highlighted UX issues that, while small in scope, can have a big impact on usability. Examples include the visibility of the debug button #742 or occasional instability in browser extensions. Even if these don’t block adoption, they add friction and should be smoothed out.

:sparkles: Requested Features and Priorities

The results esults give us a clear direction of travel: strengthen the foundations (assigns, performance, memory tracking) while gradually layering in deeper debugging capabilities.

Top priority

  • Assigns improvements:
    • phrase searching #320
    • tracking specific values #740
    • keeping nested structures open #740
  • Stateless components in the tree - requested by multiple developers who want a more complete picture of their LiveView hierarchy #349

High priority features

  • Memory usage tracking for each LiveView – to better understand and debug resource consumption #464
  • Better performance insights – tools to measure and optimize LiveView responsiveness #464
  • Custom events to LiveViews/LiveComponents – opening new possibilities for testing and simulating user flows #345

Medium priority features

  • Better support for:
    • streams #403
    • async loading #404
    • and temporary assigns #575

Lower priority features

  • Running LiveDebugger in production #218
  • Integration with MCP #219
  • Integration with VSCode #702
  • Simulating unreliable connections or broken handlers #743

:magnifying_glass_tilted_left: Other takeaways

Beyond performance and feature requests, the survey also revealed some broader insights about how LiveDebugger is being used today.

LiveView version adoption

Almost everyone is already on LiveView 1.0 or newer, which means we can begin phasing out support for older versions without impacting most users.

Web-first usage pattern

The majority use LiveDebugger directly in the browser. While extensions are still in use, they are clearly secondary, suggesting that a web-first, extension-second strategy aligns well with how the community works.

Comparisons to React DevTools

A few respondents wished LiveDebugger behaved more like React DevTools (e.g. native UI). While this feedback is noted, the main priority remains strengthening the plugin-free, browser-based experience.

Documentation and tutorials for beginners

A few respondents with less LiveView experience noted that a lack of tutorials and guides makes adoption harder. This reinforces the plan to create a dedicated landing page with example projects, step-by-step guides, and tutorials.

:folded_hands: Thank You

We want to sincerely thank everyone who took the time to share their feedback in the survey. Your input is invaluable in helping us prioritize improvements and shape the future of LiveDebugger. The community’s insights guide our roadmap and ensure we focus on the features and refinements that matter most.

:rocket: Next Steps

You can check out the scope for upcoming releases v0.5.0 and v0.6.0 here.
These versions will focus on stabilizing core features, improving performance, and refining the debugging workflow.

Looking further ahead, our goal is to reach v1.0.0, where we plan to provide all the key features developers expect, with solid performance and reliability. Some of the requested enhancements and lower-priority features will be implemented after v1.0.0, as our immediate focus is on ensuring a strong and stable foundation.

We’re excited about the direction LiveDebugger is heading and can’t wait to continue building a tool that makes debugging LiveView applications faster, clearer, and more enjoyable.

Happy debugging!
Krzysztof

Where Next?

Popular in Announcing Top

zachdaniel
Hey folks! AshEvents Release We’ve just released the first version of AshEvents, an Event Sourcing tool for Ash Framework apps. Check o...
New
phcurado
Zoi is a new schema validation library for Elixir. It’s inspired by Zod from the JavaScript ecosystem, bringing a similar functional API...
New
wkirschbaum
Hi everyone. We released Spreadsheet a couple of months ago which we have been using internally for parsing xlsx files internally for our...
New
kip
ex_cldr provides localisation and internationalisation support based upon the data from the Unicode CLDR project. Unicode released CLDR ...
395 12072 119
New
sonic182
Hi everyone, at Doofinder we have been building llm_composer for some new apps, and we thought it could be useful to share it with the co...
New
fuelen
Hi all! Confispex is a tool which allows defining specs for runtime configuration, cast values according to specified types and inspect ...
New
mikehostetler
Hey everyone! I’m excited to share ReqLLM - a new approach to LLM interactions in Elixir that I’ve been working on. After building agent...
New
LostKobrakai
I’ve recently created a small library phoenix_vite integrating the vite build tooling with phoenix. It provides an igniter.installer t...
New
Mati365
Phoenix has great tooling overall, but one thing that’s still lacking is a solid, plug-and-play integration with a modern WYSIWYG editor....
New
sevensidedmarble
Announcing Live Toast: a replacement toast/flash component for Phoenix LiveView, heavily inspired by the look of Sonner (the amazing toas...
New

Other popular topics Top

JDanielMartinez
Hi! May someone helps me, please! I have two apps into an umbrella project: the first one is Database, which manages queries, and the se...
New
ycv005
I have followed this StackOverflow post to install the specific version of Erlang. And When I am running mix ecto.setup then getting fol...
New
polypush135
As many of you may have realized by now (sorry for all the posts here) I’ve been working on a db problem where I’m trying to aggregate a ...
New
freewebwithme
Using vs code and installed ElixirLS: support and debugger. And I got an error popped up on start up says Failed to run ‘elixir’ comma...
New
danschultzer
None of the current solutions worked well for me, so I went ahead and built a user management system from scratch. This project took far...
548 27727 240
New
aadeshere1
I have a another noob question about loop. Since elixir is immutable, while loop is not directly possible. total = 10 while total != 0 ...
New
stefanluptak
Hello everybody, usually, I use a 29" ultra-wide monitor for VSCode which can easily accomodate explorer (files panel) + file with code ...
New
electic
Hi, I am new to Elixir. I am trying to use the DateTime component to insert a date into MySQL however the there seems to be no way to fo...
New
AstonJ
by Lance Halvorsen Elixir and Phoenix are generating tremendous excitement as an unbeatable platform for building modern web application...
460 27162 124
New
lanycrost
Hi everyone! I need implement if…else if…else condition from my elixir code, and anymore of this control flow structures not work proper...
New

We're in Beta

About us Mission Statement