Jump to content

Tracy Debugger


adrian

Recommended Posts

Ok, the latest version comes with the new Console panel that I introduced a few posts back.

Here are the key points/features on this panel:

  • Has full access to all PW variables: $pages, $page, $user, etc
  • Works really nicely with fl() calls, but you can also make use of d(), l(), or even simply echo()
  • All output is generated via ajax, and so is virtually instant
  • No need for editing a template file and reloading the page in browser - simply type your code in the console panel for an instant result
  • Only available to superusers
  • Caches code in the filesystem so it stored between page reloads, navigation to other pages, and even browser restarts

Note that for those of you upgrading you will need to install the new Process Tracy Console module that is now included. For new installs, this will be installed automatically with the main module.

Remember that this allows you to run any PHP code, so be careful!

Please let me know what you think.

Here are some example calls and their results:

post-985-0-37008200-1465423551_thumb.png

post-985-0-82456100-1465423550_thumb.png

post-985-0-43984000-1465424040_thumb.png

  • Like 6
Link to comment
Share on other sites

Just added a ToDo panel:

Screen Shot 2016-06-18 at 2.13.52 PM.png

It reports the following comment types: 'todo', 'fixme', 'pending', 'xxx', 'hack', 'bug'

If you have your editor configured, the comment text link opens the file to the line of the comment.

The icon reports: the number of items in the template file for the current file / the total number of items across all files.

Red: there are items for the current page's template file.

Orange: there are items in other files, but none in the current page's template file.

Green: no items in any files under /site/templates/

Please let me know if you find any items that aren't being reported, or items repotred that shouldn't be.

One other key change in the last commit is to the Console Panel - you can now use CTRL+Enter or CMD+Enter to run the code. This keeps your hands on the keyboard and keeps the code textarea focused making it much easier to quickly make and test changes to your code.

  • Like 8
Link to comment
Share on other sites

Great addition, thanks! Even works in .latte files "{*comment*}".

How about cutting off the comment characters in the panel? That would make todos more readable.

  • Like 2
Link to comment
Share on other sites

Great addition, thanks! Even works in .latte files "{*comment*}".

Great to hear. I actually just committed a new version that significantly changes how some of the comments are parsed - could you please check to make sure this is still working.

How about cutting off the comment characters in the panel? That would make todos more readable.

I had been thinking about that - you made me decide to go ahead with it. I also added a new column showing the type of the comment to make it easier to scan. I updated the screenshot a couple of posts above. Please let me know what you think and if you have any other tweaks/suggestions.

I have been wondering if anyone might want to configure the comment types that are parsed. As I mentioned above, they are currently:

'todo', 'fixme', 'pending', 'xxx', 'hack', 'bug'

but if some of you use others, then I'd be happy to make this configurable, or hardcode in a few key additions.

  • Like 1
Link to comment
Share on other sites

Thanks, it's much readable this way.

Some quick tests for comments:

PHP: OK ("//")
Latte: aren't shown ("{*todo this is Latte comment*}")
JavaScript: ("//"): seems not picked up
CSS: nope ("/*todo what is this?*/")
SCSS: nope ("//todo what is this?")

Maybe the panel title could be more readable by removing the brackets.
Also there's no space between the words now: "ToDo(0/3)".
My suggestion would look like "ToDo 0/3"

  • Like 1
Link to comment
Share on other sites

13 minutes ago, tpr said:

Thanks, it's much readable this way.

Some quick tests for comments:


PHP: OK ("//")
Latte: aren't shown ("{*todo this is Latte comment*}")
JavaScript: ("//"): seems not picked up
CSS: nope ("/*todo what is this?*/")
SCSS: nope ("//todo what is this?")

Maybe the panel title could be more readable by removing the brackets.
Also there's no space between the words now: "ToDo(0/3)".
My suggestion would look like "ToDo 0/3"

@tpr - thanks for your feedback as always.

I have tweaked the spacing and layout of the icon.

As for the comments that are not working for you - I am not sure why - all those were working for me here, except the Latte one which I have just fixed at my end and will commit a little later.

Any chance you could send some scss, css, and js files that aren't working for you so I can test here?

Link to comment
Share on other sites

Thanks! As for js/css comments: silly me, they are stripped on minification :)

My source files are one dir up from /site dir, maybe that's why their comments are not showing up?

But there was an umninified Js file whose comment was shown before the update (baguetteBox.js), and it's in site/scripts folder.

  • Like 2
Link to comment
Share on other sites

1 minute ago, tpr said:

Thanks! As for js/css comments: silly me, they are stripped on minification :)

My source files are one dir up from /site dir, maybe that's why their comments are not showing up?

Yeah, that would be it - not sure how to best handle your situation. Currently I search through all files under /site/templates and all subdirectories. Maybe I could just add a config setting for defining additional alternate paths. Do you think one single text field for entering one additional path would be sufficient? It would search this and all it's subdirectories as well.

Link to comment
Share on other sites

I'll think about if the config setting is necessary, maybe others could drop in their thoughts on this.

Did you read the last sentence in my previous post? Just edited the post while you replied.

  • Like 1
Link to comment
Share on other sites

12 minutes ago, tpr said:

But there was an umninified Js file whose comment was shown before the update (baguetteBox.js), and it's in site/scripts folder.

Any chance you can send me this js file?

To clarify - are you saying it worked before my changes here: https://github.com/adrianbj/TracyDebugger/commit/8b3ac0823b72dec2caeb8c72ba4dd443a56ec70a

Anyway, if you can send through, I am sure I can figure out why it's no longer working.

Link to comment
Share on other sites

Just to follow up, @tpr figured out why the js file wasn't being parsed for him - it's amazing what a single missing space can do :) His PR has been merged and I have also added support for latte {*TODO this*} style comments. If there are any other comment tag types that anyone needs supported, please let me know.

  • Like 3
Link to comment
Share on other sites

Thanks to some testing by @tpr the ToDo panel now supports the "loud" comment operator (/*!). If you don't know what this is, it lets you write comments that won't be lost when a scss file is compiled or a js file is minified, eg:

/*! TODO that won't be lost when compiled/minified */

This should be very handy if you you have your source scss and js files above the /site/templates/ folder

Also, @tpr mentioned the following which some of you might find useful:

Quote

As for JS, I use gulp-uglify to minify, and I need to set its settings to preserve "license" type comments to make it work. For SCSS it works out of the box.

 

  • Like 1
Link to comment
Share on other sites

Looking for a little advice.

I have just added ACE Editor to the Console panel (not committed yet):

Screen Shot 2016-06-18 at 4.56.48 PM.png

Questions:

  1. Do you think we need an option to revert to a standard textarea or is having ACE loaded the only option ok?
  2. This works without having either of the PW ACE modules installed so I am just packaging the ACE core, the PHP highlighter, and one theme (tomorrow_night). Is everyone ok with this, or would you prefer to have the ability to change themes? If I do this, then I will probably require InputfieldAceExtended to be installed to prevent a huge download included with this module.
  3. Any thoughts on whether adding a snippets manager to this panel would be useful? It would allow you to name and save code snippets which can be loaded dynamically from a select field.

Any thoughts or suggestions?

Thanks!

  • Like 3
Link to comment
Share on other sites

i think the ace is an awesome addition:rolleyes:, and can't see why anyone would want plain text..

i'm ok with having the ace in for Tracy, as it could be tricky to handle if someone doesn't have it, and since you only need PHP that makes the requirements less. Adding a config to deal with the big Ace could make things overly complex.

Snippets manager would be great!

  • Like 2
Link to comment
Share on other sites

Thanks @Macrura - I have gone with your suggestion and packaged the three required ACE files. I thought about using CDNJS instead, but if it's down, things would break and I'd need to add the textarea fallback anyway. This way just seems simpler.

Thanks for your thoughts on the snippets manager - I think it could be quite useful - so expect that to be added sometime soon.

The latest version just committed includes ACE editor, along with yet another new panel :)

ProcessWire Version Switcher

Screen Shot 2016-06-19 at 12.42.40 AM.png

Screen Shot 2016-06-19 at 12.48.16 AM.png

This new PW Version Panel lets you choose from any of the versions you have available and gives you the ability to switch versions instantly.

The available versions come from Ryan's ProcessWire Upgrades module - so any version that you installed via it will be available.

When you click change, it swaps the names of: wire/, .htaccess, and index.php - much easier than manually renaming.

The icon is green when you are using the latest version that is available on your system, and orange for any other version.

Please let me know if you have any problems with either of these additions.

PS - It's probably obvious, but the switcher is not recommended for live sites, so don't blame me if a version change breaks your site!

 

  • Like 5
Link to comment
Share on other sites

Just now, netcarver said:

@adrian, Git branch integration next? :rolleyes:

Hey @netcarver - do you mean as a way to install/switch PW version, or for switching branches of your website code (ie site folder) ? I have actually been thinking about the latter - I think it could be very cool, but I wonder how standard different devs are in their approach to versioning their site folder, vs the website root. How are they using gitignore? 

There are some topics around this, some of which you have contributed to:

https://processwire.com/talk/topic/2885-what-filesfolders-should-be-added-to-gitignore-for-regular-development/

https://processwire.com/talk/topic/8505-pw-and-git/

https://processwire.com/talk/topic/5417-using-git-with-a-cms-for-version-control-and-deployment-on-multiple-machines/

Do you have any specific ideas?

Link to comment
Share on other sites

@adrian, I haven't actually given it much thought yet - that was a spur-of-the-moment posting, though I definitely wasn't thinking of using it for the core.

Now I've spent a few more cycles on it, I can see that I have two different ways of using git for my PW-related stuff;

  • For modules - in which case I just symlink in a subdirectory (suitably git init'd) from my master development directory so only some of the subdris in the site/modules/ directory will be git repos.
  • For whole sites - in which case I install from the latest zip'd version of PW and then git init in the site/ subdirectory.

I'm sure there will be other ways to do this too.

  • Like 1
Link to comment
Share on other sites

13 hours ago, k07n said:

What about 


if($PwVersion >= 3)

to


if($PwVersion >= 2.8)

?

Yeah, good idea - I have made those changes locally - they should be committed later today.

 

5 minutes ago, horst said:

@adrian: I have a question to the snippets collection. Are those snippets only meant to run in the Tracy console? (now powered with ACE!)

I think that was/is my thought. I am not sure where or how else you would want to run them. My idea was to just have a way to store common debug snippets and also perhaps admin/db cleanup, manipulation, batch operation type snippets. Maybe you have some better / different ideas to share?

  • Like 1
Link to comment
Share on other sites

No, - no other / better ideas here. Just trying hard to follow up with most of the new stuff here (in the forums). :)

Wondering how to best store / load / exchange them between different sites / installations. Textarea populated with json or simple json files?

  • Like 2
Link to comment
Share on other sites

hi adrian,

thank you VERY much for the console. i will use it a lot i am sure. just used it the first time now and i have some questions/suggestions:

is it somehow possible to adjust the width of the ACE field. or maybe set both ACE and the yellow output panel to 100% with? that would be great in a blank window:
2016-06-22 16_45_11-_svg xmlns=_http___www.w3.org_2000_svg_ xmlns_xlink=_http___www.w3.org_1999_xlin.png

if you click on "open in new window" it opens in a new window but it creates some buggy code:

123foreach($pages->find('id>1') as $item) {    echo $item->title . ' - ' . $item->path . '<br>';}XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

also it would be cool to have the possibility for multiple console windows so that you can have some code snippets open and test different things without rewriting the codesnippet. at the moment it opens the console in ONE window.

 

once more thank you very much for all the work with tracy. it has already sped up my daily pw work and i'm sure the console will save me some hours of reloading the browser in the future :) 

  • Like 2
Link to comment
Share on other sites

  • adrian pinned and locked this topic
  • adrian unpinned and pinned this topic
Guest
This topic is now closed to further replies.
×
×
  • Create New...