Skip to content
0:00 / 0:00

#elixir#phoenixliveview#livedebugger

LiveView Node Inspector, Nested LiveViews Support | LiveDebugger 0.7.0

Software Mansion

14K subscribers • 2 videos on Hallway

YouTube
  • Recommended by 1 person: 1 in engineering communities.
  • Made by the vendor. The company whose product it covers made or sponsored it.
  • May be out of date. The tools, versions or practices it shows have likely moved on.

Intermediate. Assumes working knowledge.

449 views7 months ago1 recommendation

Web developmentTools and practiceElixir and ErlangDebugging

Software Mansion demonstrates LiveDebugger 0.7.0, showing how to inspect LiveView node trees, trace callbacks, and debug nested LiveViews.

Meet LiveDebugger - a simple browser-based tool for debugging LiveView applications. What's new: ✅ LiveView Node Inspector ✅ Nested LiveView Support ✅ Better Callback Traces Intro Node Inspector Enhanced Global Callback Traces Nested Live Views Support With LiveDebugger, you can: 🌳 See your LiveComponents tree: Explore your application’s structure at a glance. 🔎 Inspect assigns: Check the data of any LiveView or LiveComponent in real time. 📈 Trace and filter callback executions: Follow lifecycle callbacks, measure execution time, and analyze performance. 🕵️ Inspect elements: Click on UI elements to reveal which component created them and instantly see how your full interface is structured. Get LiveDebugger: l.swmansion.com/3Fz3tt See GitHub repo: l.swmansion.com/uVD54g ❓Have feedback or feature idea? Let us know here: l.swmansion.com/AwkHv4 #LiveDebugger #LiveView #elixir #phoenix #debugger

Why it's here

1 person recommends this

What people say. Recommended as a useful tool for debugging Elixir LiveView applications.

u/kraleppain r/elixir • Recommends

LiveDebugger v0.7.0: Source Navigation, Trace Filtering, and Nested Tree Structures Hey everyone! 👋 We just shipped LiveDebugger v0.7.0 This release is another big step toward our 1.0.0 milestone, so we spent this cycle polishing the features you use every day and making navigation feel seamless. Here’s a summary of what’s new: * **Direct Source Code Navigation** \- the Node Inspector now features a direct link to the source code of any given node. One click, and you’re taken straight to the exact line where that LiveView is defined. * **Trace Isolation & Filtering** \- we enhanced the Global Traces view by adding a component tree to filter for specific nodes. * **Tree Structure for Nes…