Why the debug toolbar not showing up?

Hi all,

I am a beginner in Django also a student. Please forgive me if I ask some stuiped questions. Here is the situation, I did the all configurations follows the official website’s requirement, but the toolbar is just not showing up.
I am not sure where is the problem. Let me show you my code:
this is part of seeting.py:

DEBUG = True

ALLOWED_HOSTS = []
# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'playground',
    'debug_toolbar',
]
STATIC_URL = 'static/'

MIDDLEWARE = [
    "debug_toolbar.middleware.DebugToolbarMiddleware",
    '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',
    
]

INTERNAL_IPS = [
    # ...
    "127.0.0.1",
    '192.168.31.205', 
    '0.0.0.0', 
    'localhost'
    # ...
]

This is urls.py:

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

This is how I open the server:

PS C:\Users\Dingjie Cao\Desktop\storefront> & "C:/Users/Dingjie Cao/.virtualenvs/storefront-XMCXTY1d/Scripts/Activate.ps1"
(storefront) PS C:\Users\Dingjie Cao\Desktop\storefront> python manage.py runserver

The logs:
Not Found: /
[06/Aug/2023 17:09:59] “GET / HTTP/1.1” 404 11240
[06/Aug/2023 17:10:07] “GET /playground/hello/ HTTP/1.1” 200 9133
Part of source code of website:

<html>
    <header>
        <h1>aaaa</h1>
    </header>
    <body>
        
        <h1>Hello Dingjie!</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"

Is there any problems that I use Djongo in a visual environment? Thank you guys for helping me.

You don’t show your TEMPLATES setting from your settings.py file. Please confirm that you have it configured correctly.

Are you accessing this on your own local development environment, or are you trying to access it on a remote environment?

local only, here us my templates setting:

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

Please post the template you are rendering for that page.
(Also see the notes at: Tips — Django Debug Toolbar 4.1.0 documentation)

Just render a html file:

<html>
    <header>
        <h1>aaaa</h1>
    </header>
    <body>
        {% if name %}
        <h1>Hello {{name}}!</h1>
        {% else %}
        <h1>Hello Word!</h1>
        {%endif%} 
    </body>
</html>

I will check the notes later soon

I found the solution! It needs to change a value in the registry editor’s .js folder.
Here is the video about how to fix this: solution video