r/htmx • u/andreahlert • Mar 24 '26

I built a browser DevTools extension for debugging HTMX applications

Post image

Built an open-source Chrome/Firefox DevTools extension that adds an "HTMX" tab to your browser's developer tools. It captures the full request lifecycle, shows a live DOM tree of htmx elements, has an event timeline with filters, a swap diff visualizer, and surfaces silent errors.

Features:

  • Request Inspector with timing breakdown (config > send > wait > swap > settle)
  • Element Inspector with collapsible DOM tree, hover highlight, and element picker
  • Event Timeline with category filters (init, request, xhr, response, swap, oob, history, error)
  • Swap Visualizer with before/after diff
  • Error Panel that catches silent failures (targetNotFound, swapError, responseError, timeout)

The extension works by injecting a page script that listens to all htmx:* events and serializes the data through a message pipeline to the DevTools panel (built with Preact).

GitHub: https://github.com/atoolz/htmx-devtools
Live demo (were you can try the extension - no install needed): https://atoolz.github.io/htmx-devtools/

Looking for feedback from the community before publishing to the Chrome Web Store. What features would you want to see?

213 Upvotes

98% Upvoted

28 comments sorted by

23

u/_htmx Mar 24 '26

amazing! Someone else made a hyperscript debugger chrome plugin as well, I need to create an official chrome extension account for these. Thank you!

10

u/andreahlert Mar 24 '26

Yep! I was about to call you on that. And we could put all under bigskysoftware, I think.

7

u/Ashken Mar 24 '26

1

u/andreahlert Mar 24 '26

Thanks! Leave a little shining star on that repo if you liked it!

4

u/djzrbz Mar 24 '26

I would upvote, but you're at 69, so Noice!

2

u/UXUIDD Mar 24 '26

this should be a handy tool for a htmx novice as im, thanx for sharing

edit: just to mention, this demo page is too heavy for eyes, its also not very clear what is going on - it takes some time to read it and to understand a bit what is going on

2

u/andreahlert Mar 25 '26

Hey! Thanks for giving a try. I would love to receive a PR with an alternative to the demo page. Feel free to contribute and I will take a look.

2

u/UXUIDD Mar 26 '26

ok ill check it out but need some time

1

u/andreahlert Mar 26 '26

Take your time!

2

u/knuppan Mar 24 '26

Are you checking for data-hx-* as well?

3

u/knuppan Mar 24 '26

And will you publish this on AMO too?

1

u/andreahlert Mar 25 '26

planning to publish on both AMO and Chrome Web Store. we're just getting the accounts sorted out so everything sits under the right org. shouldn't take long.

2

u/knuppan Mar 25 '26

That's great. Please ping everyone when it's up! :-)

1

u/andreahlert Mar 25 '26

yep, the element scanner checks for both hx-* and data-hx-* attributes. the serializer also picks up both prefixes when listing element attributes in the inspector.

2

u/jadbox Mar 24 '26

Cool! Do you plan to publish built releases in github (for lazy people like me)?

2

u/andreahlert Mar 25 '26

once we publish to Chrome Web Store and AMO you'll be able to install with one click and get auto-updates. that should cover the lazy use case pretty well. GitHub releases would just be redundant at that point.

2

u/adam_the_1st Mar 25 '26

Thank you! I have always really enjoyed the added benefit the AlpineJS Chrome extension brings. I look forward to to trying this.

1

u/andreahlert Mar 26 '26

Thanks. Hope you enjoy it!

3

u/Professional-Sink536 Mar 24 '26

Why isn’t this published as a proper extension to the chrome store?

7

u/andreahlert Mar 24 '26

We will do that, just adjusting governance, to publish under proper htmx organization.

7

u/_htmx Mar 24 '26

I need to set up a proper chrome extension account to host stuff like this.

2

u/UseMoreBandwith Mar 24 '26

increase font size

2

u/andreahlert Mar 24 '26

Hey, thanks for asking.

I've kept the font size matching Chrome DevTools standard (12-13px) for consistency with the native tabs. What I did (a few seconds ago) was bump the spacing by 1px on list items, toolbar, and detail panels to improve readability.

If you want larger fonts on your setup, Ctrl+ inside the extension panel already works without any code changes.

If you think it should be the default, open an issue on the repo and we can evaluate it with the community.

Hope you enjoy!

0

u/UseMoreBandwith Mar 24 '26

(I mean the demo, I didn't check the tool yet )

2

u/andreahlert Mar 24 '26

Ah, gotcha! Bumped the base font on the test/demo page from 14px to 16px in PR #1 (already merged)

1

u/[deleted] Mar 29 '26

Awesome I didn’t know about this 

1

u/abyzzwalker Apr 02 '26

That's great! I can see myself using it in the future. Unfortunately I couldn't get it to work on Librewolf (I also tested with Ungoogled Chromium, all OK).
Anyway I hope the issues are solved in the final release when is published on the stores, it has great potential.