e11y-debug

Excessibility Debug - Timeline & State Analysis

Debug LiveView issues by inspecting state evolution and rendered HTML.

Tools

• Timeline - Shows state at mount, handle_event, render
• Snapshots - Captured HTML at specific moments
• Analyzers - Memory, hypothesis, code pointers

Four-Phase Debug Process

Phase 1: Capture with Snapshots

Add temporary html_snapshot(view) calls around the problem area:

test "debugging problematic feature" do
  {:ok, view, _html} = live(conn, "/page")

  html_snapshot(view)  # before the problem

  view |> element("button") |> render_click()

  html_snapshot(view)  # after - what changed?
end

Run with telemetry capture:

mix excessibility.debug test/failing_test.exs

Phase 2: Analyze Timeline

Read test/excessibility/timeline.json:

{
  "test": "test debugging problematic feature",
  "duration_ms": 142,
  "timeline": [
    {
      "sequence": 1,
      "event": "mount",
      "timestamp": "2024-01-15T10:30:00Z",
      "memory_size": 1024,
      "key_state": {"user": null, "items": []},
      "changes": {}
    },
    {
      "sequence": 2,
      "event": "handle_event:click",
      "timestamp": "2024-01-15T10:30:00.050Z",
      "memory_size": 4096,
      "key_state": {"user": null, "items": ["a", "b", "c"]},
      "changes": {"items": "changed"}
    }
  ]
}

Look for:

• Assigns at each event
• What changed between renders
• Unexpected state

Phase 3: Inspect Snapshots

Read captured HTML files in test/excessibility/html_snapshots/:

# List all snapshots
ls test/excessibility/html_snapshots/

# Open in browser
open test/excessibility/html_snapshots/MyModule_42.html

Check for:

• Missing elements
• Wrong content
• Incorrect attributes
• Compare before/after

Phase 4: Fix

1. Use hypothesis analyzer for root cause suggestions
2. Add test for the specific issue
3. Implement fix
4. Verify with mix excessibility
5. Remove temporary snapshots

Commands