adrian

Tracy Debugger

Recommended Posts

I played around with the parameters I found inside the theme-tomorrow_night.js file. I managed to change the background color, string color and operator color.

.ace-tomorrow-night {background-color: #DCDCDC;color: #C5C8C6}
.ace_keyword.ace_operator {color: #000000}
.ace-tomorrow-night .ace_string {color: #66CD00}

This is definitely a bloat free solution.

I am already happy so far. I guess I will find the rest also.

 

Share this post


Link to post
Share on other sites

I am happy including all the themes - only the selected one is loaded, and they only add 135kb to the Tracy module package so it's really not an issue.

Here's what will be coming soon. You can see I have selected your desired iplastic theme in the config settings and the Console panel is styled accordingly. This will also control the File Editor panel's theme as well.

image.png.58fa29dd49be6234ab8af18ebd744450.png

Share this post


Link to post
Share on other sites

A couple more settings to help out those of us with "tired" eyes 🙂

image.thumb.png.2c29bf8dadb1c1e2c4870c5e169f636b.png

These will be pushed in the next few days.

I am still messing around with the code completion stuff. Unfortunately I don't think showing the doc comments like I posted above is going to be a good idea - it's a 2MB payload and even though I am not really seeing a slowdown here on local dev, it still feels wrong and will probably impact performance on a live server. I do like the idea though of an API learning interface like this, so maybe it's something for a dedicated panel where speed doesn't matter. Any thoughts?

  • Like 1

Share this post


Link to post
Share on other sites

Hi,

Quote

including all the themes they only add 135 kb - - - doc comments it's a 2 Mb payload - - - showing the doc comments - - - api learning interface

I wouldn't include all the themes, I think 135 kB is already too much to add to the TracyDebugger. Like I said it was only a case of changing a few color combinations to take away the harsh look of it for someone's set of eyes. Tweaking the theme-tomorrow_night.js was all I needed and I am happy with it. (maybe a hint where I can change the font-size ?)

I agree, I would leave out showing comments about code documentation. A 2 Mb payload is way too much and besides I don`t see it will add effectively to the coding learn process. I guess it will only be consulted for some details. I reckon that effective resources for a coding learn process will always be snippets, the forum, http://processwire.com/docs/----- and http://php.net/manual/en/------

Remember that some time ago there was a discussion in the forum what strategy is being used for keeping an online website in sync with your local laptop copy ? All kinds of strategies were discussed and one of them is editing the online website parallel with the local copy on your laptop. So when something is edited in the local copy, all that is needed is to copy and paste your edits into the editor of TracyDebugger. I think that is still one of the fastest ways of keeping a website in sync.

 

  • Like 1

Share this post


Link to post
Share on other sites

I don't care about those 135kB, but I also don't care about any other theme than we currently have 😉 

  • Haha 1

Share this post


Link to post
Share on other sites
12 hours ago, pwired said:

I wouldn't include all the themes

+1

I'm also the kinda guy who does not like any bloat. I think one readable "dark theme" and one "light theme" would be enough to choose from.

  • Thanks 1

Share this post


Link to post
Share on other sites

Is it just me or has Tracy (current version) become very sloooow recently with the "Force superusers into DEVELOPMENT mode" setting activated? Benchmark - loading of the "modules" page:

  • Tracy enabled: Loed 6.9 s
  • Tracy disabled: Load 1.2 s

Measured with Google Chrome Dev Tools.

I don't remember noticing that before... 🤔

Share this post


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

So what are your load times regarding the "force su into dev" setting?

I've written that already - with "Force superusers into DEVELOPMENT mode" activated, it takes nearly 6x times longer to load the modules page than without Tracy. 

Share this post


Link to post
Share on other sites
3 hours ago, titanium said:

Is it just me or has Tracy (current version) become very sloooow recently with the "Force superusers into DEVELOPMENT mode" setting activated? Benchmark - loading of the "modules" page:

  • Tracy enabled: Loed 6.9 s
  • Tracy disabled: Load 1.2 s

Measured with Google Chrome Dev Tools.

I don't remember noticing that before... 🤔

I am not seeing any issues here visiting the modules page (or any other), but I am curious what Tracy panels you have enabled. Perhaps it is one in particular that is causing the slowdown. Also, is it just the modules page that is slow? 

Share this post


Link to post
Share on other sites
21 hours ago, bernhard said:

You wrote Tracy enabled/disabled, that's why I asked.

Oh, I see, I wasn't precise enough. Sorry, I didn't think of that. I meant "Tracy with Force superusers into DEVELOPMENT mode activated instead of just "Tracy enabled".

 

21 hours ago, adrian said:

I am not seeing any issues here visiting the modules page (or any other), but I am curious what Tracy panels you have enabled. Perhaps it is one in particular that is causing the slowdown. Also, is it just the modules page that is slow? 

It's Tracy right out of the box (fresh install) with just "Force superusers into DEVELOPMENT mode" setting activated. The slowdown is more or less noticeable on all admin pages, "modules" was just a concrete example. But I do have to say I have some custom modules included in this project, so I will report back after I have done a vanilla install elsewhere and tested again. Thank you.

  • Like 1

Share this post


Link to post
Share on other sites

Hi all - I've just committed a pretty major update to the Console and File Editor panels.

1) Adds all ACE editor themes with a config setting to choose the theme

2) Options to set the font size and line height

image.thumb.png.aa77e828a0857a90ab31868539e7b8cd.png

3) I have refactored the sizing of various divs in both these panels that should solve lots of minor layout bugs especially when resizing the panels. *Be sure to do a hard reload to get the latest CSS/JS files.

4) Updated the core SplitJS library which now adds support for dragging by fixed increments which lock to the code line height - before I was hacking this on and it wasn't anywhere near as nice.

VSqyNf00vy.gif.1bbab998f2bba17ee4069a98ac12ef9a.gif

5) Various bug fixes for the keyboard shortcuts for resizing the console panes.

 

Also, just a quick note to say that this version doesn't yet include the PW variables code completion. That will come in the next version. I am on a semi-vacation at the moment so haven't had any dedicated blocks of time to get that quite as I want yet.

Please let me know how this new version goes for you!

  • Like 6

Share this post


Link to post
Share on other sites

Here's a preview of the new API Explorer panel I hinted at earlier.

You'll notice a lot of similarities with the Captain Hook Panel with everything ordered alphabetically, and with toggling to open/close the DocComment text and direct links to open the appropriate file to the first line of the method in your code editor which I hope will be a useful learning tool because often the methods for an object are inherited from a parent class and so are not necessarily in the file you might expect. This will make finding the source of these methods really quick and easy.

The link in the first column of the table opens the API ref docs on the PW site or using Ryan's API Explorer module (if you have that installed).

Also note that conditional parameters for the methods are italicized

I'll probably commit the first version of this tomorrow, but I'd love to hear any initial feedback from these screenshots - other than comments on the awful icon 🙂 (unless you have a suggestion for a better one).

image.png.822109d3730d46158cff71b6d0f2450e.png

image.png.69bbac723692b242ad6faad4b5c34957.png

image.thumb.png.3b6c637f473caa81ccfed8a721f6d568.png

 

 

  • Like 5
  • Thanks 1

Share this post


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

... the awful icon 🙂 (unless you have a suggestion for a better one)

Maybe something like this:

 

Tracy-API-Logo.png

Share this post


Link to post
Share on other sites

Thanks @ottogal - I'll have a play with something where the API text is bigger (as you have it), or go with something simpler. Not too important 🙂

Anyone have any thoughts on having the description of the doc comment in its own column for quick reference? Of course you can still expand to get the full comment text. I think this is probably quite useful - anyone think otherwise?

image.thumb.png.dcf9e49b827b8df33a05368d6371a860.png

  • Like 2

Share this post


Link to post
Share on other sites

@adrian Thank you for the latest additions and your continous great work on this essential module.

I can't wait for the API explorer panel. This is great and would save me a lot of time going to ProcessWires API reference page and look for what I am searching.

One thing that would be extremely useful would be a find-as-you-type-filter, to find what you are looking for quickly, similar to AdminOnSteroids filter function for AdminDataTables or modules.

  • Like 2

Share this post


Link to post
Share on other sites
7 hours ago, jmartsch said:

One thing that would be extremely useful would be a find-as-you-type-filter, to find what you are looking for quickly, similar to AdminOnSteroids filter function for AdminDataTables or modules.

I agree that would be nice - perhaps in a future version and maybe using @tpr's FilterBox Utility - for now, the best option is browsing and Toggle All and then CTRL+F to use your browser find in page functionality.

The first version of the API Explorer is now available and includes some config settings for determining what is shown in the tables for each object/class's method. The default is to show the "description" column and not to have the full doc comment block toggleable. This results in much smaller sizes for these panels and of course if you have your code editor links configured properly you can always click the line number to go to the method and read the doc comment that way.

image.thumb.png.6f664e3a2411ecf7d96790ee4c652175.png

Also, since the previews posted yesterday, the API Explorer now also includes Core Classes (as well as API variables) so you have access to things like wireArray and Pageimage methods.

It also now displays all properties for each object/class which is especially useful for $page

5cEabXSbY9.thumb.gif.2e8912108dbb319df4b3c20039ebfa0b.gif

Please take this for a spin and give me your feedback. I will most certainly be tweaking it myself lots over the next few days, but I'd still love your inout to guide my decisions.

  • Like 3

Share this post


Link to post
Share on other sites

Thanks for this, very cool! When you toggle all and then try to collapse one object/class by clicking on the down arrow, the first click doesn't collapse, had to click it again.

Nothing to do with Tracy, but I noticed that some paths in $config are different, like $config->paths:

ProcessWire\Paths #3457
_root protected => "C:/inetpub/wwwroot/" (19)
data protected => array (206)
wire => "wire/" (5)
site => "site/" (5)
modules => "wire/modules/" (13)
...
fieldTemplates => "site/templates/fields/" (22)
adminTemplates => "C:/inetpub/wwwroot/wire/modules/AdminTheme/AdminThemeDefault/" (61)
sessions => "C:/inetpub/wwwroot/site/assets/sessions/" (40)

and $config->urls

ProcessWire\Paths #cc50
_root protected => "/"
data protected => array (206)
wire => "wire/" (5)
site => "site/" (5)
modules => "wire/modules/" (13)
...
adminTemplates => "/wire/modules/AdminTheme/AdminThemeDefault/" (43)
AdminThemeDefault => "wire/modules/AdminTheme/AdminThemeDefault/" (42)

(adminTemplates has the slash at the beginning). Is this how it should be?

  • Like 1

Share this post


Link to post
Share on other sites
21 minutes ago, matjazp said:

When you toggle all and then try to collapse one object/class by clicking on the down arrow, the first click doesn't collapse, had to click it again.

That is currently expected - same as with the Captain Hook panel. It's because of the way I am showing all because actually triggering the toggle on each element is too slow. I'll keep it in mind to improve if I can though.

Not sure about the paths/urls stuff - do you think those are things that need Ryan's attention?

Share this post


Link to post
Share on other sites

I don't know if Ryan need to know that. It seems there are no (known?) side effects with this paths, maybe there could be an issue with adminTemplates if PW is running in subdirectory? Ryan is busy, don't won't to bother him. And there are other issues that need his attention...

Share this post


Link to post
Share on other sites

New version just committed which revises the output for object properties - now runtime properties are more accurately collected and the description is displayed (rather than the value). I think this is more inline with what this panel is about. I think if you want values you can get them easily via the Console panel - I am actually thinking about a link from the property to open the Console panel with the $object->property wrapped in a d() call, eg:

d($page->createdUser); 

to make it even quicker/easier. Any thoughts on whether you'd use this?

Please keep the feedback coming.

Share this post


Link to post
Share on other sites

Thx adrian,

I still have the bug on the AOS language switcher z-index. Any news on this?

FQxXCJD.png

On the config var the description column is very large, leading to a horizontal scrollbar. Maybe it would make sense to use text-overflow: ellipsis; here?

Is it intended that the links to the api ref opens in the same window? I know we can middle-click, but I wonder if it was better to open it in a new tab by default?

52 minutes ago, adrian said:

I am actually thinking about a link from the property to open the Console panel with the $object->property wrapped in a d() call, eg:

Sorry, I don't get what you are talking about 😇

  • Like 1

Share this post


Link to post
Share on other sites

Thank you for building the API Explorer.  I just checked it out and looks very helpful indeed.

Clicking the line number even opens the file directly in my VSCode editor.  Nice!

2 hours ago, adrian said:

I am actually thinking about a link from the property to open the Console panel with the $object->property wrapped in a d() call, eg:


d($page->createdUser); 

to make it even quicker/easier. Any thoughts on whether you'd use this?

 

This sounds good to me.

  • Like 1

Share this post


Link to post
Share on other sites

How about adding a full screen button to the API Explorer panel?  Like it is with the Console panel.

  • 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 Sebi
      I've created a small module which lets you define a timestamp after which a page should be accessible. In addition you can define a timestamp when the release should end and the page should not be accessable any more.
      Github: https://github.com/Sebiworld/PageAccessReleasetime
      Usage
      PageAccessReleasetime can be installed like every other module in ProcessWire. Check the following guide for detailed information: How-To Install or Uninstall Modules
      After that, you will find checkboxes for activating the releasetime-fields at the settings-tab of each page. You don't need to add the fields to your templates manually.
      Check e.g. the checkbox "Activate Releasetime from?" and fill in a date in the future. The page will not be accessable for your users until the given date is reached.
      If you have $config->pagefileSecure = true, the module will protect files of unreleased pages as well.
      How it works
      This module hooks into Page::viewable to prevent users to access unreleased pages:
      public function hookPageViewable($event) { $page = $event->object; $viewable = $event->return; if($viewable){ // If the page would be viewable, additionally check Releasetime and User-Permission $viewable = $this->canUserSee($page); } $event->return = $viewable; } To prevent access to the files of unreleased pages, we hook into Page::isPublic and ProcessPageView::sendFile.
      public function hookPageIsPublic($e) { $page = $e->object; if($e->return && $this->isReleaseTimeSet($page)) { $e->return = false; } } The site/assets/files/ directory of pages, which isPublic() returns false, will get a '-' as prefix. This indicates ProcessWire (with activated $config->pagefileSecure) to check the file's permissions via PHP before delivering it to the client.
      The check wether a not-public file should be accessable happens in ProcessPageView::sendFile. We throw an 404 Exception if the current user must not see the file.
      public function hookProcessPageViewSendFile($e) { $page = $e->arguments[0]; if(!$this->canUserSee($page)) { throw new Wire404Exception('File not found'); } } Additionally we hook into ProcessPageEdit::buildForm to add the PageAccessReleasetime fields to each page and move them to the settings tab.
      Limitations
      In the current version, releasetime-protected pages will appear in wire('pages')->find() queries. If you want to display a list of pages, where pages could be releasetime-protected, you should double-check with $page->viewable() wether the page can be accessed. $page->viewable() returns false, if the page is not released yet.
      If you have an idea how unreleased pages can be filtered out of ProcessWire selector queries, feel free to write an issue, comment or make a pull request!
    • By David Karich
      Thanks to the great Pro module "RepeaterMatrix" I have the possibility to create complex repeater items. With it I have created a quite powerful page builder. Many different content modules, with many more possible design options. The RepeaterMatrix module supports the cloning of items, but only within the same page. Now I often have the case that very design-intensive pages and items are created. If you want to use this module on a different page (e.g. in the same design), you have to rebuild each item manually every time.
      With this proof of concept I have created a module which adds the feature to copy a repeater item to the clipboard so that you can paste this item to another page with the same repeater field. The module has been developed very rudimentarily so far. It is currently not possible to copy nested items. There is also no check of Min/Max. You can also only copy items that have the same field on different pages. And surely you can solve all this more elegantly with AJAX. But personally I lack the deeper understanding of the repeaters. Also missing on the Javascript side are event triggers for the repeaters, which would make it easier. Like e.g. RepeaterItemInitReady or similar.
      it would be great if @ryan would implement this functionality in the core of RepeaterMatrix. I think he has better ways to implement this. Or what do you think, Ryan?
      Everybody is welcome to work on this module and improve it, if it should not be integrated into the matrix core. Therefore I put it for testing and as download on GitHub: https://github.com/FlipZoomMedia/InputfieldRepeaterMatrixDublicate
      You can best see the functionality in the screencast: 
       
    • By anderson
      Hi,
      Please take a look at this:
      https://templatemag.com/demo/Good/
      The upper nav bar, including dropdowns like "pages" and "portfolios", what do you call this whole thing? At first I guess it's called "dropdown nav bar", but seems not.
      AND of course, what's the simplest way/module to achieve this in PW?
      Thanks in advance.
    • By Sebi2020
      Hey, I'm new and I created a simple module for tagging pages because I didn't found a module for it (sadly this is not a core feature). This module is licensed under the GPL3 and cames with absolutly no warranty at all. You should test the module before using it in production environments. Currently it's an alpha release. if you like the module or have ideas for improvements feel free to post a comment. Currently this fieldtype is only compatible with the Inputfield I've created to because I haven't found  an Inputfield yet, that returns arrays from a single html input.
      Greetings Sebi2020
      FieldtypeTags.zip.asc
      InputfieldTagify.zip
      InputfieldTagify.zip.asc
      FieldtypeTags.zip
    • By psy
      Background
      I'm creating a module to integrate https://pushalert.co/ into ProcessWire. You actually don't even need a module. You could just use the "Other Websites" javascript provided by PushAlert for basic functionality, ie send a broadcast notification to all subscribers. This is essentially what all the other integrations, including WordPress, do. The WP integration installs a widget with a form enabling the admin to enter details such as title, message, etc from a blog post. It does not:
      collect any statistics within the CMS about the notification enable audience fine tuning to eg a particular subscriber or subscriber segment within WP. The admin needs to use the PA dashboard for that functionality PushAlert has a javascript and REST API. It's intended that this module will use both. https://pushalert.co/documentation 
      What my module does so far:
      associate a subscription with a user. FE user clicks a button on the website front end to subscribe and/or agrees to the browser popup to accept notifications from this site send broadcast push alerts from a page within admin It doesn't have a 'widget' but easy enough to create a fieldsetpage with the relevant fields and add that fs page to any appropriate templates, then with a hook, send the notification. Need to be careful that once published/sent, the notification is not automatically re-sent on subsequent page edits.
      Looking for help/collaboration on how best:
      to send a notification, eg from a blog post, then track the statistics. Dilemma is that the push notification must come from the admin page. Responses go to the sending page which, as it's an admin page, is restricted and will not accept the https response. This is where the other CMS integrations stop. The only json response from PushAlert is the status, eg 'success', and the notification id. There is no opportunity at this point to capture the sending page id. handle, 'once sent on page publish', do not automatically resend on future page edits Am thinking along the lines that FS Page will have a @kongondo runtime markup field https://modules.processwire.com/modules/fieldtype-runtime-markup/ to pull the stats from PushAlert. Every time an admin visits the page, the stats will update.
      Once an admin checks the 'Send notification on page publish' checkbox, a hook creates new front end page that records the 'sender page', sends the notification request to PA, which then uses that newly created frontend page, as the response endpoint. Another rook re-associates the front end page with the admin page (eg blog post), to update the stats.
      Potential use cases:
      Notify individual and/or users with a particular role of an event, eg "New work opportunity" for job seekers; new blog post published; entries now open, etc...
      Looking for help/ideas/collaboration on this module. Please let me know if you're interested and as I do, believe this would be a great addition to ProcessWire