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

mspanc
I am pleased to announce an initial release of the Membrane Framework - an Elixir-based framework with special focus on processing multim...
New
kasvith
Hello Everyone, I was working with some HTML-to-Markdown libraries and ran into a few issues when converting a complex markup file to Ma...
New
New
mindreframer
ElixirProto: Protobuf-Inspired Serialization for Elixir Events I wanted to have an Elixir-native serialization for events, that also supp...
New
jallum
Turbopuffer - Elixir client for vector and full-text search I’m excited to share Turbopuffer, a new Elixir client library for the Turbop...
New
mudspot
Hi folks, I’d like to announce the release of Prometheus Agents, a set of subagents for Claude Code that cater to the Elixir Phoenix pro...
New
lud
Hello! I’ve been working on the Oaskit library for a while now, and just released a first version. Since I’ve built JSV I wanted to be ...
New
type1fool
WebAuthnLiveComponent WebAuthnComponents See this post about renaming the package. Passwordless authentication for Phoenix LiveView app...
New
murrgelb
Efx is a library to define and test side effects declaratively. It is basically a very focused mocking framework, reducing implementation...
New
brainlid
LangChain is short for Language Chain. An LLM, or Large Language Model, is the “Language” part. This library makes it easier for Elixir a...
New

Other popular topics Top

Qqwy
Update: How to use the Blogs & Podcasts section You can post links to your blog posts or podcasts either in one of the Official Blog...
3268 119930 1237
New
Patoshizzle
After calling mix ecto.create I get this error: 17:00:32.162 [error] GenServer #PID<0.412.0> terminating ** (Postgrex.Error) FATAL...
New
chrismccord
Phoenix 1.4.0 released Phoenix 1.4 is out! This release ships with exciting new features, most notably with HTTP2 support, improved deve...
688 30048 115
New
albydarned
Hello all! I am typing this post from my new MacBook Pro with the M1 chip. I’m loving it so far, and will probably use it as my daily dr...
New
jerry
Good day to you all. I have been struggling to get a query involving like and ilike to work. Can anyone assist me on this, please? pro...
New
sergio
I couldn’t find any guides that worked well with Phoenix 1.6.0 and esbuild. I hope this helps people test the waters and eases you into t...
New
mgjohns61585
Could someone help me? I'm making my first elixir program, number guessing game. I can't figure out how to convert the user's guess from ...
New
alice
Hey, Just curious what are the main benefits of Elixir compared to Clojure? When is Elixir more useful than Clojure and vice versa? Th...
New
shahryarjb
Hello, I have map which I want to convert it to string like this: the map: %{last_name: "tavakkoli", name: "shahryar"} the string I ne...
New
joeerl
Hello again - after a longish gap I’ve decided I really must dig into Elixir and see what’s been happening here - so I have a few questio...
New

We're in Beta

About us Mission Statement