django-debug-toolbar 的安装及安装中可能遇到的问题

简介

django-debug-toolbar 是一个非常方便的工具，可以深入了解代码的工作以及它花费的时间，特别是它可以显示你的页面生成的所有SQL查询，以及每个sql所需要的时间。
django-debug-toolbar官方文档地址：
https://django-debug-toolbar.readthedocs.io/en/stable/

安装

注意
想要使用debug_toolbar工具，settings.py 中的DEBUG一定要设置为True，这是前提：

通过pip 安装django-debug-toolbar

安装完成后，运行 pip list 命令，出现下图页面说明安装成功：


配置settings.py
1.注册debug_toolbar这个app,在settings.py中添加debug_toobar

# 官方文档中指出：debug_toolbar的注册一定要放在django.contrib.staticfiles这个app的后面。
INSTALLED_APPS = [
    # ...
    'django.contrib.staticfiles',
    # ...
    'debug_toolbar',
]

STATIC_URL = '/static/'

2.在项目的urls.py文件中设置debug_toolbar的路径

from django.conf import settings
from django.urls import path, include

# 判断当前是否为调试模式  所以在settings.py 中一定要配置Debug = True 才能调用debug_toolbar
if settings.DEBUG:
    import debug_toolbar
    urlpatterns.insert(0, path("__debug__/", include(debug_toolbar.urls)))

3.启用中间件，在settings.py中配置中间件

MIDDLEWARE = [
    # 处理编码和响应的中间件放在最前面
    'debug_toolbar.middleware.DebugToolbarMiddleware', # 如果没有处理编码和响应的中间件，这个中间件就应该放在最前面
    # ...
]

在settings中的MIDDLEWARE配置’debug_toolbar.middleware.DebugToolbarMiddleware’,我们要把django-debug-toolbar这个中间件尽可能配置到最前面，但是，必须要放在处理编码和响应内容的中间件后面，比如我们要是使用了GZipMiddleware，就要把DebugToolbarMiddleware放在GZipMiddleware后面。
4.在setting.py中设置debug_toolbar的显示

DEBUG_TOOLBAR_CONFIG = {
    'JQUERY_URL': 'https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js',
    'SHOW_COLLAPSED': True,
    'SHOW_TOOLBAR_CALLBACK': lambda x: True,
}

此时，运行项目，即可在启动的项目右侧看到debug_toolbar工具栏

安装过程中遇到的问题

1.问题描述：
js文件被浏览器拦截(浏览器报错 MIME 类型（“text/plain”）不匹配)，导致debug_toolbar无法显示

2.什么情况下会出现这个问题：
在setting.py 中的DEBUG=False的情况下运行了项目后，将DEBUG修改为True并配置debug_toolbar的相关信息后，再次启动服务，运行项目后就会出现上图中的错误信息
3.问题分析：
出现的问题根本原因是：当我们在开发django应用时如果设置了 DEBUG = True，那么django便会自动帮我们对静态文件进行路由；但是当我们设置DEBUG = False后，这一功能便没有了，此时静态文件就会出现加载失败的情况，想要让静态文件正常显示，我们就需要配置静态文件服务了。参考官方文档https://docs.djangoproject.com/en/2.0/howto/static-files/
4.解决方法：
在setting.py 中新增如下代码：

在urls.py中新增如下代码：

在项目包下面的__init__.py中添加如下代码：

import mimetypes

mimetypes.add_type("text/css", ".css", True)
mimetypes.add_type("text/javascript", ".js", True)

重新启动项目，此时debug_toolbar工具栏即可显示