<p>I'm not sure this is the proper way to do it but I got this working.</p>
<p>I used the <code>Yii\Application::EVENT_BEFORE_REQUEST</code> event in my plugin's
<code>init()</code> method:</p>
<pre><code>&lt;?php

namespace my\namespace;

use craft\base\Plugin;
use craft\web\Application;

class MyPlugin extends Plugin
{
    public function init()
    {
        Event::on(
            Application::class, 
            Application::EVENT_BEFORE_REQUEST, 
            function() {
                /** @var \yii\debug\Module */
                $debugModule = Craft::$app-&gt;getModule('debug');
                
                $debugModule-&gt;panels['mycustompanel'] = new DebugPanel(['module' =&gt; $debugModule]);
            }
        );
    }
}
</code></pre>
<p>At first, I thought about using the <code>yii\base\Controller::EVENT_BEFORE_ACTION</code>
event, but in order to work, the Yii2 component needed to add some routes  and
the <code>EVENT_BEFORE_ACTION</code> event occurs after routing has been done.</p>
<p>Any other event I could think of occurred too early, before Craft had called
the <code>craft\web\Application::debugBootstrap()</code> method.</p>
<p>So far it works but if anyone has a suggestion on the proper way to do it, I'm all hears.</p>
<hr />
<p><strong>Edit 10/05/2020</strong>: it looks like I was almost there. I was just missing the <code>id</code> property in the Panel's constructor parameter. Without it, clicking your panel name in the collapsed debug bar won't open straight away on your panel's tab.</p>
<p>It's also important to check that the Debug module is loaded before adding your panel to it. Otherwise users having the debug bar disabled would get errors.</p>
<p>I found out by looking at the code in Ben Croker's <a href="https://github.com/putyourlightson/craft-elements-panel" rel="nofollow noreferrer">Element Panel</a> plugin.</p>
<pre class="lang-php prettyprint-override"><code>Event::on(
    Application::class,
    Application::EVENT_BEFORE_REQUEST,
    function () {
        /** @var \yii\debug\Module */
        $debugModule = Craft::$app-&gt;getModule('debug');

        if ($debugModule) {
            $debugModule-&gt;panels['mycustompanel'] = new DebugPanel([
                'id'     =&gt; 'mycustompanel',
                'module' =&gt; $debugModule,
            ]);
        }
    }
);
</code></pre>

CC BY-SA 4.0
2018-06-21T08:15:49.877Z
2020-10-05T10:53:54.780Z
2020-10-05T10:53:54.780Z
nstCactus
<p>I'm working on porting a Yii2 component to Craft CMS as a plugin.
This Yii2 component provides a debug bar custom panel that I'd like to enable
in Craft CMS too.</p>

<p>In classic Yii2 applications, this is done by adding an entry to the 
<code>modules.debug.panels</code> configuration directive:</p>

<pre><code>'bootstrap' =&gt; ['debug'],
'modules' =&gt; [
    'debug' =&gt; [
        'class' =&gt; 'yii\\debug\\Module',
        'panels' =&gt; [
            'elasticsearch' =&gt; [
                'class' =&gt; 'my\\namespace\\DebugPanel',
            ],
        ],
    ],
],
</code></pre>

<p>Unfortunately, Craft 3 seems to hardcode this configuration in the
<code>craft\web\Application::debugBootstrap()</code> method.</p>

<p>How to add a custom panel to the debugbar in Craft 3?</p>

<plugin-development><craft3><debugging>
How to add a custom panel to the debug bar?
# How to add a custom panel to the debug bar?

(Asked by: username_0 on 2018-06-21)

I'm working on porting a Yii2 component to Craft CMS as a plugin.
This Yii2 component provides a debug bar custom panel that I'd like to enable
in Craft CMS too.
In classic Yii2 applications, this is done by adding an entry to the 
modules.debug.panels configuration directive:
'bootstrap' => ['debug'],
'modules' => [
    'debug' => [
        'class' => 'yii\\debug\\Module',
        'panels' => [
            'elasticsearch' => [
                'class' => 'my\\namespace\\DebugPanel',
            ],
        ],
    ],
],

Unfortunately, Craft 3 seems to hardcode this configuration in the
craft\web\Application::debugBootstrap() method.
How to add a custom panel to the debugbar in Craft 3?

**Tags:** plugin-development, craft3, debugging


---

## 1 answers

### Answer by username_0 on 2018-06-21. Score: 3 | Accepted answer

I'm not sure this is the proper way to do it but I got this working.
I used the Yii\Application::EVENT_BEFORE_REQUEST event in my plugin's
init() method:
getModule('debug');
                
                $debugModule->panels['mycustompanel'] = new DebugPanel(['module' => $debugModule]);
            }
        );
    }
}

At first, I thought about using the yii\base\Controller::EVENT_BEFORE_ACTION
event, but in order to work, the Yii2 component needed to add some routes  and
the EVENT_BEFORE_ACTION event occurs after routing has been done.
Any other event I could think of occurred too early, before Craft had called
the craft\web\Application::debugBootstrap() method.
So far it works but if anyone has a suggestion on the proper way to do it, I'm all hears.

Edit 10/05/2020: it looks like I was almost there. I was just missing the id property in the Panel's constructor parameter. Without it, clicking your panel name in the collapsed debug bar won't open straight away on your panel's tab.
It's also important to check that the Debug module is loaded before adding your panel to it. Otherwise users having the debug bar disabled would get errors.
I found out by looking at the code in Ben Croker's Element Panel plugin.
Event::on(
    Application::class,
    Application::EVENT_BEFORE_REQUEST,
    function () {
        /** @var \yii\debug\Module */
        $debugModule = Craft::$app->getModule('debug');

        if ($debugModule) {
            $debugModule->panels['mycustompanel'] = new DebugPanel([
                'id'     => 'mycustompanel',
                'module' => $debugModule,
            ]);
        }
    }
);


---

