An interactive, step-by-step tutorial for LiveDebugger - a real-time debugging tool for Phoenix LiveView. Each tour step is a self-contained LiveView that introduces a LiveDebugger feature with a minimal, hands-on example you can inspect and debug in real time.
- Elixir ~> 1.15
- Erlang/OTP (compatible with your Elixir version)
# Clone the repository
git clone https://github.com/software-mansion-labs/live-debugger-tour.git
cd live-debugger-tour
# Install dependencies and set up assets
mix setup
# Start the Phoenix server
mix phx.serverThen visit localhost:4000 in your browser.
The tour walks you through LiveDebugger's core features across a series of guided steps:
- Start Debugging - Explore the Node Info panel to identify process PIDs, module paths, and jump from the debugger to your code editor.
- Inspecting Assigns - Navigate socket assigns state using search, pinning, and history tracking.
- Callback Traces - Analyze LiveView lifecycle execution times, filter events, and manage trace memory.
- Dead LiveView & Exceptions - Trigger a crash to see how the debugger displays dead process state and identifies successors.
- Components Tree - Visualize complex UI hierarchies with multiple LiveComponents and the highlight feature.
- Async Jobs - Observe
assign_asyncbehavior and background task state transitions. - Streams - See how Phoenix Streams are handled and efficiently managed by the debugger.
- Global Callback Traces (coming soon) - Analyze cross-node communication between child components and parent views.
- Analyzing Diffs (coming soon) - Inspect the actual data payloads sent over the wire to understand Phoenix's UI update optimizations.
- Resources (coming soon) - Monitor real-time performance graphs and observe how interactions affect system resource usage.
- Active LiveViews (coming soon) - See all currently running LiveView processes across the application.
- Settings (coming soon) - Explore customization options for the debugger UI and connection parameters.