Skills
.Work. You
Rest

htmx-devtools-extension

Official

Debug HTMX requests and swaps in minutes.

Software Engineering#debugging#htmx#devtools extension#request inspection#dom swap visualization#event timeline
AuthorAradotso
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Troubleshooting HTMX applications is slow because request lifecycles, swap results, event flows, and failure causes (like target mismatches) are hard to see from the page itself.

Core Features & Use Cases

  • Request Inspector: Track the full HTMX request lifecycle with timing breakdown, request/response headers, bodies, and correlated event trace for rapid diagnosis.
  • Element Inspector: Explore and resolve htmx-related elements and attributes, then jump to element-specific request history.
  • Event Timeline: Filter and drill into HTMX event sequences to understand ordering and payload details.
  • Swap Visualizer: Compare DOM before/after swaps with diff-style highlighting, helping pinpoint why UI updates are incorrect.
  • Error Panel: Detect and group common HTMX issues such as HTTP errors, target-not-found, timeouts, and swap errors.

Quick Start

Install the HTMX DevTools extension for your browser and open any page running HTMX, then use the HTMX DevTools panel to record requests and inspect swaps and errors.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: htmx-devtools-extension
Download link: https://github.com/Aradotso/devtools-skills/archive/main.zip#htmx-devtools-extension

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.