Django Debug toolbar is not showing though `view page source` is showing debug tool's html

261 Views Asked by At

I am a beginner at Django. Django-debug-tool is not showing. I have gone through the official documentation step by step. But It did work for me. I have seen lots of existing answers as well seems it doesn't work. Interestingly from the browser when I go to view page source it shows the debug tool's HTML after my page's code. But it doesn't show.

Django version: 4.1.7

django-debug-toolbar: latest

settings.py

from pathlib import Path

# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = "django-insecure-ug*k0401%7v_i887cu4m$szp%(i=h=*9yyi&4b#71%ozksz1%6"

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = []


INSTALLED_APPS = [
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",
    "playground",
    "debug_toolbar"
]

MIDDLEWARE = [
    "django.middleware.security.SecurityMiddleware",
    "django.contrib.sessions.middleware.SessionMiddleware",
    "django.middleware.common.CommonMiddleware",
    "django.middleware.csrf.CsrfViewMiddleware",
    "django.contrib.auth.middleware.AuthenticationMiddleware",
    "django.contrib.messages.middleware.MessageMiddleware",
    "django.middleware.clickjacking.XFrameOptionsMiddleware",
    "debug_toolbar.middleware.DebugToolbarMiddleware",
]

INTERNAL_IPS = [
    "127.0.0.1",
]

ROOT_URLCONF = "storefront.urls"

TEMPLATES = [
    {
        "BACKEND": "django.template.backends.django.DjangoTemplates",
        "DIRS": [],
        "APP_DIRS": True,
        "OPTIONS": {
            "context_processors": [
                "django.template.context_processors.debug",
                "django.template.context_processors.request",
                "django.contrib.auth.context_processors.auth",
                "django.contrib.messages.context_processors.messages",
            ],
        },
    },
]

WSGI_APPLICATION = "storefront.wsgi.application"

DATABASES = {
    "default": {
        "ENGINE": "django.db.backends.sqlite3",
        "NAME": BASE_DIR / "db.sqlite3",
    }
}

AUTH_PASSWORD_VALIDATORS = [
    {
        "NAME": "django.contrib.auth.password_validation.UserAttributeSimilarityValidator",
    },
    {
        "NAME": "django.contrib.auth.password_validation.MinimumLengthValidator",
    },
    {
        "NAME": "django.contrib.auth.password_validation.CommonPasswordValidator",
    },
    {
        "NAME": "django.contrib.auth.password_validation.NumericPasswordValidator",
    },
]

LANGUAGE_CODE = "en-us"

TIME_ZONE = "UTC"

USE_I18N = True

USE_TZ = True

STATIC_URL = "static/"

DEFAULT_AUTO_FIELD = "django.db.models.BigAutoField"


urls.py

from django.contrib import admin
from django.urls import path, include
urlpatterns = [
    path("admin/", admin.site.urls),
    path('playground/', include('playground.urls')),
    path('__debug__/', include('debug_toolbar.urls'))
] 


Terminal Output

[01/Apr/2023 10:46:50] "GET / HTTP/1.1" 404 11939
[01/Apr/2023 10:46:50] "GET /static/debug_toolbar/css/toolbar.css HTTP/1.1" 304 0
[01/Apr/2023 10:46:50] "GET /static/debug_toolbar/js/toolbar.js HTTP/1.1" 304 0
[01/Apr/2023 10:46:50] "GET /static/debug_toolbar/css/print.css HTTP/1.1" 304 0
[01/Apr/2023 10:46:56] "GET /playground/hello/ HTTP/1.1" 200 9757

View page source


<html>
    <body>   
        <h1>ALim</h1>
    

<link rel="stylesheet" href="/static/debug_toolbar/css/print.css" media="print">
<link rel="stylesheet" href="/static/debug_toolbar/css/toolbar.css">


<script type="module" src="/static/debug_toolbar/js/toolbar.js" async></script>

<div id="djDebug" class="djdt-hidden" dir="ltr"
     
     data-store-id="c7f18a2eed4c4e3ebaa43ed570ce3619"
     data-render-panel-url="/__debug__/render_panel/"
     
     
     
     data-sidebar-url="/__debug__/history_sidebar/"
     
     data-default-show="true"
     >
  <div class="djdt-hidden" id="djDebugToolbar">
    <ul id="djDebugPanelList">
      <li><a id="djHideToolBarButton" href="#" title="Hide toolbar">Hide »</a></li>
      
        

<li id="djdt-HistoryPanel" class="djDebugPanelButton">
  <input type="checkbox" data-cookie="djdtHistoryPanel" checked title="Disable for next and successive requests">
  
    <a href="#" title="History" class="HistoryPanel">
  
  History
  
    
      <br><small>/playground/hello/</small>
    
  
  
    </a>
  
</li>

      
        

<li id="djdt-VersionsPanel" class="djDebugPanelButton">
  <input type="checkbox" data-cookie="djdtVersionsPanel" checked title="Disable for next and successive requests">
  
    <a href="#" title="Versions" class="VersionsPanel">
  
  Versions
  
    
      <br><small>Django 4.1.7</small>
    
  
  
    </a>
  
</li>

      
        

<li id="djdt-TimerPanel" class="djDebugPanelButton">
  <input type="checkbox" data-cookie="djdtTimerPanel" checked title="Disable for next and successive requests">
  
    <div class="djdt-contentless">
  
  Time
  
    
      <br><small>Total: 16.06ms</small>
    
  
  
    </div>
  
</li>

      
        

<li id="djdt-SettingsPanel" class="djDebugPanelButton">
  <input type="checkbox" data-cookie="djdtSettingsPanel" checked title="Disable for next and successive requests">
  
    <a href="#" title="Settings from storefront.settings" class="SettingsPanel">
  
  Settings
  
    
      
    
  
  
    </a>
  
</li>

      
        

<li id="djdt-HeadersPanel" class="djDebugPanelButton">
  <input type="checkbox" data-cookie="djdtHeadersPanel" checked title="Disable for next and successive requests">
  
    <a href="#" title="Headers" class="HeadersPanel">
  
  Headers
  
    
      
    
  
  
    </a>
  
</li>

      
        

<li id="djdt-RequestPanel" class="djDebugPanelButton">
  <input type="checkbox" data-cookie="djdtRequestPanel" checked title="Disable for next and successive requests">
  
    <a href="#" title="Request" class="RequestPanel">
  
  Request
  
    
      <br><small>say_hello</small>
    
  
  
    </a>
  
</li>

      
        

<li id="djdt-SQLPanel" class="djDebugPanelButton">
  <input type="checkbox" data-cookie="djdtSQLPanel" checked title="Disable for next and successive requests">
  
    <a href="#" title="SQL queries from 0 connections" class="SQLPanel">
  
  SQL
  
    
      <br><small>0 queries in 0.00ms</small>
    
  
  
    </a>
  
</li>

      
        

<li id="djdt-StaticFilesPanel" class="djDebugPanelButton">
  <input type="checkbox" data-cookie="djdtStaticFilesPanel" checked title="Disable for next and successive requests">
  
    <a href="#" title="Static files (137 found, 0 used)" class="StaticFilesPanel">
  
  Static files
  
    
      <br><small>0 files used</small>
    
  
  
    </a>
  
</li>

      
        

<li id="djdt-TemplatesPanel" class="djDebugPanelButton">
  <input type="checkbox" data-cookie="djdtTemplatesPanel" checked title="Disable for next and successive requests">
  
    <a href="#" title="Templates (1 rendered)" class="TemplatesPanel">
  
  Templates
  
    
      <br><small>hello.html</small>
    
  
  
    </a>
  
</li>

      
        

<li id="djdt-CachePanel" class="djDebugPanelButton">
  <input type="checkbox" data-cookie="djdtCachePanel" checked title="Disable for next and successive requests">
  
    <a href="#" title="Cache calls from 1 backend" class="CachePanel">
  
  Cache
  
    
      <br><small>0 calls in 0.00ms</small>
    
  
  
    </a>
  
</li>

      
        

<li id="djdt-SignalsPanel" class="djDebugPanelButton">
  <input type="checkbox" data-cookie="djdtSignalsPanel" checked title="Disable for next and successive requests">
  
    <a href="#" title="Signals" class="SignalsPanel">
  
  Signals
  
    
      <br><small>30 receivers of 15 signals</small>
    
  
  
    </a>
  
</li>

      
        

<li id="djdt-LoggingPanel" class="djDebugPanelButton">
  <input type="checkbox" data-cookie="djdtLoggingPanel" checked title="Disable for next and successive requests">
  
    <a href="#" title="Log messages" class="LoggingPanel">
  
  Logging
  
    
      <br><small>0 messages</small>
    
  
  
    </a>
  
</li>

      
        

<li id="djdt-RedirectsPanel" class="djDebugPanelButton">
  <input type="checkbox" data-cookie="djdtRedirectsPanel" title="Enable for next and successive requests">
  
    <div class="djdt-contentless djdt-disabled">
  
  Intercept redirects
  
  
    </div>
  
</li>

      
        

<li id="djdt-ProfilingPanel" class="djDebugPanelButton">
  <input type="checkbox" data-cookie="djdtProfilingPanel" title="Enable for next and successive requests">
  
    <div class="djdt-contentless djdt-disabled">
  
  Profiling
  
  
    </div>
  
</li>

      
    </ul>
  </div>
  <div class="djdt-hidden" id="djDebugToolbarHandle">
    <div title="Show toolbar" id="djShowToolBarButton">
      <span id="djShowToolBarD">D</span><span id="djShowToolBarJ">J</span>DT
    </div>
  </div>

  
    


  <div id="HistoryPanel" class="djdt-panelContent djdt-hidden">
    <div class="djDebugPanelTitle">
      <button type="button" class="djDebugClose">×</button>
      <h3>History</h3>
    </div>
    <div class="djDebugPanelContent">
      
        <div class="djdt-loader"></div>
        <div class="djdt-scroll"></div>
      
    </div>
  </div>


  
    


  <div id="VersionsPanel" class="djdt-panelContent djdt-hidden">
    <div class="djDebugPanelTitle">
      <button type="button" class="djDebugClose">×</button>
      <h3>Versions</h3>
    </div>
    <div class="djDebugPanelContent">
      
        <div class="djdt-loader"></div>
        <div class="djdt-scroll"></div>
      
    </div>
  </div>


  
    



  
    


  <div id="SettingsPanel" class="djdt-panelContent djdt-hidden">
    <div class="djDebugPanelTitle">
      <button type="button" class="djDebugClose">×</button>
      <h3>Settings from storefront.settings</h3>
    </div>
    <div class="djDebugPanelContent">
      
        <div class="djdt-loader"></div>
        <div class="djdt-scroll"></div>
      
    </div>
  </div>


  
    


  <div id="HeadersPanel" class="djdt-panelContent djdt-hidden">
    <div class="djDebugPanelTitle">
      <button type="button" class="djDebugClose">×</button>
      <h3>Headers</h3>
    </div>
    <div class="djDebugPanelContent">
      
        <div class="djdt-loader"></div>
        <div class="djdt-scroll"></div>
      
    </div>
  </div>


  
    


  <div id="RequestPanel" class="djdt-panelContent djdt-hidden">
    <div class="djDebugPanelTitle">
      <button type="button" class="djDebugClose">×</button>
      <h3>Request</h3>
    </div>
    <div class="djDebugPanelContent">
      
        <div class="djdt-loader"></div>
        <div class="djdt-scroll"></div>
      
    </div>
  </div>


  
    


  <div id="SQLPanel" class="djdt-panelContent djdt-hidden">
    <div class="djDebugPanelTitle">
      <button type="button" class="djDebugClose">×</button>
      <h3>SQL queries from 0 connections</h3>
    </div>
    <div class="djDebugPanelContent">
      
        <div class="djdt-loader"></div>
        <div class="djdt-scroll"></div>
      
    </div>
  </div>


  
    


  <div id="StaticFilesPanel" class="djdt-panelContent djdt-hidden">
    <div class="djDebugPanelTitle">
      <button type="button" class="djDebugClose">×</button>
      <h3>Static files (137 found, 0 used)</h3>
    </div>
    <div class="djDebugPanelContent">
      
        <div class="djdt-loader"></div>
        <div class="djdt-scroll"></div>
      
    </div>
  </div>


  
    


  <div id="TemplatesPanel" class="djdt-panelContent djdt-hidden">
    <div class="djDebugPanelTitle">
      <button type="button" class="djDebugClose">×</button>
      <h3>Templates (1 rendered)</h3>
    </div>
    <div class="djDebugPanelContent">
      
        <div class="djdt-loader"></div>
        <div class="djdt-scroll"></div>
      
    </div>
  </div>


  
    


  <div id="CachePanel" class="djdt-panelContent djdt-hidden">
    <div class="djDebugPanelTitle">
      <button type="button" class="djDebugClose">×</button>
      <h3>Cache calls from 1 backend</h3>
    </div>
    <div class="djDebugPanelContent">
      
        <div class="djdt-loader"></div>
        <div class="djdt-scroll"></div>
      
    </div>
  </div>


  
    


  <div id="SignalsPanel" class="djdt-panelContent djdt-hidden">
    <div class="djDebugPanelTitle">
      <button type="button" class="djDebugClose">×</button>
      <h3>Signals</h3>
    </div>
    <div class="djDebugPanelContent">
      
        <div class="djdt-loader"></div>
        <div class="djdt-scroll"></div>
      
    </div>
  </div>


  
    


  <div id="LoggingPanel" class="djdt-panelContent djdt-hidden">
    <div class="djDebugPanelTitle">
      <button type="button" class="djDebugClose">×</button>
      <h3>Log messages</h3>
    </div>
    <div class="djDebugPanelContent">
      
        <div class="djdt-loader"></div>
        <div class="djdt-scroll"></div>
      
    </div>
  </div>


  
    



  
    



  
  <div id="djDebugWindow" class="djdt-panelContent djdt-hidden"></div>
</div>
</body>
</html>
0

There are 0 best solutions below