Debug bar does not show up

Archive
1

Hi! I tried to activate the debug bar by changing the config value in user/config/system.yaml (debugger: enabled: to true). Although I cleared the cache manually, the debug bar is not shown.
Do I have to do anything else? Does it work with every theme (I use my own theme not based on antimatter)?

Thanks,
Marc

2

I just found out, that there are some JS errors now on my page, especially a “Uncaught ReferenceError: jQuery is not defined”, which is caused by debugbar.js.
Does the debug bar need jQuery on the page to work? Does it automatically inject jQuery in the page or does the page need to load jQuery itself (as an asset)?

3

It needs JQuery yes, and it does not automatically provide it. You can use the CDN version in your base twig template:

{% do assets.addJs('//code.jquery.com/jquery-2.1.3.min.js',101) %}

By using a 101 priority it will load before anything else. If you don’t normally need JQuery, you could even put a check around this that checks the config property for the debugger so:

{% if config.system.debugger.enabled %}
{% do assets.addJs('//code.jquery.com/jquery-2.1.3.min.js',101) %}
{% endif %}
4

Perfect! My site works without jQuery, so this check really helps.
Many Thanks!

5

I’m facing a similar problem on an admin plugin. The plugin adds a new tab to grav-admin, which works fine. Ghe only issue is that the debug bar does not show up. Strange thing is, that the debug bar is displayed on any other of the admin pages. Do you have any ideas what could be missing? It’s perhaps something very obvious, but I couldn’t figure it out by just looking at the grav source code, so any advise is welcome.
Btw, jquery is loaded in the plugins .html.twig file.

6

‘probably’ its a JS error. Can you check your console in your web developer tools?

7

Thank you for your help in that matter. Firebug displays the following error:

ReferenceError: PhpDebugBar is not defined

This is the line of code who causes the error (in the plugins .php file):

<script type="text/javascript">
var phpdebugbar = new PhpDebugBar.DebugBar();
...

A quick grep (search) over the grav-admin installation did not reveal any other occurrences of PhpDebugBar in any of the other plugins.

I’ve looked a lot at the comments plugin (which displays the debug bar just fine) to figure out how things are done. My plugin uses the same namespace, use-statements and inherits from “Plugin”. Still, it looks like somewhere, something’s missing…
Do you have any ideas what it could be?

8

Kinda hard to guess… but that error means PhpDebugBar was not loaded, so do you have some special template on that page that is not using assets manager? The debugbar JS and CSS is loaded into the assets manager, so you must use it to render your assets.

9

Thank you for your help. It’s showing up now.

Just for the records, I made some mistakes that prevented the debug bar from showing up:

  1. It’s actually not necessary to load jquery because it’s loaded in partials/base.html.twig. The problem showed up on an admin plugin, which extends partials/base.html.twig. So simply not loading jquery at all is the obvious solution.

  2. The actual issue was, that I was unaware of the concept of overwriting a block in twig. Hence the code to load jquery in the plugins .html.twig file looked like this:

{%block javascripts %}
    {% do assets.addJs('//code.jquery.com/jquery-2.1.3.min.js',101) %}
{%endblock%}

For somebody new to twig, it makes sense to load javascript in {%block javascripts %}. But this is effectively overwriting/removing the javascripts block from partials/base.html.twig. Well, a simple call of {{ parent() }} inside the overwritten javascripts block would have loaded the parents javascripts block and therefore would have fixed it. But that was something I wasn’t aware of at the time I started tinkering around wi th Grav.

Anyway, the problem is solved and I hope it’s explained in enough detail to be of help for anyone who stumbles upon it in the future.
Thank you very much for your help!