CodeIgniter 4.3.3 debug bar conflicts with HTMX

This is my Firefox debug when the view is firstly loaded
you see XHR of the Codeigniter debug bar, at this point yet no problems






this is after making the FIRST search, you see the POST and again the XHR of the debug bar, again no problems yet




now when I delete the search field and I enter a new string, I get this and the Javascript totally breaks
I mean that JavaScript stops working 
and in fact no more POST is fired by HTMX. Follows after the screeshot




you need 7x PgDn to scroll all of those

Code:

newXHR http/..../?debugbar

the last line is a link to Mozilla Developers Network and the page is this
https://developer.mozilla.org/en-US/docs..._recursion

But if I go to .env and I disable the development environment, everything works as expected and I can do all the searches I want

this is the result after 4 different searches, BUT only with Codeigniter development mode disabled . This way HTMX AJAX works like a charm and no errors in the Firefox console. It follows at bottom





I can show the code but is it really basic, and in fact it alone (I mean with development mode disabled, it works) it works

Looks really a sort of conflict between HTMX and the debug bar mechanism of Codeigniter

Add "except" URL pattern with POST request in Config/Filters.php

https://codeigniter.com/user_guide/incom...a-few-uris

or disable debugbar

Simple CI 4 project for beginners codeigniter-expenses ( topic )

Add "except" URL pattern with POST request in Config/Filters.php

https://codeigniter.com/user_guide/incom...a-few-uris

or disable debugbar

@ozornick  thank you for your reply

Implicit topic in this thread is ... avoid disabling debug-bar ... otherwise development becomes trickier

instead it is not clear to me how to apply your kind suggestion

Thank you for any example

You can use CodeIgniter-HTMX. It makes Debug Bar available via "debugbar-link" response header.
If you're rendering only fragments, not the whole page, you can also use something like this:

Code:

htmx.on('htmx:afterRequest', function(ev) {
    let debugBarTime = ev.detail.xhr.getResponseHeader("debugbar-time");
    if (debugBarTime !== null) {
        loadDoc(debugBarTime);
    }
});

This will update the previously rendered Debug Bar to the new one.