[4.0] Debug bar

[elkuku]

This is a redo of #15472

Summary of Changes

The goal of this PR is to refactor the debug plugin (currently more than 2.000 lines of code) into smaller pieces.
An external library is used to display a floating debug bar. See a demo

Testing Instructions

Run

composer install
npm i

Turn on debug and/or language debug and play with the various options in plugin configuration.

Expected result

A beautiful floating debug toolbar (mobile ready) 😉

Actual result

A not so beautiful looong thingy, fixed to the very bottom of the page.

Documentation Changes Required

Alot 👅

Extended Description

While working on a Symfony project, I was amazed by the debug bar they offer and I thought about the old Joomla! plugin...

Integrating the Symfony bar would require a lot of dependencies from Symfony, probably including the Symfony Application class. While this would be amazing, I suspect that this is not gonna happen any time soon...

So I started playing with maximebf/debugbar which claims to be inspired by the Symfony debug bar, but for "non Symfony" projects ;)

This resulted in some DataCollector classes which, apart from collecting data, are responsible for bringing the collected data to something "serializable".

This data is then serialized and written to disk for later analysis. (Not implemented yet)

After a thousand words, here are some screens:
Note: Since the "old" code is still in place, you will see the "old" output as well as the "new " output in the screenshots.

---

Session

---

Profile

---

Queries

The database query tab features including
* Highlighted queries
* Timings and memory reports
* A (clickable) call stack with indication of the "caller" (somewhat experimental)
* Duplicated query check
* Duplicated queries can be filtered Note the filter buttons are at the lower right corner 😉
* A button to "copy" the query to the clipboard

Call stack

Duplicates filter

Explains

---

Deprecation logging

---

Language stuff

Should look as before, just more readable and compact.

Loaded

Untranslated

Errors

---

Mobile ready

Tested on a 5'' screen with fat fingers and it worked pretty well.

---

Happy debugging =;)

P.S.: @todo Things that should be added (later)

• Memory display on profile tab - Thanks @Hackwar
• A lot of visual improvements to be implemented using modern CSS technioques - Thanks @all

[brianteeman]

we dont need this string, just remove it please.

[elkuku]

Done 😉

[laoneo]

Does the query tab has duplicate query detection and can show the stack trace? That's two very useful features of the current debug plugin.

[mbabker]

Yes it can highlight duplicate queries. I don't remember off hand if the debug bar natively supports collecting stack traces, but the Laravel package that extends this does have them so even if it's not a native capability it can be added in.

[mbabker]

Actually, we couldn't use the existing database integrations in the main debug bar package anyway. That one only supports PDO, we have non-PDO drivers in our database API (MySQLi and SQL Server).

[elkuku]

Does the query tab has duplicate query detection and can show the stack trace? That's two very useful features of the current debug plugin.

Currently only the executed queries are displayed in a custom tab. For the reasons Michael stated we can not use the provided db tab so... - no stack trace, timings, memory etc.
I'd like to propose adding a component that displays additional information like this - in the next PR 😉

YES 😉

[ggppdk]

@elkuku

hi, will this PR have solution for issue:
#21131

[brianteeman]

@ggppdk why don't you test it and see

[ggppdk]

Ok , will find time to test this, regardless of including solution for #21131

[Hackwar]

Applying this to the current 4.0-dev branch fails on several levels. @elkuku can you fix the conflicts here?

[elkuku]

@Hackwar

what I'm missing is the used memory of the different parts in the Profile tab. Can you have a look there?

I think we can at least display the amount (using numbers) would this be helpful?

the queries are not easy to read for me

I've changed the color of the separator line to a beautiful blue and added some padding - what do you think/see?

Maybe we can color the icons/buttons/action areas of each query in the Joomla colors?

That sounds like a nice idea but I'm afraid that if I perform this task it will look horrible - trust me 👅

@infograf768

Here color instead of Loaded/Not Loaded (not good for colour blind people). Maybe using both would be better.

I've added a + or a - sign accordingly - WDYT?

Alsdo no need imho to repeat the name of the file with these 2 columns.

The first column is supposed to be the "extension" that is trying to load the language file(s) - Note the first line joomla is loading the xx-XX.ini file 😉 I've also added a header to make this clearer. I believe this is nice for "grouping" the files.

if I remember well, some time ago, it would show nearby the en-GB equivalent file as loaded instead.

Actually I noticed the same thing. As you can see in my screenshot this is different in admin and site...

Here constants are not displayed fully.

So instead of waiting for #21457 being merged, I changed (J)Language here in this PR and also added the full stack trace.

[laoneo]

I had a look on your pr and some parts are missing according to your description. For example the duplicates query or the call stack of a query.

[elkuku]

@laoneo

some parts are missing according to your description. For example the duplicates query or the call stack of a query.

I made the query traces optional to avoid performance problems on "large" sites. so please make sure that you enabled them in plugin options.

Note: The "Query Types" option is currently not functional

As for the duplicated queries, that should work as announced - what output do you get / expect?

[elkuku]

@Hackwar
I've updated the profiler tab to include memory marks - Could you check please?

[elkuku]

Just a small update for possible testers... Support for query explains has been added.

[laoneo]

Can we get one more test and then I would suggest we merge it and do finalize the other issues in their own pr's.

[roland-d]

@elkuku Great, great work. Well done.
@laoneo Here is my second test again. The things is awesome works great.

I have some ideas for enhancements but let's do that in a new issues.

[ghost]

Ready to Commit after required one more test.

[laoneo]

Thank you very much for this nice change!

[roland-d]

Very happy to see this go in. +1 for progress.

[elkuku]

🎉