DebugKit toolbar doesn't show up due to broken (?) route for iframe JS

Need Help
1

I recently updated my project dependencies via composer on my local project (CakePHP 4.4.15), running on Windows/Xampp. Suddenly my debug kit toolbar (that has been working fine all the time) is missing and doesn’t show up.

I tried to figure out why this is happening and read many discussions concerning similar topics – all to no avail. Here is what I found out so far:

  1. DebugKit is properly installed via Composer
php composer.phar require --dev cakephp/debug_kit "~4.0"
  1. DebugKit is properly loaded via code snippet in Application.php
$this->addPlugin('DebugKit', ['bootstrap' => true, 'routes' => true, 'middleware' => true]);
  1. DebugKit JS for toolbar gets injected properly into project
<script id="__debug_kit_script" data-id="086faa9a-5d13-4377-a858-21fb3ea0e129" data-url="{project url}" type="module" src="/debug_kit/js/inject-iframe.js?1688573044"></script></body>

But here’s the thing: If I click on the JS source file, i get an Error:

Uncaught Cake\Http\Exception\MissingControllerException: Controller class Debug_kit could not be found.

Both browsers (Chrome and Firefox) complain about the mismatching file type of the JS, which is now obviously an HTML error page.

I already tried the following:

  1. Uninstalling and reinstalling DebugKit via composer
  2. Changing several DebugKit related config options (ignoreAuthorization = true, adding TLD to safeTLD list, etc)
  3. Looking into cake error and debug logs: Found nothing relevant

A thing that I stumbled upon, but don’t know if it is part of the problem:

If I try to load the plugin via “bin/cake plugin load DebugKit”, i get the following message:

Your Application class does not have a bootstrap() method. Please add one.

This seems strange, because I already have a working bootstrap() method in my application class.

Now I feel kinda stuck. Any ideas?

2

The file https://something.local/debug_kit/js/inject-iframe.js actually doesn’t reside in your webroot folder so it is handled via PHP.

Instead its located in the debug_kit’s webroot folder here: vendor/cakephp/debug_kit/webroot/js/inject-iframe.js

The way how CakePHP knows these 2 are connected is via the AssetMiddleware.

So are you sure you have the AssetMiddleware present inside your middleware queue?

Specifically this part of the middleware is responsible for this logic: https://github.com/cakephp/cakephp/blob/4.x/src/Routing/Middleware/AssetMiddleware.php#L80-L92

3

Thanks for the suggestion, Kevin.

I added these middleware functions to my already present ones:

->add(new ErrorHandlerMiddleware(Configure::read('Error')))       
->add(new AssetMiddleware([
    'cacheTime' => Configure::read('Asset.cacheTime'),
]))
->add(new BodyParserMiddleware())

…and that did it (somehow): DebugKit toolbar shows up again. But as I reverted these changes back to my previous version to exactly pinpoint the problem, the toolbar is still there. This is odd…

A caching problem maybe? But that seems unlikely, as I have turned off caching for local development (and was already deleting cache folders during my error hunt which did nothing).

So…problem is solved, but the cause remains mysterious – at least for me. Seems like some kind of a one-time hiccup.

4

The browser can cache static assets depending on which HTTP header are set when the static assets is first retrieved.

You can check via your Network Tab in your Browser console.

2023-08-09_11-37-44 (1)

The first load is without Cache (Cmd + Shift + R for me on MacOS)
The second load is with Cache (Cmd + R for me on MacOS)

5

Yes, I know…but due to the MissingControllerException for the injected JS it did seem unlikely to me that this could be a cache related problem.

Sadly, I can’t reproduce the missing toolbar to further dig in to this. But thanks for the help and your fast responses.