Welcome Guest, Not a member yet? Register   Sign In
Debug Toolbar
#1

The other day I was going to start looking at the performance of the current state of CI4 and see if I could identify any simple changes to boost performance here and there, and realized it would be nice to have the profiler in place just to spit out some benchmarking info. So I got sidetracked and started building out a new profiler. I guess I should actually say a new Debug Toolbar.

This is a common item in many frameworks, and I've gotten so used to using Forensic that I thought I'd give it another shot to see what could be made better. After digging around the internet for inspiration, and diving into the code, I ended up with this:

[Image: CI4DebugTimeline.png]

Personally, I like the visual representation of the app's performance, much as you'd see in the developer tools of your browser. Another feature that I really like is that anyone can write a small class and have the information show up in both the timeline and/or as another tab.

What I'm curious about, though - is do you think this is helpful to you, or just frivolous extras?
Reply
#2

(This post was last modified: 02-05-2016, 12:36 AM by sv3tli0.)

Its looking nice. I think that any framework should have such bar.
And I think that it will be good if you make it easy for customisation by developers.

Many times when you make some custom things at your site as using some remote API (for example) its nice if you can add this API requests at the debug bar in a separate tab. This way you can follow any request/answer a lot easier.
Best VPS Hosting : Digital Ocean
Reply
#3

I'm a huge fan of Forensic (so a big thank you for that), I find such toolbars very usefull in development. This look pretty cool and I would love to see it in CI4 itself.
Although I would not mind having to install it manually into my projects because it's not a big deal, I understand the need of a slim and fast framework.
Reply
#4

It's very nice and clean, I like it. Forensics is ugly as hell compared to this. I usually don't care about optimalizations if I see the raw numbers, but the new debug bar does a great job on visualizing exec times.

@kilishan console tab is dead or that will be the next addition? Smile
Reply
#5

amazing Smile
Reply
#6

a native debug toolbar is absolutly necessary Smile nice.

Can you log database queries and vars passed to the view too ? (like forensic) i think it's really helpfull
Reply
#7

Looks great!
+1 for this as a replacement for the profiler
Reply
#8

(02-05-2016, 12:35 AM)sv3tli0 Wrote: Many times when you make some custom things at your site as using some remote API (for example) its nice if you can add this API requests at the debug bar in a separate tab. This way you can follow any request/answer a lot easier.

That's a great use case. I hadn't thought of that one, but figured the customization could come in handy. Great use.

(02-05-2016, 02:46 AM)orionstar Wrote: @kilishan console tab is dead or that will be the next addition? Smile

Undecided. It currently has a tab for the logs, and I'm thinking of making a filter so you can show/hide certain levels of the logs. This should take away the need for Console like in Forensics. We'll see how easy it is to make that work cross-platform.

(02-05-2016, 03:48 AM)keulu Wrote: a native debug toolbar is absolutly necessary Smile nice.

Can you log database queries and vars passed to the view too ? (like forensic) i think it's really helpfull

Database code isn't done, so no toolbar pane built, yet. Smile

Hadn't thought of the view variables, so I'll have to think about how best to show that one. Good point, though.
Reply
#9

The first thing I did when I loaded up my project this morning was to swap "bottom" with "top" in the #debug-bar entry in toolbar.css (i.e. replace "top: 0;" with "bottom :0;" and "border-bottom: ..." with "border-top: ..."), because it was blocking the top of my test page and there isn't an obvious way to dismiss it. Otherwise, I like it so far. It also makes part of my test page unnecessary, since I was passing an array to the view, then outputting it to verify that I was getting the expected result.
Reply
#10

(02-09-2016, 09:52 AM)mwhitney Wrote: The first thing I did when I loaded up my project this morning was to swap "bottom" with "top" in the #debug-bar entry in toolbar.css (i.e. replace "top: 0;" with "bottom :0;" and "border-bottom: ..." with "border-top: ..."), because it was blocking the top of my test page and there isn't an obvious way to dismiss it. Otherwise, I like it so far. It also makes part of my test page unnecessary, since I was passing an array to the view, then outputting it to verify that I was getting the expected result.

Yeah, it's supposed to be inserting extra space at the top of the page's body to compensate and NOT cover stuff up, but it's not working as expected yet.
Reply




Theme © iAndrew 2016 - Forum software by © MyBB