65

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!

Srikar Appalaraju
  • 71,928
  • 54
  • 216
  • 264
Charles Offenbacher
  • 3,094
  • 3
  • 31
  • 38

4 Answers4

35

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',
]
djsutho
  • 5,174
  • 1
  • 23
  • 25
  • Awesome sauce - I am able to fire in from a python requests client (the real client for mine) then analyse and profile in DjDt. Brilliant stuff! – Danny Staple Jun 27 '19 at 14:06
34

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.

jedierikb
  • 12,752
  • 22
  • 95
  • 166
recamshak
  • 854
  • 7
  • 8
  • 1
    Not sure why, but the Chrome extension seems to be unable to display debug information for Ajax calls (jQuery.get, jQuery.getJson, ...) – Petr Peller Nov 19 '13 at 16:31
  • @PetrPeller did you install the latest django-debug-panel package ? The previous version had problem when clickjacking protection is activated. If it's still not working, could you please open an issue on github with more information (Django version, example of code, etc) – recamshak Nov 20 '13 at 00:02
  • Installed using `pip install django-debug-panel` ... I will try to investigate more and let you know on GitHub – Petr Peller Nov 20 '13 at 00:07
  • Nice. @recamshak Have you considered merging your panel with the django debug toolbar project? – user Apr 29 '14 at 07:24
  • Yes! Fantastic solution. Years after posting, happy to accept this answer! – Charles Offenbacher Jul 10 '14 at 01:02
  • `django-debug-toolbar` is displayed both on the page and in Developer Tools. Am I doing anything wrong? – x-yuri Aug 06 '17 at 10:27
  • 1
    here in 2020 I couldn't get this working with Django 2.2 and the repo hasn't been updated for 4 years, the request history thing below works though – Gordon Wrigley Jul 17 '20 at 14:05
7

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)

Rachel
  • 2,858
  • 2
  • 26
  • 30
4

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.

Tomasz Zieliński
  • 16,136
  • 7
  • 59
  • 83
  • True, but most profilers and debuggers use headers to send the data from the server to the client (while still preserving a possible JSON response), and a browser extension to show it. It's been 3 years since your answer and DDT still doesn't have this functionality :) – Eduard Luca Jun 17 '14 at 14:45