skills.rest
reason-machines
reason-machinesOFFICIAL
Explore all skills by this author →
Website𝕏@reasonmachinesGitHub

htmx-devtools-extension

Inspect HTMX requests, elements, events, swaps, and errors in browser DevTools.

4|Updated May 16, 2026
Search Tags:#debugging#frontend#devtools#htmx#browser extension#request inspection#dom swaps
One-click install
npx skills add https://github.com/reason-machines/devtools-skills --skill htmx-devtools-extension-reason-machines
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: htmx-devtools-extension
Source: https://github.com/reason-machines/devtools-skills/tree/main/skills/htmx-devtools-extension
Command: npx skills add https://github.com/reason-machines/devtools-skills --skill htmx-devtools-extension-reason-machines

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Debugging HTMX applications is difficult because requests, DOM swaps, and events happen invisibly in the browser, leaving developers without visibility into why targets fail, swaps misbehave, or errors occur. ## Core Features & Use Cases - Request Inspector: Track the full HTMX request lifecycle with timing breakdowns, HX-* headers, and correlated event traces. - Element & Event Inspection: Explore a live DOM tree filtered to htmx elements and monitor a filterable timeline of all htmx events across categories like Init, Swap, and Error. - Swap Visualizer & Error Panel: Compare before/after DOM snapshots with diff views and automatically detect HTTP errors, missing targets, timeouts, and swap failures. - Use Case: A developer's button with hx-target="#missing-element" silently fails; the Error Panel flags a "Target Not Found" error and jumps directly to the associated request for diagnosis. ## Quick Start Install the htmx devtools extension and help me debug why my htmx button request is not updating the target element.

Frequently Asked Questions about htmx-devtools-extension

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I debug htmx requests in the browser?▼

Install the HTMX DevTools browser extension, open DevTools, and select the HTMX tab. The Request Inspector captures each request's method, URL, headers, timing phases, and correlated event trace when recording is enabled.

How to install htmx devtools extension in Chrome?▼

Clone the repository, run npm install and npm run build:chrome, then navigate to chrome://extensions, enable Developer mode, click Load unpacked, and select the dist folder. For Firefox, run npm run build:firefox and load it via about:debugging.

Does htmx devtools support htmx 4.0?▼

Yes, the extension supports both htmx 2.x and htmx 4.0 alpha with automatic version detection. It maps the different event names and detail structures between versions and shows a blue badge for 2.x or purple for 4.0.

Why is my htmx target element not updating?▼

This usually happens when the hx-target selector does not match any element in the DOM. Check the Error Panel for a Target Not Found error, then verify the selector exists, such as using hx-target="#content" with a matching div id.

Why are no htmx requests being captured in DevTools?▼

Verify htmx is loaded by checking window.htmx in the console, ensure the Record button is active in the Request Inspector, and confirm elements have valid hx-get or hx-post attributes. Also reload the page after installing the extension.

Related Skills

Explore More Software Engineering Skills→
the-perfect-developerthe-perfect-developer
11

htmx

Enable server-driven interactivity in web pages using htmx attributes.

Community
Advanced
asarchamiasarchami
1

generate-htmx-component

Generates server-driven HTML fragments using HTMX attributes and Tailwind utility classes.

Community
Intermediate
renjianguo666renjianguo666

litestar-htmx

Build HTMX-powered Litestar handlers, partial templates, and server-driven client events.

Community
Intermediate
AradotsoAradotso
4

htmx-devtools-extension

Inspect HTMX request lifecycles, events, and DOM swaps in a DevTools panel.

Official
Intermediate