Charles Offenbacher
Charles Offenbacher

Reputation: 3132

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

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!

Upvotes: 65

Views: 17797

Answers (4)

djsutho
djsutho

Reputation: 5834

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',
]

Upvotes: 35

recamshak
recamshak

Reputation: 854

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.

Upvotes: 34

Rachel
Rachel

Reputation: 2894

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)

Upvotes: 7

Tomasz Zieliński
Tomasz Zieliński

Reputation: 16356

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.

Upvotes: 4

Related Questions