Star 历史趋势
数据来源: GitHub API · 生成自 Stargazers.cn
README.md
LiveDebugger Tour
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.
https://github.com/user-attachments/assets/8296d9aa-27b3-490b-bdd0-c06de7d6f769
Prerequisites
- Elixir ~> 1.15
- Erlang/OTP (compatible with your Elixir version)
Installation
# 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.
What it offers
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 - Analyze cross-node communication between child components and parent views.
- Analyzing Diffs - Inspect the actual data payloads sent over the wire to understand Phoenix's UI update optimizations.
- Resources - Monitor real-time performance graphs and observe how interactions affect system resource usage.
- Active LiveViews - See all currently running LiveView processes across the application.
- Settings - Explore customization options for the debugger UI and connection parameters.