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: ```elixir 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: ```bash mix excessibility.debug test/failing_test.exs ``` ### Phase 2: Analyze Timeline Read `test/excessibility/timeline.json`: ```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 Re...