How to use django-debug-toolbar on AJAX calls?

Question:

I’m curious if there’s a reasonable way to use the (amazing) django-debug-toolbar with AJAX queries.

For example, I use a jQuery $.get with a bunch of parameters to hit a Django URL and load it inline. If I have an error with that, it isn’t registered on the toolbar. I also can’t use it by copying the AJAX URL because DDT attaches to the body tag of the response, and it wouldn’t make any sense to be including body tags with AJAX responses.

Any direction would be helpful! Thanks!

Asked By: Charles Offenbacher

||
Source

Answers:

Ddt plugs itself into a response, which means that there is no standard way of browsing its panels for AJAX request. Also, AJAX response can be in JSON format, which makes it impossible for ddt to plug into it.

Personally I’d find a way of logging ddt output to a text file, or maybe it supports client-server architecture in which client works inside AJAX request handler and sends data to the server? I don’t know what’s possible as there are dozen ddt clones out there.

Answered By: Tomasz Zieliński

I’ve hit this problem recently. My quick-n-dirty-but-working solution was just to add some HTML views to flex the same code.

So for example, if I can see in NewRelic that 90% of my website’s time is spent in an ajax call to /search_for_book?title=, my code might look like this:

views.py:

def search_for_book(request, title):
    data = _search_for_book(title)
    return json_response(data)

def test_search_for_book(request, title):
    data = _search_for_book(title)
    return http_response(data)

The bottleneck will be somewhere in the _search_for_book code; whether we call it by ajax is irrelevant to diagnosing its inefficiencies (in my case, at least; YMMV)

Answered By: Rachel

I had the same problem before!
And as I’m doing more and more AJAX heavy applications, I released a Django Application and a Chrome extension that together solved exactly that problem.

All the information is in the github repository.

Answered By: recamshak

Update: this functionality is now built into django-debug-toolbar

It was added in this PR and released in version 3.0

The old answer may still be useful for older versions of the toolbar:

I wrote the Request History Panel for Django Debug Toolbar that can be added to the Django Debug Toolbar to view requests other than the current one (including AJAX requests).

Install via pip:

pip install django-debug-toolbar-request-history

In settings.py add 'ddt_request_history.panels.request_history.RequestHistoryPanel' to DEBUG_TOOLBAR_PANELS e.g.:

DEBUG_TOOLBAR_PANELS = [
    'ddt_request_history.panels.request_history.RequestHistoryPanel',  # Here it is 
    'debug_toolbar.panels.versions.VersionsPanel',
    'debug_toolbar.panels.timer.TimerPanel',
    'debug_toolbar.panels.settings.SettingsPanel',
    'debug_toolbar.panels.headers.HeadersPanel',
    'debug_toolbar.panels.request.RequestPanel',
    'debug_toolbar.panels.sql.SQLPanel',
    'debug_toolbar.panels.templates.TemplatesPanel',
    'debug_toolbar.panels.staticfiles.StaticFilesPanel',
    'debug_toolbar.panels.cache.CachePanel',
    'debug_toolbar.panels.signals.SignalsPanel',
    'debug_toolbar.panels.logging.LoggingPanel',
    'debug_toolbar.panels.redirects.RedirectsPanel',
    'debug_toolbar.panels.profiling.ProfilingPanel',
]
Answered By: djsutho