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!

34 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!

5 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

2 Likes