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

First Post!

Terbium-135

Terbium-135

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

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

alisinabh
Hey everyone i’ve developed a library for Jalaali calendar for elixir which supports converting Gregorian dates to Jalaali and vice vers...
New
grych
Hi folks, Few months ago I have announced the proof-of-concept of the library to manipulate the browsers DOM objects directly from Elixi...
639 54092 488
New
treble37
Just looking for a little feedback on a tiny helper library I built - Sometimes I find the need to convert maps with atom keys to maps w...
New
Crowdhailer
Raxx is an alternative to Plug and is inspired by projects such as Rack(Ruby) and Ring(Clojure). 1.0-rc.1 is now available. To use it re...
New
fuelen
Hey folks! Want to present a toolkit for writing command-line user interfaces. It provides a convenient interface for colorizing text...
New
type1fool
WebAuthnLiveComponent WebAuthnComponents See this post about renaming the package. Passwordless authentication for Phoenix LiveView app...
New
martinthenth
Hello everybody :wave: Recently, some of my colleagues talked about database ids and uuids and their problems, and I remembered the pain...
New

Other popular topics Top

rms.mrcs
Hi, I need to transform a list of numbers into a map where the keys are the indexes and the values are the original values of the list. ...
New
hariharasudhan94
I would like to know what is the best IDE for elixir development?
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
AstonJ
Seen any cool LiveView demos, sample apps or examples? Please post them here! :003:
New
sergio
Kind of like when jquery came out, it was super necessary. Existing drag and drop libraries have a bunch of baggage to support old browse...
New
AstonJ
Posting this to see if we can make things easier for people to get into Neovim. If you use Neovim and have a favourite distro please let ...
New

We're in Beta

About us Mission Statement