Update information in toolbar after htmx request

thacoon commented 1 month ago

I have a django application that uses htmx. So when I load a page I see the debug toolbar and e.g. all SQL queries that were executed. When I now click on a button that triggers a htmx request and some view response with a htmx response that replaces or add somethings to the DOM like a modal/sidebar/.... In the view some SQL queries where executed as well, but the debug toolbar does not update any of the information, it is still the same as were shown after I loaded the initial page.

I would have expected it to update the information. Is this something that does not work at the moment?

I added all my configuration regarding debug toolbar below:

In my django.py settings file:

# Debug Toolbar
IS_RUNNING_TESTS = 'test' in sys.argv

if DEBUG and not IS_RUNNING_TESTS:
    INSTALLED_APPS += ['debug_toolbar',]
    MIDDLEWARE += ['debug_toolbar.middleware.DebugToolbarMiddleware',]

def show_toolbar(request: HttpRequest) -> bool:
    if DEBUG and not IS_RUNNING_TESTS:
        if request.META['REMOTE_ADDR'] not in INTERNAL_IPS:
            logger.error(
                'Local remote address not found in internal IPs',
                error={'remote_addr': request.META['REMOTE_ADDR'], 'internal_ips': INTERNAL_IPS},
            )
        return True

DEBUG_TOOLBAR_CONFIG = {
    'SHOW_TOOLBAR_CALLBACK': show_toolbar,
    'INSERT_BEFORE': '<head>',
    'ROOT_TAG_EXTRA_ATTRS': 'hx-preserve',
}

INTERNAL_IPS = [
    '127.0.0.1',
    'localhost',
    '192.168.176.1',  # Internal docker ip
]

In my urls.py:

if DEBUG and not IS_RUNNING_TESTS:
    urlpatterns += debug_toolbar_urls()

In my _base.html template:

In the header:

    {% if debug %}
      <script>
          document.addEventListener('htmx:afterSettle', (event) => {
              if ('djdt' in window) {
                  window.djdt.init();
              }
          })
      </script>
    {% endif %}

At the end:

  {% if debug %}
    <script>
        if (typeof window.htmx !== 'undefined') {
            htmx.on('htmx:afterSettle', function(detail) {
                if (
                    typeof window.djdt !== 'undefined' &&
                    detail.target instanceof HTMLBodyElement
                ) {
                    djdt.show_toolbar();
                }
            });
        }
    </script>
  {% endif %}

tim-schilling commented 1 month ago

A few other questions:

Does the history panel show the requests?
What versions of django, the toolbar are you using?
Are you using async views or channels?
The line 'INSERT_BEFORE': '<head>', seems incompatible. The toolbar should be inside of the body tag at least.

thacoon commented 1 month ago

@tim-schilling thanks for the quick reply, my answers:

Does the history panel show the requests? Yes, the request are shown in the history panel

What versions of django, the toolbar are you using? toolbar: version = "4.4.6" django: version = "5.1"

Are you using async views or channels? No, I don't use any async views or channels.

_The line 'INSERTBEFORE': '', seems incompatible. The toolbar should be inside of the body tag at least. I also had </head> and did not setting 'INSERT_BEFORE' at all. But having it like this it is not flickering anymore for me when a new page is loaded. All different variants seem to behave the same for me, except that the toolbar is flickering when I don't set it like this.

I also noticed that after I opened a modal the toolbar does not react to any input, but when I open it a second time it reacts to input again. But I guess this is not related, maybe something with my CSS, idk yet? Also for this changing _INSERTBEFORE to </head> or don't set it all does not change anything.

tim-schilling commented 1 month ago

I'm having a tough time fully understanding what's happening and what you'd like to change. If the toolbar has the history panel and the htmx requests show up in there after clicking refresh (or enabling UPDATE_ON_FETCH), to me that means the toolbar is working as expected.

If you're replacing the entire DOM and want the toolbar to be supported, you may need to tell htmx to not swap that part.

thacoon commented 1 month ago

Oh, I was not aware about 'UPDATE_ON_FETCH': True, that does exactly what I wanted. Thanks for your time :)

I still have a bug that when I every other htmx request, the toolbar becomes frozen (clicking does not do anything) and after doing another htmx request it works again (clicking on e.g the SQL button opens the sql view). But for that I guess I need to make some small reproducible example.

thacoon commented 1 month ago

For anyone who comes across this, having `'INSERT_BEFORE': '', is not good, mixes up the whole html structure. I had importmaps that stopped working and all my content was moved into the content. Only use or , but it now flickers again for me when I load a new page.

django-commons / django-debug-toolbar

Update information in toolbar after htmx request #1997