Bug: Standalone Debugbar is not properly initialized

[michalsn]

PHP Version

8.5

CodeIgniter4 Version

4.7

CodeIgniter4 Installation Method

Composer (using codeigniter4/appstarter)

Which operating systems have you tested for this bug?

macOS

Which server did you use?

cli-server (PHP built-in webserver)

Environment

development

Database

MySQL 8

What happened?

When processing non-HTML requests, the Debugbar attaches special headers such as Debugbar-Link, which provide a URL to render the Debugbar in a separate request.

Although the Debugbar interface is rendered when visiting that URL, it is not fully initialized, which prevents any interaction with it.

Steps to Reproduce

1. Add the following route:

// app/Config/Routes.php
$routes->get('ajax', 'Home::ajax');

2. Add this method to Home controller:

// app/Controllers/Home.php
public function ajax()
{
    $this->response->setJSON([]);
}

3. Add the following script to welcome_message.php:

<script>
    fetch('/ajax', {
        headers: {
            'Accept': 'application/json',
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
</script>

4. Open Developer Tools and inspect the Network tab.
5. Open the main page in the browser.
6. Check the response headers of the /ajax request and look for the Debugbar-Link header.
7. Copy the URL from Debugbar-Link and open it in a new tab.

The Debugbar is displayed, but it is not interactive because it is not properly initialized.

Expected Output

The Debugbar should be fully interactive, just as it is when rendered within a standard HTML response.

Anything else?

No response

[datamweb]

It seems the issue can be resolved with a few small changes.

CodeIgniter4/system/Debug/Toolbar.php

Lines 528 to 535 in 046fddf

	case 'html':
	$data['styles'] = [];
	extract($data);
	$parser = service('parser', $this->config->viewsPath, null, false);
	ob_start();
	include $this->config->viewsPath . 'toolbar.tpl.php';
	$output = ob_get_clean();
	break;

[michalsn]

@datamweb I'm not sure what you have in mind, but feel free to send a PR.

[datamweb]

I meant something like this, @michalsn.

--- system/Debug/Toolbar.php	(Original)
+++ system/Debug/Toolbar.php	(Fixed)
                 ob_start();
                 include $this->config->viewsPath . 'toolbar.tpl.php';
                 $output = ob_get_clean();
+               $output = '<div id="toolbarContainer">' . $output . '</div>';
+               $output .= '<script>
+                   function loadDoc(time) {
+                       var url = new URL(window.location.href);
+                      url.searchParams.set("debugbar_time", time);
+                      window.location.href = url.toString();
+                   }
+                   ciDebugBar.init();
+                </script>';
                 break;
 
             case 'json':

[michalsn]

@datamweb I don't think we should do this in Toolbar::format(), because that method should only be responsible for rendering output, not injecting runtime bootstrapping logic. Also, the ?debugbar_time response is used in two contexts, standalone and loader/XHR, so adding ciDebugBar.init() there risks double initialization in the normal loader flow.