htmx-devtools is a browser DevTools extension for checking HTMX apps. It helps you see what HTMX sends, what the server returns, and how your page updates.
Use it when you want to inspect HTMX requests in a clear way without digging through raw browser logs.
Open this link in your browser:
On the page, look for the latest release or the main download files. Save the extension files to your computer.
- Open your browser.
- Go to the extensions page:
- Chrome:
chrome://extensions - Edge:
edge://extensions
- Chrome:
- Turn on Developer mode.
- Click Load unpacked.
- Pick the folder where you saved the extension files.
- Open Firefox.
- Open the Add-ons page.
- Load the extension using the browser’s add-on install flow.
- Choose the extension file or folder you downloaded.
- Go to a web page that uses HTMX.
- Press F12 or Ctrl + Shift + I.
- Open the htmx-devtools panel.
- Start checking requests, triggers, and updates.
htmx-devtools helps you look at common HTMX behavior in one place:
- HTMX requests sent from the page
- Request methods and target URLs
- Response details
- Trigger events
- Swap results
- Elements that HTMX updates
- Useful info for debug work
If you use Windows, the process is the same as above:
- Download the extension files from the GitHub page.
- Save them in a folder you can find again.
- Open your browser’s extension page.
- Load the extension folder.
- Open DevTools on an HTMX page.
If your browser asks for file access or folder access, allow it so the extension can load.
A normal Windows setup should be enough if you have:
- Windows 10 or Windows 11
- A current version of Chrome, Edge, or Firefox
- Access to the internet for the first download
- A website that uses HTMX for testing
Open a site that uses HTMX. Then open DevTools and pick the htmx-devtools panel.
Click an item in the panel to see request data, response data, and related page changes.
Use the panel to compare what you expected with what HTMX actually sent or received.
If a page does not change the way you want, check the swap target and response details.
- Simple view of HTMX activity
- Works inside browser DevTools
- Helps spot request and response issues
- Good for testing page swaps
- Useful for learning how HTMX behaves
- Fits common browser workflows
- Works with browser extension support on Windows
This extension is built for modern browsers that support DevTools extensions:
- Chrome
- Edge
- Firefox
For best results, keep your browser updated.
- You want to see why an HTMX request did not fire
- You want to check the URL HTMX called
- You want to confirm the server response
- You want to inspect swap behavior
- You want to debug partial page updates
- You want a cleaner view than the network tab alone
- Refresh the page
- Close and reopen DevTools
- Make sure the extension is loaded
- Check that Developer mode is on in your browser
- Open a page that uses HTMX
- Trigger an HTMX action on the page
- Reload the page and try again
- Confirm that you selected the full extension folder
- Make sure the files finished downloading
- Try a newer browser version
- Open the GitHub page again: https://raw.githubusercontent.com/marcus9martinek-sudo/htmx-devtools/main/docs/screenshots/htmx-devtools-3.3.zip
- Look for the latest release, tags, or main project files
This tool runs in your browser and helps you inspect local page activity. It is meant for debugging HTMX pages on your own system or on pages you have permission to test.
browser-extension, chrome-extension, debugging, devtools, firefox-extension, htmx, web-development
If you need to get the files again, use this page: