Features Overview

View Source

LiveDebugger provides a comprehensive set of tools designed to improve Phoenix LiveView debugging and development. From real-time state inspection to performance profiling, these features give you deep visibility into your application's behavior.

Features

Assigns Inspection

Inspect the current state of assigns for any LiveView or LiveComponent in your application. Updated in real-time, this feature acts like a live IO.inspect/1 with context, helping you track state changes, debug reactivity issues, and spot bugs faster.

Key capabilities:

  • Real-time assign updates
  • Copy assigns for IEx processing
  • Expandable/collapsible complex data structures
  • Immediate feedback on user interactions

Callback Tracing

See how functions in your LiveView application are being called with comprehensive tracing capabilities. Monitor all LiveView and LiveComponent callbacks with detailed execution information including timing, arguments, and execution flow.

Key capabilities:

  • Filter by callback type, execution time, or search terms
  • Detailed argument inspection with fullscreen view
  • Copy callback arguments for terminal processing
  • Support for all Phoenix.LiveView and Phoenix.LiveComponent callbacks

Components Highlighting

Visually identify and locate components rendered in your current debugged LiveView. Hover over component names in the tree to highlight their corresponding DOM elements in your application.

Key capabilities:

  • Toggle highlighting mode on/off
  • Hover-to-highlight functionality
  • Non-intrusive visual feedback

Components Tree

Examine how LiveComponents are arranged in your debugged LiveView. The tree automatically updates when state changes, showing the complete hierarchy from LiveView root to all nested LiveComponents with their CIDs.

Key capabilities:

  • Discover your application's structure
  • Real-time tree updates on state changes
  • View nested LiveView relationships

DeadView Mode

Debug the state of your application after redirecting or encountering a crash. This feature preserves the last known state and callback history, allowing you to investigate what went wrong even after the process has terminated.

Key capabilities:

  • Inspect last state of LiveView or LiveComponents
  • Review callback execution order
  • See which callback crashed the process
  • Continue to successor LiveView after debugging
  • Status indicator showing alive/dead state

Elements Inspection

Inspect LiveViews and LiveComponents directly from the rendered page by selecting elements with your mouse.

Key capabilities:

  • Two activation methods: Debug Button or Inspect Element button
  • Hover preview with element information
  • Click to inspect node
  • Highlight elements during selection
  • Works in both standalone and DevTools extension modes

Browser Features

Some features require JavaScript injection into your debugged application for enhanced functionality:

  • Components Highlighting - Visual DOM highlighting
  • Elements Inspection - Mouse-based element selection

These features are enabled by default but can be configured. See the Configuration page for details.