Improve integration with Django Debug Toolbar

[realsuayip]

Description

Currently, DRF does not work well with debug_toolbar, due to the way it handles non-GET and non-POST requests.

To perform PUT, PATCH, DELETE and OPTIONS requests in browsable API, we send an ajax request to fetch the resulting HTML. The contents are then dynamically rendered using JavaScript.

During this time, the entire toolbar gets re-rendered (with proper data) but since the related JavaScript code is not executed (normally done on document load), the toolbar is instead hidden.

I added a simple check during JavaScript re-render to load the toolbar. It's unlikely this issue could be solved on debug_toolbar side given the way DRF handles content rendering.

IMHO this should be a great QOL improvement given how annoying it becomes to track requests with mentioned methods.

Related:

django-commons/django-debug-toolbar#1743

[auvipy]

would you mind sharing some screen shots please? also pulling from main branch?

[realsuayip]

@auvipy, Applied changes from main.

While preparing for screen capture, I realized that this was not working on Chrome. I had to change it like this:

@@ -7,7 +7,7 @@ function replaceDocument(docString) {
   if (window.djdt) {
     // If Django Debug Toolbar is available, reinitialize it so that
     // it can show updated panels from new `docString`.
-    document.addEventListener("DOMContentLoaded", djdt.init);
+    window.addEventListener("load", djdt.init);
   }
 }

For some reason, Chrome does not fire DOMContentLoaded event after document.write() but Safari and Firefox does. After some tinkering, I decided this was the most reliable method. I tested on Safari, Firefox, Chrome and Opera.

The following screen capture uses Chrome:

output.mp4