django-devbar

A performance bar for Django development. Shows database query counts, query duration, and application time. Flags similar and duplicate queries.

Settings and the response header format remain compatible within 1.x. Breaking changes require a new major version.

Install

Component	Install from	Notes
Django package	PyPI	uv add --dev django-devbar
Chrome DevTools extension	Chrome Web Store	Optional
Firefox DevTools extension	Firefox Add-ons	Optional
Browser extension packages	GitHub Releases	Manual/dev installs and checksums

Screenshots

Query count, query duration, and application time:

Similar and duplicate queries with details:

The optional Chrome and Firefox extension shows query details in DevTools:

Motivation

django-devbar sends metrics in response headers and can display an HTML bar. Compared with Django Debug Toolbar:

• Setup requires one middleware entry.
• The browser extension reads metrics from any response type, including JSON.
• Django is the only dependency.
• Metrics require no extra requests to debug endpoints.
• The HTML bar is optional. You can use headers and the extension alone.

Django setup

# Using uv
uv add --dev django-devbar

# Or using pip
pip install django-devbar

Place DevBar near the start of your middleware list:

MIDDLEWARE = [
    "django.middleware.security.SecurityMiddleware",
    # ...
]

if DEBUG:
    idx = MIDDLEWARE.index("django.middleware.security.SecurityMiddleware")
    MIDDLEWARE.insert(idx + 1, "django_devbar.DevBarMiddleware")

The if DEBUG condition keeps the middleware active only in development. It also avoids import errors when the package is not installed in production.

If the middleware remains installed, DEBUG=False disables the HTML bar and detailed DevBar-Data header by default, but query collection and Server-Timing remain active. Use the conditional setup above to disable collection in production.

Configuration

All settings are optional. Set them in a DEVBAR dictionary in your Django settings:

DEVBAR = {
    "POSITION": "bottom-right",  # bottom-right (default), bottom-left, top-right, top-left
    "SHOW_BAR": None,  # follows DEBUG; set True/False to override
    "ENABLE_DEVTOOLS_DATA": None,  # follows DEBUG; set True/False to override
    "DEVTOOLS_HEADER_MAX_BYTES": 6144,  # max bytes for DevBar-Data header payload
    "DEVTOOLS_MAX_QUERIES": None,  # optional cap for query entries sent to DevTools
}

Header limits reduce data sent to DevTools, not query collection or its memory use.

Response headers

DevBar always adds Server-Timing with database, application, and total time. You can view it in the browser's Network tab under Timing:

Server-Timing: db;dur=87.50, app;dur=41.30, total;dur=128.80

Timings and query counts exclude streaming body generation and queries executed while a streaming response is consumed.

With DEBUG=True, DevBar also adds a DevBar-Data JSON header by default:

• The q entries contain query details, with dup and sim flags for duplicate and similar queries.
• The payload is truncated to fit DEVTOOLS_HEADER_MAX_BYTES.
• Truncated payloads include tr, q_total, and q_sent metadata.

Use these headers to inspect API responses, read metrics in the browser extension, or check query counts in automated tests.

Browser extension

Install the extension from Chrome Web Store or Firefox Add-ons to view metrics in DevTools.

See browser-extension/README.md for more details.