Bug: debugbar javascript error

[benrogmans]

Describe the bug
When using (a lot of) JavaScript, for instance my VueJS application, elements of the debugbar do not seem to be ready yet in the DOM, when the debugbar tries to modify those. Error in console:

Uncaught TypeError: Cannot set property 'innerHTML' of null
    at XMLHttpRequest.<anonymous> (index.php?debugbar:77)

CodeIgniter 4 version
CodeIgniter 4.0.2

Affected module(s)
system/Debug/Toolbar.php

I've created a PR to load the debugbar script right before the closing body tag, which solves this issue: #2620.

I now see it might re-introduce other issues. @najdanovicivan Does my PR conflict with yours (#2494)?

[MGatner]

looking at the script it seems that must the response object trying to badge the icon:

var h2 = document.querySelector('#ci-history > h2');
h2.innerHTML ....

I’m a JavaScript lightweight but i think that should only be called after the listener for DOMContentLoaded has brought up the actual toolbar, so location of the script (head, body) shouldn’t matter. Can you confirm the issue is actually the badging?

[benrogmans]

Yes, I can confirm the issue. But I think it is because an XMLHttpRequest can already happen before DOMContentLoaded. Therefor and after testing some more, I'm changing my proposed solution in the PR.