はじめに

こんにちは。ryoです。
今回はDjangoをフレームワークとしたWebアプリを開発する際に、開発環境にインストールしておくと何かと便利なDjango Debug Toolbarのインストール方法について解説します。
使用方法は今後別記事でまとめたいと思います。

Django Debug Toolbarとは？

Django Debug ToolbarとはDjango Webアプリケーションをデバッグするのに非常に有用なサードパーティ製のツールです。
ツールをインストールすると開発環境のブラウザにツールバーが表示され、以下の情報を常に確認することができます。
※表示する情報はカスタマイズすることもできます。（後述の補足1を参照）

履歴：リクエストの履歴、各リクエストの統計。
バージョン：Python、Django、およびインストールされているアプリのバージョン。
時間：CPU等のリソースがリクエストを処理するのにかかった時間、ブラウザに表示されるまでの時間等
設定：設定ファイルで設定されている値
ヘッダー：リクエスト・レスポンスのヘッダ情報
リクエスト：GET/POST/cookie/セッション変数
SQL：画面表示時に発行されるSQL文、実行時間、発行回数
静的ファイル：画面表示時に読み込まれている静的ファイルの情報
テンプレート：画面表示時に使用されているテンプレート情報(HTMLファイル名やコンテキスト情報)
キャッシュ：画面表示時のキャッシュ情報
シグナル：画面表示時のシグナル情報

個人的には特に画面表示時に発行されるSQL文、実行時間、発行回数を簡単に確認できるのがすごくありがたいです。
DjangoのORM（Object-Relational Mapping)は慣れればとても使いやすいですが、意識しないとN+1問題を引き起こしてしまい、レスポンスが悪化につながる恐れがあります。
そのような場合はDjango Debug ToolbarでSQLを確認することでN+1問題が起きていないかをチェックすることができます。

ちなみにN＋1問題について(https://www.techscore.com/blog/2012/12/25/rails%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E7%B4%B9%E4%BB%8B-n1%E5%95%8F%E9%A1%8C%E3%82%92%E6%A4%9C%E5%87%BA%E3%81%99%E3%82%8B%E3%80%8Cbullet%E3%80%8D/) に記載があるのでご参照ください。

Django Debug Toolbarのインストール方法

検証環境は以下です。
OS：Mac
django-debug-toolbar：4.2.0
Django：3.2.16

①パッケージをインストール

以下のpipコマンドを実行し、Django Debug Toolbarのパッケージをインストールします。

$ python -m pip install django-debug-toolbar

公式ドキュメント（https://django-debug-toolbar.readthedocs.io/en/latest/installation.html) では、pipによるインストールが推奨されていますが、別の方法としてdebug_toolbarディレクトリのコピーを取得して、Pythonのパスに追加することで使用することもできます。

②Django Debug Toolbar用の設定追加

Django Debug Toolbar用の設定を追加します。

Django Debug ToolbarはDEBUG=Trueの場合で動作するものであるため、開発用と本番環境用にsettings.pyを分けている場合には開発用のsettings.pyのみ設定すればOKです。

（１）静的ファイルの構成を確認（settings.py）
静的ファイルの構成を確認します。この項目は大抵の場合、Djangoプロジェクト開始時に設定が完了しているので、正しく設定されているか確認するだけになるかと思います。
具体的にはsettings.pyのINSTALLED_APPSにdjango.contrib.staticfiles、STATIC_URLに'/static/'が設定されていることを確認します。

設定されていない場合には以下のように設定してください。

settings.py

# ...
INSTALLED_APPS = [
    # ...
    'django.contrib.staticfiles',  # (デフォルトで存在。存在していない場合は設定。)
    # ...
]

STATIC_URL = '/static/' # (デフォルトで存在。存在していない場合は設定。)
# ...

（２）Django Debug Toolbarアプリケーションを追加（settings.py）
INSTALLED_APPSに'debug_toolbar'を追加します。

settings.py

# ...
INSTALLED_APPS = [
    # ...
    'debug_toolbar',  # 追加
]
# ...

（３）Django Debug Toolbar用URLの追加（プロジェクト用urls.py）
Django Debug Toolbar用URLをプロジェクト用urls.pyに追加します。この例では__debug__プレフィックスを使用していますが、アプリケーションの URL と衝突しない任意のプレフィックスを使用できます。

myproject/urls.py

from django.urls import include, path

urlpatterns = [
    # ...
    path("__debug__/", include("debug_toolbar.urls")),
]

（４）ミドルウェアの追加（settings.py）
Django Debug Toolbarはほとんどがミドルウェアに実装されているため、settings.pyのMIDDLEWAREに以下の設定を追加します。

settings.py

# ...
MIDDLEWARE = [
    # ...
    "debug_toolbar.middleware.DebugToolbarMiddleware",
    # ...
]
# ...

注意点としては公式ドキュメントにはMIDDLEWAREリスト内における"debug_toolbar.middleware.DebugToolbarMiddleware"の順序が大切であると記載があります。

具体的には「"debug_toolbar.middleware.DebugToolbarMiddleware"をできるだけリストの上部にする必要があるが、応答のコンテンツをエンコードする他のGZipMiddleware等のミドルウェアの後に来る必要がある。」という旨の記載があります。

どこまで影響があるのか調べてみたくなり、筆者の検証環境で以下のように"debug_toolbar.middleware.DebugToolbarMiddleware"を試しに最下部にしてみましたが、特に挙動に問題はありませんでした。
ここに関しては個人的に詳しくわかっていないため、お詳しい方はコメントいただけると嬉しいです。

settings.p

# ...
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',
    'allauth.account.middleware.AccountMiddleware',
    'debug_toolbar.middleware.DebugToolbarMiddleware'
]
# ...

（５）内部IPアドレスの設定（settings.py）
Django Debug Toolbarは、IPアドレスがDjangoのINTERNAL_IPS設定にリストされている場合にのみ表示されます。開発環境の場合はINTERNAL_IPSに"127.0.0.1"を追加することで表示出来ます。

settings.py

# ...
INTERNAL_IPS = ['127.0.0.1',]
# ...

③動作確認

開発環境でrunserverコマンドを実行し、
[http://127.0.0.1:8000/]をブラウザで開くと画面右にDjango Debug Toolbarが表示されます。（以下赤枠の部分）

（補足1）Django Debug Toolbarのカスタマイズ

Django Debug Toolbarはユーザーが任意にカスタマイズすることが出来ます。

カスタマイズはsettings.pyに公式ドキュメント（https://django-debug-toolbar.readthedocs.io/en/latest/configuration.html) 記載の項目を任意で設定することで上書き出来ます。

例えば、Django Debug Toolbarに表示する項目（パネル）を変更したい場合は、settings.pyにDEBUG_TOOLBAR_PANELS変数を定義し、その中に表示項目を定義することでその表示項目のみを表示できます。

settings.py

# ...
# DEBUG_TOOLBAR_PANELSに定義した項目のみ表示される
DEBUG_TOOLBAR_PANELS = [
    'debug_toolbar.panels.history.HistoryPanel',
    'debug_toolbar.panels.versions.VersionsPanel',
    'debug_toolbar.panels.timer.TimerPanel',
    'debug_toolbar.panels.settings.SettingsPanel',
    'debug_toolbar.panels.headers.HeadersPanel',
    'debug_toolbar.panels.request.RequestPanel',
    'debug_toolbar.panels.sql.SQLPanel',
    'debug_toolbar.panels.staticfiles.StaticFilesPanel',
    'debug_toolbar.panels.templates.TemplatesPanel',
    'debug_toolbar.panels.cache.CachePanel',
    'debug_toolbar.panels.signals.SignalsPanel',
    'debug_toolbar.panels.redirects.RedirectsPanel',
    'debug_toolbar.panels.profiling.ProfilingPanel',
]
# ...

ただし、公式ドキュメントには「Django Debug Toolbarには、ほとんどの Django プロジェクトにとって正常であると考えられるデフォルト構成が付属しています。以下に示すデフォルト値を設定モジュールにやみくもにコピーアンドペーストは推奨されていません。」という旨の注記があります。筆者としてもDjango Debug Toolbarをカスタマイズせずに使用してみて特に困ったことはないので、特別な理由がない限りはカスタマイズをしなくても良いと考えています。

（補足2）mimetypesのエラーが出た場合の対処

筆者のMac環境では上記手順で問題なくDjango Debug Toolbarを使用できるようになりましたが、別のWindows 10のパソコンに同一手順でDjango Debug Toolbarをインストールした場合に、mimetypesのエラーが出ました。

Failed to load module script: The server responded with a non-JavaScript MIME type of "text/plain".

その場合はsettings.pyに以下のコードを追記して解決しました。

settings.py

# ...
if DEBUG:
    import mimetypes
    mimetypes.add_type("text/javascript", "js", True)
# ...

まとめ

この記事ではDjango Debug Toolbarのインストール方法についてまとめました。

開発環境にインストールしておくと何かと便利で、開発効率も格段にアップすると思うのでおすすめです。

ここまでご覧いただきありがとうございました。

参考

https://django-debug-toolbar.readthedocs.io/en/latest/installation.html
https://djangobrothers.com/blogs/django_debug_toolbar/