Jump to content
adrian

Tracy Debugger

Recommended Posts

9 hours ago, tpr said:

I'm not sure this would be better but wanted to share. The biggest advantage would be that it would pop out more from the rest of the page. Orange and red icons would require some brightening to be more visible though.

I do not think making the devbar pop-out is a good idea, at least I keep it always on even when I'm dealing with design so it is good to have it sit there while not distracting the general look of the page. Therefore the not inverted version is good for bright page designs, while the inverted one would be OK for dark page designs. Maybe automatic switching and/or option to set which one to use?

Regarding the color of the inverted one, a good compromise could be using goldish yellow and magenta like colors (and with not so blue color but slightly bluish gray background instead):
tracysvgicons-invert.png.da59b716777373a8b18baa460dc07367.png

also, if the other icons are not white then colored ones pop-out more:
tracysvgicons-invert-2.png.47de118c9b75238679edc70aa8dfc2be.png

Edited by szabesz
EDIT: added not white icons demo

Share this post


Link to post
Share on other sites

Making it optional means more work and maintenance. However if svgs are well prepared colorization can be easily added with something like

.tracy-invert-bar svg * { fill: white; }

As for inverted colors I often use the editor theme called Son of Obsidian as a reference. For example my file manager (Double Commander) colors are set up using that and it's beautiful 🙂

https://www.google.hu/search?q=son+of+obsidian&prmd=ivn

  • Like 1

Share this post


Link to post
Share on other sites
13 hours ago, tpr said:

I think non-grey default icons would look nicer, eg. a darker blue like #354B60 (borrowed from the Uikit admin theme).

tracysvgicons.png.4bd4c5241745b78c8c8a8f3b19bd811c.png

It's just a quick devtools preview but for me the current grey is too pale, and rather suggests that those icons are in an "off" state.

Hi @tpr I think this looks great! Not so sure about the inverted scheme - but it may work well with a darker admin theme.

  • Like 1

Share this post


Link to post
Share on other sites

I've just issued a PR to the main repo for a reworked diagnostics panel for Tracy.

This...

  • Adds a "Dedicated" server switch via cookies.
  • Adds colour coded cells.
  • Displays file permission flags.
  • Adds checks for existence, ownership, readability by process user, writability by process user, world-accessibility, execute/traversal.
  • Detects installation of the PW Upgrade module.
  • Detects use of non-file session handling.
  • Adds basic checks of the debug, chmodFile and chmodDir config settings.
  • Unifies the colour scheme with the new Tracy constants.
  • Supplies formatted suggestions for chown, chgrp and chmod commands (on non-Windows servers.) 
  • Adjusts severity of issues reported based on Local vs Production server and/or Dedicated vs Shared server.
  • Adds links to documentation for some assets.

If you want to try it out and let me know any problems you find, please consider using my temporary Fork of Tracy on github until Adrian has had a chance to consider merging the PR.

screeny-0053.thumb.png.2dba0515a5a4e286930ffa5e18c7fce2.png

screeny-0054.thumb.png.e84496d1b65bed9552c166528202b17b.png

screeny-0055.thumb.png.416553738cf1c91d3e4aef974a4398da.png

screeny-0056.png.084e1dd0c6c4792b1bcaf7af99615633.png

  • Like 5

Share this post


Link to post
Share on other sites

@adrian Hi, If using Toggle All to turn on all panels, then when not enough memory is available we only get this in the source code of the page:

Fatal error: Allowed memory size of 33554432 bytes exhausted (tried to allocate 3008800 bytes) in .../site/modules/TracyDebugger/tracy-master/src/Tracy/Helpers.php on line 133

Could there be a more graceful way to notify the developer? Since it is in the HTML output, I had to dig it up to figure out why the debugbar "disappeared" while the rest of the page was rendered ok.

Share this post


Link to post
Share on other sites

I've also had such an issue several times but no time so far to check out the reason

Share this post


Link to post
Share on other sites

Just trying the latest version on a shared host and found a bug regarding the config->debug setting. Will fix.

  • Like 1

Share this post


Link to post
Share on other sites

Busy morning 🙂

Firstly, a huge thank you to Steve (@netcarver) for his epic rework of the Diagnostics panel - take a look at the diff https://github.com/adrianbj/TracyDebugger/pull/24/commits/8604a683ef408b4106f7b7237b3eae6c24de315a - he's put in a huge amount of time on this. I have merged his changes and bumped up Tracy's version to 4.11.0 - it deserves a major point bump for this 🙂 If you haven't used this panel much in the past, you really should take another look and give it a thorough go - it's really useful for new and experienced devs alike!

I also also added @tpr's blue for the icon color. Not sure about the inverted scheme just yet - any strong thoughts on it? I do think that the background color of the bar (the light version) could be made to look a little less dirty though. BTW, as a reference, take a look at the default Tracy bar: https://nette.github.io/tracy/tracy-debug-bar.html - be sure to check out the panels as well - we have @tpr to thank for our version looking considerably better than that 🙂

Regarding the automatic dumping of both full object and debugInfo versions, it could be as simple as this - just one version, and then the other. Perhaps some visual indicator so you know it's from one call or something. Any ideas/thoughts? @szabesz - you mentioned wanting the page ID shown without having to open the object - I don't think is any simple approach to do that, especially given that not all dumped objects are pages. Of course you can do: d($page, $page->id) but that's only useful if you are dumping multiple pages at once so you know which one is which. If you have any more specific thoughts on how to implement what you are looking, let me know.

image.thumb.png.715cf10f334eb91edb553133f242efa1.png


Regarding the memory limit error - not sure what can be can about that - I guess Tracy can't handle that error because the error broke Tracy 🙂 Seriously though there is just so much output when you have all panels toggled on that it's not surprising that these come up occasionally - I haven't seen one, but I up the PHP memory limit on my dev machine to 128M. 

Hopefully I answered everyone's questions, and please don't forget to test the new Diagnostics panel and give @netcarver your feedback.

  • Like 5

Share this post


Link to post
Share on other sites

The diagnostics panel will need more follow-up work in the days to come, but hopefully it's a useful first step.

I've just noticed how bad the permission model for my current shared host is *sigh*. Looks like I'll be moving this site to a VPS sooner rather than later.

  • Like 2
  • Thanks 1

Share this post


Link to post
Share on other sites
1 hour ago, adrian said:

Not sure about the inverted scheme just yet - any strong thoughts on it?

As I wrote that was an experiment only but wanted to share to you to check. The current latest is more consolidated if you ask me.

  • Like 2

Share this post


Link to post
Share on other sites

yep, one theme is absolutely fine for me. looks great already! 🙂

  • Like 1

Share this post


Link to post
Share on other sites
On 8/16/2018 at 12:57 PM, szabesz said:

Would it mean that we have to click twice to see one of them? First a click on the arrow next to the class name, after that another click on either debugInfo or PW object? Or maybe you "extend" debug info and PW object gets injected into it?

Either way, I think it would be nice to see the id of a Page object without clicking on anything, somewhere between the class name and the arrow. Is that possible?

What do you guys think about this approach.

As you can see I have automatically combined the debugInfo and the full object versions into an array. I have also added an automatic title if one isn't specified. I was thinking about making this all work for PW's $page, $template, $field, etc objects.

image.png.3abe581d17e72a8f19231f88689ef800.png

image.png.41e1d422d33f0e6890b33eaf056a89cd.png

image.png.f6037a719409e715f601796e2cb18161.png

 

The one concern I have is that at first glance this looks like $page returns an array, so I wonder if it might be better simple, like this where the first dump is debugInfo, and the second one is the full page object, but they both are obviously a PW $page object.

image.png.ef360726d474fda3a3773be7296bc2d1.png

image.png.eb67696237b3ec2ec31c7e1bae04d98a.png

 

Not sure - what do you guys think? I am pretty keen to have both version output automatically, but I want it to be obvious what's what.

 

  • Like 1

Share this post


Link to post
Share on other sites
9 hours ago, adrian said:

The one concern I have is that at first glance this looks like $page returns an array

I agree, we should avoid making this "impression". However, UI-wise I like the first approach a lot more: more compact and makes a group of the two. Cannot you somehow output this:

tracy-dump.jpg.06fb3885b90e77ccc9973122598ae8bb.jpg

Edited by szabesz
typo
  • Like 1

Share this post


Link to post
Share on other sites

At first glance I liked the array-approach, but thinking about it a little bit more I think it is not a good idea to modify the type of the originally dumped object. It should really output the correct type. Also @szabesz suggestion would be a wrong output for my understanding.

Having one d() call output two dumps on the other hand can also be misleading.

IMHO the best solution (and I guess also the simplest one) would be to have d() output the debuginfo version and dv() = dumpVerbose() output the verbose info with debugInfo = off. I don't think that a config setting is necessary or any better. I think it's even more confusing and one more thing to keep in your mind. Another setup and you might end up in another output. Not the best option.

d() and dv() would just be one thing to remember across all setups and it would produce a consistent output always and everywhere.

EDIT: Another option I could think of would be something like this, having a toggle in the label section showing/hiding one or the other but outputting only one visible object for one single dump and also showing correct variable types:

2018-08-18--11-02-36.png.4f81070cda6b3c4e2160a66d38fe4260.png

The label, eg d($page, 'my custom label'); could also be shown right beside the toggles

 

  • Like 1

Share this post


Link to post
Share on other sites
14 minutes ago, bernhard said:

it is not a good idea to modify the type of the originally dumped object

Then let's not call it "dump" 🙂 Seriously, we need debug info and not "dumps". I'm longing for a version which outputs both so there is no need to use options or different method calls, and I really do not mind if that one is not d() but maybe i() (short for info) or whatever, if d for dump is misleading.

Edited by szabesz
typos

Share this post


Link to post
Share on other sites
29 minutes ago, szabesz said:

Then let's not call it "dump" 🙂 Seriously, we need debug info and not "dumps".

I don't care about how we call it, but I care about what it shows and dumping/debugging/infoing a page object that is then labelled as array is simply not what I understand as good/correct dumping/debugging/infoing.

PS: actually I even do care a little about how we call it 😄 dump() is already some kind of standard. we have dump() and bardump() and it's called exactly like this in the nette docs. It's a better alternative for var_dump() and well... that also "dumps" variables. We already have firelog() and log() so I see no need for introducing another one (for me d() and dv() would be a similar thing and mean about the same just with different options. dump() and dumpVerbose() => tracy bar, log() => file, firelog() => dev console).

Share this post


Link to post
Share on other sites
3 minutes ago, bernhard said:

we have dump() and bardump() and it's called exactly like this in the nette docs.

Your idea is to stick to "dump", while Adrian's idea is different. Let's not try to merge the two ideas, but come up with a solution to support Adrian's original idea which is great, I think.

  • Like 1

Share this post


Link to post
Share on other sites

That was my suggestion:

2018-08-18--11-02-36.png

But I guess that's more effort than just implementing a new method dumpVerbose() with different settings. Let's wait for adrian to wake up - good morning btw 😉😄

  • Like 2

Share this post


Link to post
Share on other sites

Morning 🙂

Thanks for the thoughtful discussion @szabesz and @bernhard - I think I like Bernhard's idea of a toggle, although I think it belongs below the title, just before the dumped objects.

I think I'll go with debugInfo and Full Object as the labels for the toggle though - I'd rather this was more explicit and helps to educate new developers about what they are actually seeing.

I tried blending the debugInfo version into the main object and it works but it gets added to the data property, so you have to dig down to find it and it gives an incorrect impression of how the object is actually constructed. This would certainly be the simplest approach, but I'll take a look at implementing the toggle idea - I think if that works it will be the cleanest and most useful.

 

  • Like 1

Share this post


Link to post
Share on other sites

Ok, here is a really quick and dirty demo. Obviously the links need to look nicer and the selected one needs to be highlighted, but hopefully you get the idea. Any thoughts before I clean it up? 

doubledump.gif.5ac1bda745a12fbdf62e39cdfe9128a3.gif

  • Like 2

Share this post


Link to post
Share on other sites

Playing with this idea where the toggles are icons floated to the right of dumps that have both debugInfo and regular object versions. Notice that the currently selected version of the dump results in the highlighted icon color.

I think I need some help figuring out the most useful / cleanest looking option for this.

Any ideas?

image.thumb.png.91de3e1256de2ec12782515d56ea8d53.png

image.thumb.png.8eaea4d2ab8176006b8eabc563e468c0.png

 

 

  • Like 1

Share this post


Link to post
Share on other sites

Here's a screencast of the icon based switching in action. 

Is everyone happy with this approach? Any ideas for improvements?

toggledumps.gif.3afebb359c7eaed034c0072156fefd93.gif

 

Back to @szabesz's idea of the page ID being shown - I have removed that from the recent screenshots/casts, but here it is again with the new icon toggles in place. What does everyone think about these automatic titles - useful, or unnecessary - I am not sure.

image.png.2446c975ce57eb0c956654c1c516a840.png

  • Thanks 1

Share this post


Link to post
Share on other sites
18 minutes ago, adrian said:

Any ideas for improvements?

Thanks, looks ok, except the possibility of the icons "jumping" because of the scrollbar. Is it possible to move them to the left instead?

21 minutes ago, adrian said:

What does everyone think about these automatic titles - useful, or unnecessary - I am not sure.

If it's a collection of pages (WireArray and derived) then we could see the number of pages, for example. My idea is to see the basics so that there is no need to click on anything if that is enough.
BTW, it will also work with bd(), won't it?

  • Like 1

Share this post


Link to post
Share on other sites
14 minutes ago, szabesz said:

Thanks, looks ok, except the possibility of the icons "jumping" because of the scrollbar. Is it possible to move them to the left instead?

I tried both. Here is left which is fine and does prevent the scrollbar jumping, I didn't like the way it affected left alignment compared to other dumps like the "test" one above, but maybe it's ok?

image.png.d95940ecb93b01316b458dd3d37aa958.png

15 minutes ago, szabesz said:

If it's a collection of pages (WireArray and derived) then we could see the number of pages, for example. My idea is to see the basics so that there is no need to click on anything if that is enough.

I see where you're headed, and I like the idea but I am a little worried about going down a huge rabbit hole. Maybe if you can put together a list of PW objects and the data you think should be automatically displayed in this way, maybe we can come up with a solution. I am actually thinking that this might need to be another element that sits between the title (if defined) and the object dump.

20 minutes ago, szabesz said:

BTW, it will also work with bd(), won't it?

That's the plan - I haven't coded it yet so not sure - there could be some complications, but hopefully solvable.

  • Thanks 1

Share this post


Link to post
Share on other sites
8 minutes ago, adrian said:

, but maybe it's ok?

Another UX thing is that icons on the left require shorter mouse movements, well most of the time 🙂

11 minutes ago, adrian said:

I am a little worried about going down a huge rabbit hole.

Sure...

11 minutes ago, adrian said:

Maybe if you can put together a list of PW objects...

I am really thinking of the basics here, nothing more: id, count() that's all that comes to my mind 🙂

  • Like 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By MoritzLost
      This is a new module that provides a simple solution to clearing all your cache layers at once, and an extensible interface to perform various cache-related actions.
      The simple motivation behind this module was that I was tired of manually clearing caches in several places after deploying a change on a live site. The basic purpose of this module is a simple Clear all caches link in the Setup menu which clears out all caches, no matter where they hide. You can customize what exactly the module does through it's configuration menu:
      Expire or delete all cache entries in the database, or selectively clear caches by namespace ($cache API) Clear the the template render cache. Clear out specific folders inside your site's cache directory (/site/assets/cache) Refresh version strings for static assets to bust client-side browser caches (this requires some setup, see the full documentation for details). This is the basic function of the module. However, you can also add different cache management action through the API and execute them through the module's interface. For this advanced usage, the module provides:
      An interface to see all available cache actions and execute them. A system log and logging output on the module page to see verify what the module is doing. A CacheControlTools class with utility functions to clear out different caches. An API to add cache actions, execute them programmatically and even modify the default action. Permission management, allowing you granular control over which user roles can execute which actions. The complete documentation can be found in the module's README.
      Beta release
      Note that I consider this a Beta release. Since the module is relatively aggressive in deleting some caches, I would advise you to install in on a test environment before using it on a live site.
      Let me know if you're getting any errors, have trouble using the module or if you have suggestions for improvement!
      In particular, can someone let me know if this module causes any problems with the ProCache module? I don't own or use it, so I can't check. As far as I can tell, ProCache uses a folder inside the cache directory to cache static pages, so my module should be able to clear the ProCache site cache as well, I'd appreciate it if someone can test that for me.
      Future plans
      If there is some interest in this, I plan to expand this to a more general cache management solution. I particular, I would like to add additional cache actions. Some ideas that came to mind:
      Warming up the template render cache for publicly accessible pages. Removing all active user sessions. Let me know if you have more suggestions!
      Links
      https://github.com/MoritzLost/ProcessCacheControl ProcessCacheControl in the Module directory

    • By joshua
      This module is (yet another) way for implementing a cookie management solution.
      Of course there are several other possibilities:
      - https://processwire.com/talk/topic/22920-klaro-cookie-consent-manager/
      - https://github.com/webmanufaktur/CookieManagementBanner
      - https://github.com/johannesdachsel/cookiemonster
      - https://www.oiljs.org/
      - ... and so on ...
      In this module you can configure which kind of cookie categories you want to manage:

      You can also enable the support for respecting the Do-Not-Track (DNT) header to don't annoy users, who already decided for all their browsing experience.
      Currently there are four possible cookie groups:
      - Necessary (always enabled)
      - Statistics
      - Marketing
      - External Media
      All groups can be renamed, so feel free to use other cookie group names. I just haven't found a way to implement a "repeater like" field as configurable module field ...
      When you want to load specific scripts ( like Google Analytics, Google Maps, ...) only after the user's content to this specific category of cookies, just use the following script syntax:
      <script type="optin" data-type="text/javascript" data-category="statistics" data-src="/path/to/your/statistic/script.js"></script> <script type="optin" data-type="text/javascript" data-category="marketing" data-src="/path/to/your/mareketing/script.js"></script> <script type="optin" data-type="text/javascript" data-category="external_media" data-src="/path/to/your/external-media/script.js"></script> <script type="optin" data-type="text/javascript" data-category="marketing">console.log("Inline scripts are also working!");</script> The type has to be "optin" to get recognized by PrivacyWire, the data-attributes are giving hints, how the script shall be loaded, if the data-category is within the cookie consents of the user. These scripts are loaded asynchronously after the user made the decision.
      If you want to give the users the possibility to change their consent, you can use the following Textformatter:
      [[privacywire-choose-cookies]] It's planned to add also other Textformatters to opt-out of specific cookie groups or delete the whole consent cookie.
      You can also add a custom link to output the banner again with a link / button with following class:
      <a href="#" class="privacywire-show-options">Show Cookie Options</a> <button class="privacywire-show-options">Show Cookie Options</button> This module is still in development, but we already use it on several production websites.
      You find it here: https://github.com/blaueQuelle/privacywire/tree/master
      Download: https://github.com/blaueQuelle/privacywire/archive/master.zip
      I would love to hear your feedback 🙂
      Edit: Updated URLs to master tree of git repo
       
    • By David Karich
      Admin Page Tree Multiple Sorting
      ClassName: ProcessPageListMultipleSorting
      Extend the ordinary sort of children of a template in the admin page tree with multiple properties. For each template, you can define your own rule. Write each template (template-name) in a row, followed by a colon and then the additional field names for sorting.
      Example: All children of the template "blog" to be sorted in descending order according to the date of creation, then descending by modification date, and then by title. Type:
      blog: -created, -modified, title  Installation
      Copy the files for this module to /site/modules/ProcessPageListMultipleSorting/ In admin: Modules > Check for new modules. Install Module "Admin Page Tree Multible Sorting". Alternative in ProcessWire 2.4+
      Login to ProcessWire backend and go to Modules Click tab "New" and enter Module Class Name: "ProcessPageListMultipleSorting" Click "Download and Install"   Compatibility   I have currently tested the module only under PW 2.6+, but think that it works on older versions too. Maybe someone can give a feedback.     Download   PW-Repo: http://modules.processwire.com/modules/process-page-list-multiple-sorting/ GitHub: https://github.com/FlipZoomMedia/Processwire-ProcessPageListMultipleSorting     I hope someone can use the module. Have fun and best regards, David
    • By dimitrios
      Hello,
      this module can publish content of a Processwire page on a Facebook page, triggered by saving the Processwire page.
      To set it up, configure the module with a Facebook app ID, secret and a Page ID. Following is additional configuration on Facebook for developers:
      Minimum Required Facebook App configuration:
      on Settings -> Basics, provide the App Domains, provide the Site URL, on Settings -> Advanced, set the API version (has been tested up to v3.3), add Product: Facebook Login, on Facebook Login -> Settings, set Client OAuth Login: Yes, set Web OAuth Login: Yes, set Enforce HTTPS: Yes, add "https://www.example.com/processwire/page/" to field Valid OAuth Redirect URIs. This module is configurable as follows:
      Templates: posts can take place only for pages with the defined templates. On/Off switch: specify a checkbox field that will not allow the post if checked. Specify a message and/or an image for the post.
      Usage
      edit the desired PW page and save; it will post right after the initial Facebook log in and permission granting. After that, an access token is kept.
       
      Download
      PW module directory: http://modules.processwire.com/modules/auto-fb-post/ Github: https://github.com/kastrind/AutoFbPost   Note: Facebook SDK for PHP is utilized.


×
×
  • Create New...