django-debug-toolbarが動かない

django-debug-toolbarを導入してみたところ「サイドバーは表示されるにも関わらず、パネルをクリックした際、表示されるはずの詳細情報が表示されない」という謎現象に遭遇しました。

状況

設定は複数のサイトや公式のドキュメントを見て書いたので、特に問題があるような気はしません。

と言うことはHTMLの書き方に問題があったのでしょうか？

標準ではbodyタグの下に要素が追加されるらしいので、確認します。

<div id="djDebug" class="djdt-hidden" dir="ltr" data-store-id="c00edea49571430282da1d3a0fd71302"
    data-render-panel-url="/render_panel/" style="display: block;">
    <div class="djdt-hidden" id="djDebugToolbar" style="display: none;"></div>
    <div class="djdt-hidden" id="djDebugToolbarHandle" style="display: block;"></div>

    <div id="VersionsPanel" class="djdt-panelContent" style="display: none;"></div>

    <div id="TimerPanel" class="djdt-panelContent" style="display: none;"></div>

    <div id="SettingsPanel" class="djdt-panelContent" style="display: none;"></div>

    <div id="HeadersPanel" class="djdt-panelContent" style="display: none;"></div>

    <div id="RequestPanel" class="djdt-panelContent" style="display: none;"></div>

    <div id="SQLPanel" class="djdt-panelContent" style="display: none;"></div>

    <div id="StaticFilesPanel" class="djdt-panelContent" style="display: none;"></div>

    <div id="TemplatesPanel" class="djdt-panelContent" style="display: none;"></div>

    <div id="CachePanel" class="djdt-panelContent" style="display: none;"></div>

    <div id="SignalsPanel" class="djdt-panelContent" style="display: none;"></div>

    <div id="LoggingPanel" class="djdt-panelContent" style="display: none;"></div>

    <div id="ProfilingPanel" class="djdt-panelContent" style="display: none;"></div>

    <div id="djDebugWindow" class="djdt-panelContent" style="display: none;"></div>
</div>

ちゃんと入ってました。※全部貼り付けると長くなるので省略しています。

と、ここであることに気づきます。

ちゃんとdebug-toolbarが使えるページもあるのです。

使えるページと使えないページで何か違いはないかと確認したところ、使えないページではページ内リンクにスクロールアニメーションを付けていることが発覚しました。

という事は、恐らくこいつが原因…

原因

最終的に原因は予想通りページ内リンクに付けたスクロールアニメーションでした。

jQueryを使って以下のようなコードでスクロールアニメーションを付けていました。

function selectorEscape(val) {
    return val.replace(/[ !"$%&'()*+,.\/:;<=>?@\[\\\]^`{|}~]/g, '\\$&');
}
$(function () {
    $('a[href^="#"]').click(function () {
        var time = 300;
        var href = $(this).attr("href");
        var target = $(href == "#" || href == "" ? 'html' : selectorEscape(href));
        var position = target.offset().top-60;
        $("html,body").animate({ scrollTop: position }, time, "swing");
        return false;
    });
});

この時の要素の取得に用いたセレクタの書き方が問題で、

'a[href^="#"]'

がダメでした。

debug-toolbarのパネル要素も<a href="#~~">だったのでその部分をスクロールアニメーションで上書きしまったがため使えない事態に陥っていました。

解決策

結果的にページ内リンクにはid属性で"index~~"というような名前をつけてセレクタもa[id^="index"]とすることで、対応しました。

皆さんもページ内リンクにスクロールアニメーションをつけるときは注意してください。

まぁ、今回はレアケースだと思いますが…