HTMX DevTools Extension

Skill by ara.so — Devtools Skills collection.

Overview

HTMX DevTools is a browser extension that provides a comprehensive debugging interface for HTMX applications. It captures the full request lifecycle, tracks DOM elements with htmx attributes, visualizes swaps, monitors events, and surfaces errors. Supports both htmx 2.x and htmx 4.0 alpha with automatic version detection.

Key Features

• Request Inspector: Full lifecycle tracking with timing breakdown, headers, and event trace
• Element Inspector: Live DOM tree filtered to htmx elements with click-to-inspect
• Event Timeline: Filterable timeline of all htmx events with category color coding
• Swap Visualizer: Before/after snapshots with LCS-based diff view
• Error Panel: Automatic detection of HTTP errors, target not found, timeouts, and swap errors

Installation

Installing the Extension