Posted at

AjaxアプリケーションでもDjango Debug Toolbarを使いたい

More than 1 year has passed since last update.


最近のサービス構成

最近作ってるサービスでは


  • APIサーバー[Django]

  • Web, iOS, Android

のように構成することが多く、Djangoはjsonを返すAPIサーバーとして使うことが増えました。


Django Debug Toolbarが不便である

すると、Djangoで便利だった、Django Debug Toolbarが、便利には動かないのですね。(Django Debug Toolbarは各APIでのパフォーマンスを知ることができる便利なデバッグツールです。SQLの履歴が出るので、主にこれを見ています)

https://github.com/django-debug-toolbar/django-debug-toolbar

もちろん、各APIのURL叩けば動いてくれますが、JSONが表示させるだけなので、


  • 何のViewかわかりづらい

  • POSTがめんどくさい

  • ユーザー認証が面倒くさい

などという問題があります。


REST FrameworkでAPIのフォーム画面を自動生成してもらう

REST Frameworkを使えば、ある程度の見た目やAPIを呼ぶための便利なフォームを提供してくているので見えなくはないのです。

http://www.django-rest-framework.org/

しかし、画面遷移がないため、APIのエンドポイントを覚えておかないといけず、めんどくさいです。


APIの一覧&ドキュメントのため、Swaggerを使う

そこで、django-rest-swaggerを使っています。APIが全部みれるので便利です。基本的にはSwaggerのUIで見ることが多いです。

https://github.com/marcgibbons/django-rest-swagger

コードの中にコメントを書いておけば、APIの説明を書けるので、ドキュメントの代わりとして使っています。モックとしても便利ですね。

また、フォームにはデフォルト値も設定しておけるので、REST Frameworkでフォームにいちいち値をいれる、めんどくささから開放されます。

しかしこの画面は、AjaxでAPIを呼んでるのでDjango Debug Toolbarは動きません。残念!


Ajaxでも動いてくれるDjango Debug Toolbarを探す

また、最近のWebは、AjaxでAPIを複数回呼ぶので、1APIというより1画面で、Djangoのパフォーマンスを知りたいです。

そして、探していたら、見つけました!

https://github.com/recamshak/django-debug-panel

Chromeのエクステンションでツールが提供されており、Ajaxで呼んだAPIの履歴も各ページごとにキャッシュしてくれます。(使用イメージはChromeストア見てください)

https://chrome.google.com/webstore/detail/django-debug-panel/nbiajhhibgfgkjegbnflpdccejocmbbn

便利だ!これでAPIサーバーとWebが別れていても、Django Debug Toolbarの恩恵が受けられます!

最高!