Requests and responses
Debug an HTMX exchange
Use the browser Network panel to verify the trigger, method, URL, parameters, headers, status, response body, target, and swap.
Debug one exchange from left to right instead of changing several attributes at once.
- Confirm HTMX loaded. The script request should succeed and
htmx.versionshould exist. - Trigger the interaction with the Network panel open. If no request appears, inspect the natural event and
hx-trigger. - Check the method, final URL, query string or body, and
HX-*request headers. - Check the response status,
Content-Type, HTMX response headers, and raw HTML body. - Inspect the resolved target and swap strategy.
- Check the console for
htmx:targetError,htmx:swapError, or browser parsing errors.
Classify the failure before fixing it:
- no request: loading or trigger problem
- wrong request: method, URL, or parameter problem
- wrong response: server route, validation, or template problem
- correct response but wrong DOM: target, swap, or invalid HTML context
- correct DOM but poor experience: focus, indicator, history, or accessibility problem
Reproduce the request outside HTMX with curl when necessary. If the endpoint itself returns the wrong fragment, no client attribute can repair it.
Lesson completed