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!

38 Likes

Looks very promising to me. I had a look at it a week ago after it was mentioned in the Thinking Elixir podcast

3 Likes

Check out our new blog post about LiveDebugger with a detailed introduction and list of upcoming features! :rocket:

https://medium.com/swmansion/introduction-to-livedebugger-a-tool-for-debugging-phoenix-liveview-apps-bf7e56ab00fb

5 Likes

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!

6 Likes

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

7 Likes

LiveDebugger v0.2.0 is out! :rocket:
I’m happy to share that today, we released LiveDebugger v0.2.0. This version includes a set of features that we hope will have a big positive impact on your developer experience, such as component highlighting or support for the Chrome DevTools extension.

Also, we’ve already defined the scope for v0.3.0 - check our roadmap for details.

If you have any questions, ideas, or bug reports, feel free to create an issue, create a new thread on discussions, or write to us on the LiveDebugger channel on elixir-lang Slack.

https://blog.swmansion.com/whats-new-in-livedebugger-v0-2-0-4543d3af5486

3 Likes

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!

8 Likes

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

6 Likes

Can you expand on this point?

Does it help with debugging LV crash loops for example? I find it hard currently to use LiveDebugger when there is a LV crash loops because I cannot click the debugger button.

In LiveDebugger we are tracing LiveView processes and when there is a crash or navigate, then the process dies and new one is taking its place. In 0.4.0 we’ve improved the system of finding “successor” process and it should give you overall a better experience.

Regarding debugging endless loops remember that you can open LiveDebugger in a separate window (port defaults to 4007 so it should be localhost:4007). Nevertheless if the reloads are fast then the ActiveLiveViews page is also reloading since the refresh is triggered on new LiveView process being born.

We will look more into “endless crash reload” debugging and how to improve it.
Thank you for your feedback

1 Like

Dear LiveDebugger users!

We’ve got a tiny favor to ask - could you take a minute to fill out this short survey?
It’s all about how you use LiveDebugger and what we can do to make it better :rocket:

Thanks in advance for your time and input! :folded_hands:

2 Likes

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

6 Likes