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.

8 minute lesson

~~~

Debug one exchange from left to right instead of changing several attributes at once.

  1. Confirm HTMX loaded. The script request should succeed and htmx.version should exist.
  2. Trigger the interaction with the Network panel open. If no request appears, inspect the natural event and hx-trigger.
  3. Check the method, final URL, query string or body, and HX-* request headers.
  4. Check the response status, Content-Type, HTMX response headers, and raw HTML body.
  5. Inspect the resolved target and swap strategy.
  6. 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