Add devtools tunneling, improve headers (#2)

Author: amureki

README.md

@@ -1,6 +1,6 @@
 # django-devbar
 
-Lightweight performance devbar for Django. Shows DB query count, query duration, and response time.
+Lightweight performance devbar for Django. Shows DB query count, query duration, application time, and detects duplicate queries with visual severity indicators.
 
 ![devbar example](https://raw.githubusercontent.com/amureki/django-devbar/main/docs/devbar-example.svg)
 
@@ -29,8 +29,19 @@ DEVBAR_POSITION = "top-left"
 # Show HTML overlay (default: DEBUG)
 DEVBAR_SHOW_BAR = True
 
-# Add X-DevBar-* response headers (default: False)
+# Add DevBar-* response headers (default: False)
 DEVBAR_SHOW_HEADERS = True
+
+# Enable console logging for duplicate queries (default: True)
+DEVBAR_ENABLE_CONSOLE = True
+
+# Performance thresholds for warning/critical levels (defaults shown)
+DEVBAR_THRESHOLDS = {
+    "time_warning": 500,    # ms
+    "time_critical": 1500,  # ms
+    "count_warning": 20,    # queries
+    "count_critical": 50,   # queries
+}
 ```
 
 ## Response Headers
@@ -43,9 +54,9 @@ When `DEVBAR_SHOW_HEADERS = True`, performance metrics are added as HTTP respons
 
 Headers included:
 
-| Header | Description |
-|--------|-------------|
-| `X-DevBar-Query-Count` | Number of database queries executed |
-| `X-DevBar-Query-Duration` | Total time spent in database queries (ms) |
-| `X-DevBar-Response-Time` | Total request-response cycle time (ms) |
-| `X-DevBar-Has-Duplicates` | Present (value `1`) if duplicate queries detected |
+| Header | Example | Description |
+|--------|---------|-------------|
+| `DevBar-Query-Count` | `12` | Number of database queries executed |
+| `DevBar-DB-Time` | `87ms` | Total time spent in database queries |
+| `DevBar-App-Time` | `41ms` | Application time (total time minus DB time) |
+| `DevBar-Duplicates` | `3` | Number of duplicate queries detected (only present if duplicates found) |

pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "django-devbar"
-version = "0.1.1"
+version = "0.1.2"
 description = "Lightweight performance devbar for Django"
 readme = "README.md"
 license = "MIT"

src/django_devbar/__init__.py

@@ -1,4 +1,4 @@
 from .middleware import DevBarMiddleware
 
-__version__ = "0.1.1"
+__version__ = "0.1.2"
 __all__ = ["DevBarMiddleware"]

src/django_devbar/conf.py

@@ -7,6 +7,13 @@
     "top-left": "top:0;left:0",
 }
 
+DEFAULT_THRESHOLDS = {
+    "time_warning": 500,
+    "time_critical": 1500,
+    "count_warning": 20,
+    "count_critical": 50,
+}
+
 
 def get_position():
     key = getattr(settings, "DEVBAR_POSITION", "bottom-right")
@@ -19,3 +26,14 @@ def get_show_bar():
 
 def get_show_headers():
     return getattr(settings, "DEVBAR_SHOW_HEADERS", False)
+
+
+def get_enable_console():
+    return getattr(settings, "DEVBAR_ENABLE_CONSOLE", True)
+
+
+def get_thresholds():
+    user_thresholds = getattr(settings, "DEVBAR_THRESHOLDS", {})
+    final = DEFAULT_THRESHOLDS.copy()
+    final.update(user_thresholds)
+    return final

src/django_devbar/middleware.py

@@ -1,28 +1,55 @@
+import json
 import re
 from contextlib import ExitStack
 from time import perf_counter
 
 from django.db import connections
 
 from . import tracker
-from .conf import get_position, get_show_bar, get_show_headers
-
-DEVBAR_HTML = (
-    '<div id="django-devbar" style="position:fixed;{position};'
-    "background:rgba(0,0,0,0.7);color:rgba(255,255,255,0.85);"
-    "padding:4px 8px;margin:8px;"
-    "font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;"
-    "font-size:10px;line-height:1.3;font-weight:500;letter-spacing:0.02em;"
-    "z-index:99999;border-radius:3px;"
-    'backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)">'
-    '<span style="opacity:0.5">queries</span> {count}{duplicates} <span style="opacity:0.5">·</span> '
-    '<span style="opacity:0.5">db</span> {duration:.0f}ms <span style="opacity:0.5">·</span> '
-    '<span style="opacity:0.5">total</span> {response_time:.0f}ms</div>'
+from .conf import (
+    get_position,
+    get_show_bar,
+    get_show_headers,
+    get_thresholds,
+    get_enable_console,
 )
 
-DUPLICATE_MARKER = (
-    ' <span style="color:#f59e0b" title="Duplicate queries detected">(d)</span>'
-)
+STYLE_BLOCK = """<style>
+#django-devbar {
+    position: fixed; %s; z-index: 99999;
+    font-family: -apple-system, system-ui, sans-serif;
+    font-size: 11px; font-weight: 500;
+    padding: 4px 8px; border-radius: 4px;
+    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
+    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+    transition: all 0.2s ease;
+    cursor: default;
+    line-height: 1.3;
+    background: rgba(20, 20, 20, 0.85);
+    color: #e5e5e5;
+}
+#django-devbar.level-warn { border-left: 3px solid #f59e0b; }
+#django-devbar.level-crit { border-left: 3px solid #dc2626; }
+#django-devbar span { opacity: 0.7; margin-right: 2px; }
+#django-devbar strong { opacity: 1; font-weight: 600; margin-right: 6px; }
+</style>"""
+
+BAR_TEMPLATE = """<div id="django-devbar" class="level-%s">
+<span>db</span> <strong>%.0fms</strong>
+<span>py</span> <strong>%.0fms</strong>
+<span>count</span> <strong>%d</strong>%s
+</div>"""
+
+SCRIPT_TEMPLATE = """<script>
+(function() {
+    const stats = %s;
+    if (stats.duplicates && stats.duplicates.length > 0) {
+        console.groupCollapsed(`⚠️ Django DevBar: Duplicate Queries Detected (${stats.duplicates.length})`);
+        console.table(stats.duplicates.map(d => ({SQL: d.sql, Parameters: d.params, Duration_ms: d.duration})));
+        console.groupEnd();
+    }
+})();
+</script>"""
 
 BODY_CLOSE_RE = re.compile(rb"</body\s*>", re.IGNORECASE)
 
@@ -32,8 +59,8 @@ def __init__(self, get_response):
         self.get_response = get_response
 
     def __call__(self, request):
-        request_start = perf_counter()
         tracker.reset()
+        request_start = perf_counter()
 
         with ExitStack() as stack:
             for alias in connections:
@@ -42,48 +69,85 @@ def __call__(self, request):
                 )
             response = self.get_response(request)
 
-        response_time = (perf_counter() - request_start) * 1000
+        total_time = (perf_counter() - request_start) * 1000
         stats = tracker.get_stats()
 
+        db_time = stats["duration"]
+        python_time = max(0, total_time - db_time)
+
+        stats["python_time"] = python_time
+        stats["total_time"] = total_time
+
+        thresholds = get_thresholds()
+        level = self._determine_level(stats, total_time, thresholds)
+
         if get_show_headers():
-            self._add_headers(response, stats, response_time)
+            self._add_headers(response, stats)
 
         if get_show_bar() and self._can_inject(response):
-            self._inject_devbar(response, stats, response_time)
+            self._inject_devbar(response, stats, level)
 
         return response
 
-    def _add_headers(self, response, stats, response_time):
-        response["X-DevBar-Query-Count"] = str(stats["count"])
-        response["X-DevBar-Query-Duration"] = f"{stats['duration']:.1f}"
-        response["X-DevBar-Response-Time"] = f"{response_time:.1f}"
+    def _determine_level(self, stats, total_time, thresholds):
+        if (
+            total_time > thresholds["time_critical"]
+            or stats["count"] > thresholds["count_critical"]
+        ):
+            return "crit"
+        if (
+            stats["has_duplicates"]
+            or total_time > thresholds["time_warning"]
+            or stats["count"] > thresholds["count_warning"]
+        ):
+            return "warn"
+        return "ok"
+
+    def _add_headers(self, response, stats):
+        response["DevBar-Query-Count"] = str(stats["count"])
+        response["DevBar-DB-Time"] = f"{stats['duration']:.0f}ms"
+        response["DevBar-App-Time"] = f"{stats['python_time']:.0f}ms"
         if stats["has_duplicates"]:
-            response["X-DevBar-Has-Duplicates"] = "1"
+            response["DevBar-Duplicates"] = str(len(stats["duplicate_queries"]))
 
     def _can_inject(self, response):
         if getattr(response, "streaming", False):
             return False
         content_type = response.get("Content-Type", "").lower()
-        if "text/html" not in content_type:
+        if "html" not in content_type:
             return False
         if response.get("Content-Encoding"):
             return False
         return hasattr(response, "content")
 
-    def _inject_devbar(self, response, stats, response_time):
+    def _inject_devbar(self, response, stats, level):
         content = response.content
         matches = list(BODY_CLOSE_RE.finditer(content))
         if not matches:
             return
 
-        devbar_html = DEVBAR_HTML.format(
-            position=get_position(),
-            count=stats["count"],
-            duplicates=DUPLICATE_MARKER if stats["has_duplicates"] else "",
-            duration=stats["duration"],
-            response_time=response_time,
-        ).encode(response.charset or "utf-8")
+        dup_marker = (
+            ' <strong style="color:#f59e0b">(D)</strong>'
+            if stats["has_duplicates"]
+            else ""
+        )
+
+        css = STYLE_BLOCK % get_position()
+        html = BAR_TEMPLATE % (
+            level,
+            stats["duration"],
+            stats["python_time"],
+            stats["count"],
+            dup_marker,
+        )
+
+        script = ""
+        if get_enable_console() and stats.get("duplicate_queries"):
+            console_data = {"duplicates": stats["duplicate_queries"]}
+            script = SCRIPT_TEMPLATE % json.dumps(console_data)
+
+        payload = (css + html + script).encode(response.charset or "utf-8")
 
         idx = matches[-1].start()
-        response.content = content[:idx] + devbar_html + content[idx:]
+        response.content = content[:idx] + payload + content[idx:]
         response["Content-Length"] = str(len(response.content))

src/django_devbar/tracker.py

@@ -3,24 +3,23 @@
 
 _query_count: ContextVar[int] = ContextVar("query_count", default=0)
 _query_duration: ContextVar[float] = ContextVar("query_duration", default=0.0)
-_seen_queries: ContextVar[dict] = ContextVar(
-    "seen_queries"
-)  # sql -> set of params hashes
-_has_duplicates: ContextVar[bool] = ContextVar("has_duplicates", default=False)
+_seen_queries: ContextVar[dict] = ContextVar("seen_queries", default={})
+_duplicate_log: ContextVar[list] = ContextVar("duplicate_log", default=[])
 
 
 def reset():
     _query_count.set(0)
     _query_duration.set(0.0)
     _seen_queries.set({})
-    _has_duplicates.set(False)
+    _duplicate_log.set([])
 
 
 def get_stats():
     return {
         "count": _query_count.get(),
         "duration": _query_duration.get(),
-        "has_duplicates": _has_duplicates.get(),
+        "has_duplicates": bool(_duplicate_log.get()),
+        "duplicate_queries": _duplicate_log.get(),
     }
 
 
@@ -36,14 +35,22 @@ def _record(sql, params, duration):
     _query_duration.set(_query_duration.get() + duration)
 
     seen = _seen_queries.get()
+    params_hash = _hash_params(params)
+
     if sql in seen:
-        params_hash = _hash_params(params)
         if params_hash in seen[sql]:
-            _has_duplicates.set(True)
+            param_str = str(params)
+            if len(param_str) > 200:
+                param_str = param_str[:200] + "..."
+
+            duplicates = _duplicate_log.get()
+            duplicates.append(
+                {"sql": sql, "params": param_str, "duration": round(duration, 2)}
+            )
         else:
             seen[sql].add(params_hash)
     else:
-        seen[sql] = {_hash_params(params)}
+        seen[sql] = {params_hash}
 
 
 def tracking_wrapper(execute, sql, params, many, context):

tests/test_middleware.py

@@ -121,10 +121,10 @@ def get_response(request):
         request = rf.get("/")
         response = middleware(request)
 
-        assert "X-DevBar-Query-Count" in response
-        assert "X-DevBar-Query-Duration" in response
-        assert "X-DevBar-Response-Time" in response
-        assert "X-DevBar-Has-Duplicates" not in response
+        assert "DevBar-Query-Count" in response
+        assert "DevBar-DB-Time" in response
+        assert "DevBar-App-Time" in response
+        assert "DevBar-Duplicates" not in response
 
     def test_headers_hidden_when_disabled(self, rf, settings):
         settings.DEVBAR_SHOW_HEADERS = False
@@ -138,16 +138,24 @@ def get_response(request):
         request = rf.get("/")
         response = middleware(request)
 
-        assert "X-DevBar-Query-Count" not in response
-        assert "X-DevBar-Query-Duration" not in response
-        assert "X-DevBar-Response-Time" not in response
-        assert "X-DevBar-Has-Duplicates" not in response
+        assert "DevBar-Query-Count" not in response
+        assert "DevBar-DB-Time" not in response
+        assert "DevBar-App-Time" not in response
+        assert "DevBar-Duplicates" not in response
 
     def test_has_duplicates_header_present_when_duplicates(self, rf, monkeypatch):
         monkeypatch.setattr(
             tracker,
             "get_stats",
-            lambda: {"count": 2, "duration": 10.0, "has_duplicates": True},
+            lambda: {
+                "count": 3,
+                "duration": 10.0,
+                "has_duplicates": True,
+                "duplicate_queries": [
+                    {"sql": "SELECT * FROM foo", "params": "(1,)", "duration": 5.0},
+                    {"sql": "SELECT * FROM bar", "params": "(2,)", "duration": 3.0},
+                ],
+            },
         )
 
         def get_response(request):
@@ -159,4 +167,4 @@ def get_response(request):
         request = rf.get("/")
         response = middleware(request)
 
-        assert response["X-DevBar-Has-Duplicates"] == "1"
+        assert response["DevBar-Duplicates"] == "2"