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

srzeszut

srzeszut

Hey everyone! We officially released LiveDebugger v1.0.0 during ElixirConf EU in Malaga!
Reaching 1.0 means LiveDebugger is now stable and ready for everyday use. Over the past releases, we focused on solidifying the core features, improving reliability, and smoothing out the debugging experience. We also shipped v0.8.0 earlier, which introduced several improvements.

Here’s a summary of what’s new:

  • Interactive Tutorial - We are releasing a comprehensive tutorial (the LiveDebugger Tour) to help you and your team get the absolute most out of the tool from day one. Check it out here on GitHub.

Highlights from v0.8.0:

  • Open Callback in Editor - You can now jump straight to a callback’s implementation in your code editor directly from the debugger, making your workflow even faster.
  • Improved Stability & Tracing - We’ve fixed endless reloads, resolved trace highlighting issues, and added a safeguard to automatically disable tracing if the heap size limit is reached.

Important Note on LiveView Versions: Starting with v1.0.0, LiveDebugger requires Phoenix LiveView v1.1.7 or higher. If your project is still running an older version of LiveView, no worries! You can simply use LiveDebugger v0.8.0, which still gives you full access to all of the features.
A huge thank you to everyone who tested, reported issues, and provided feedback throughout our early versions. You helped make this 1.0.0 release something truly special!

Happy debugging!

Check out our repo: GitHub - software-mansion/live-debugger: Tool for debugging LiveView applications · GitHub

For more details, check out our website: LiveDebugger: LiveView debugging made simple

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

Hey everyone! :waving_hand:

We just shipped LiveDebugger v0.6.0.

Here’s a summary of what’s new:

Inject Custom Events & Messages
Skip the manual setup of clicking through UIs or waiting for background jobs. You can now craft and send custom events or messages directly into your LiveView process to test handle_info and handle_event logic instantly.

Enhanced Callback Exceptions
LiveDebugger now captures and displays callback exceptions directly within the tool. View the exact error and stack trace the moment a crash occurs, keeping your debugging workflow entirely in the browser.

Revisited Highlighting
he revisited highlighting mechanism now extends beyond the node tree to include Active LiveViews and Streams. Simply hover over any item in the tool to instantly spotlight its corresponding element in the browser UI.

Support for Temporary Assigns
LiveDebugger supports temporary assigns, giving you full visibility into data that doesn’t stay in the socket.

Check out our repo: GitHub - software-mansion/live-debugger: Tool for debugging LiveView applications · GitHub

And if you’re interested in what’s coming next, check out the LiveDebugger website: LiveDebugger: LiveView debugging made simple

Where Next?

Popular in Announcing Top

KronicDeth
Elixir plugin for JetBrain’s IntelliJ Platform (including Rubymine) This is a plugin that adds support for Elixir to JetBrains IntelliJ...
289 36128 110
New
handnot2
Samly can be used to enable SAML 2.0 Single Sign On in a Plug/Phoenix application. This library uses Erlang esaml to provide plug enabl...
New
danschultzer
In short Plug n’ play OAuth 2.0 provider library. Just set up a resource owner schema with Ecto (your user schema), install the dependen...
New
tmbb
I’ve been working on two packages (not on hex.pm yet) to build admin interfaces for phoenix apps: bureaucrat - which contains a bunch ...
New
oltarasenko
Dear Elixir community, After a year of development, bug fixes, and improvements, we are proudly ready to share the release of Crawly 0.1...
New
ahamez
Hi everyone, I’ve been working on this protobuf library for 3 years. We use it in the company I work for, EasyMile, to communicate with ...
New
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
bluzky
You may know https://ui.shadcn.com/, a UI component library for React. I really love it’s design style and components. I’ve built some co...
384 13736 119
New
MRdotB
I needed to reuse React components from my Chrome extension in my Phoenix/LiveView backend. I noticed that for Svelte/Vue, there are live...
New

Other popular topics Top

ovidiubadita
Hey all, I discovered Elixir and I love it. I always wanted to learn a functional programming and I intended to go for Haskell, but afte...
New
jononomo
For some reason my phoenix channels are working for me in my local dev environment, but as soon as I deploy via Docker, I get a 403 error...
New
openscript
Hello! Sorry for this astonishing simple question, but I’m really stuck. I try to set up the intellij-elixir plugin, but I don’t know ho...
New
PeterCarter
There are pre-rolled solutions for other frameworks that do work. However, Phoenix does not seem to have these. Have people had good expe...
New
Darmani72
If I have a post route which an argument: post /my_post_route/:my_param1, MyController.my_post_handler How would get the post params ...
New
dogweather
I wrote this comment on r/haskell, and it’s not popular there. :wink: But I think I’m on to something… Haskell reminds me of Java, and e...
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 30877 112
New
gshaw
What is the idiomatic way of matching for not nil in Elixir? E.g., First way: defp halt_if_not_signed_in(conn, signed_in_account) when...
New
sergio_101
I am VERY much an elixir newbie. I have taken one elixir course and one phoenix course on Udemy. During that course, I saw the instructor...
New
aalberti333
As the title describes, I’m trying to run Enum.map() over a list of key/value pairs, where the value is a map. My data looks like this: ...
New

We're in Beta

About us Mission Statement