Load debugbar script before closing body tag

[benrogmans]

Sometimes (when using VueJS for instance) dom elements can not be found by the debugbar because the elements are not ready yet. Results in JS errors like:

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

Coming from toolbarloader.js.php:

var h2 = document.querySelector('#ci-history > h2');
h2.innerHTML = 'History <small>You have new debug data.</small> <button onclick="loadDoc(' + debugbarTime + ')">Update</button>';

#ci-history > h2 was not ready yet. Problem can be solved by making sure the debugbar is loaded right before the closing body tag.

Checklist:

• Securely signed commits
• Conforms to style guide

[benrogmans]

Because I am not 100% confident about what is happening in toolbarloader.js.php I have chosen a safer fix for #2621: simply check whether the H2 was found.

I do think this feature to alert the user for new data is a little hacky; I would suggest to remove the newXHR() function and not fiddle with window.XMLHttpRequest.

[lonnieezell]

This works fine for me without any errors. Merging.

[mostafakhudair]

how about auto load debug-bar scripts automatic on new xhr without adding update button
var h2 = document.querySelector('#ci-history > h2'); h2.innerHTML = 'History <small>You have new debug data.</small>'; var badge = document.querySelector('a[data-tab="ci-history"] > span > .badge'); badge.className += ' active'; loadDoc(' + debugbarTime + ');