Jump to content

Tracy Debugger


adrian

Recommended Posts

7 minutes ago, bernhard said:

i prefer to have a dedicated folder for code snippets inside the modules' folder ( /site/modules/mymodule/snippets ).

Sorry if I am not quite getting this - are you suggesting then that I should force snippets for the Snippet Runner panel to be stored in /site/modules/TracyeDebugger/snippets/ ? Surely they will be overwritten when upgrading Tracy?

 

6 minutes ago, szabesz said:

Outside of site document root could be one option. Sure, default .htaccess rules should be taken into account.

Outside of document root is obviously safe, but if I allow full flexibility it will be up to you guys to add rules to the .htaccess to block direct access to these snippet files so they can't be run directly from the browser. That's why I'd prefer /site/templates/ or perhaps /site/assets/TracyDebugger/ as a base path. Anymore flexibility than that and I think we are asking for trouble.

  • Like 1
Link to comment
Share on other sites

2 minutes ago, adrian said:

Sorry if I am not quite getting this - are you suggesting then that I should force snippets for the Snippet Runner panel to be stored in /site/modules/TracyeDebugger/snippets/ ? Surely they will be overwritten when upgrading Tracy?

not if the folder is empty and excluded from git. or am i wrong here?

Link to comment
Share on other sites

4 minutes ago, bernhard said:

not if the folder is empty and excluded from git. or am i wrong here?

I think it depends on how you update modules. Manual overwrite of files would depend on whether you merge or replace when copying. I think if you use the PW Upgrade module it will replace /site/modules/TracyDebugger/ completely so the snippets directory would be lost / replaced with an empty one. I haven't tested this, but I think that's what happens. Either way, I think there are too many chances it will be lost. What do others think?

  • Like 2
Link to comment
Share on other sites

2 minutes ago, adrian said:

I haven't tested this, but I think that's what happens.

A module directory is renamed by prefixing it with a dot character and a new module directory is created upon extracting the zip file, as far as I know.

  • Like 1
Link to comment
Share on other sites

2 minutes ago, szabesz said:

A module directory is renamed by prefixing it with a dot character and a new module directory is created upon extracting the zip file, as far as I know.

you are right! thanks. than that's of course not possible. didn't think of that since i always updated my modules through git pull...

so +1 for /site/assets/TracyDebugger/snippets

Quote

Anymore flexibility than that and I think we are asking for trouble.

agree

  • Like 2
Link to comment
Share on other sites

8 minutes ago, szabesz said:

A module directory is renamed by prefixing it with a dot character and a new module directory is created upon extracting the zip file, as far as I know.

Of course, wasn't thinking about the renaming with dot character prefix. This does of course mean that your snippets will end up in that archived version so you'd have to copy across with each upgrade. 

 

1 minute ago, bernhard said:

so +1 for /site/assets/TracyDebugger/snippets

I was literally just writing this when your reply came through.

This is safe from the files being run directly from the browser and we have a history of this approach with several other modules using this location.

Done!

  • Like 2
Link to comment
Share on other sites

IMHO.. I think it would be best to specify a default directory in site/templates/TracySnippets and allow an override in Tracy for the directory to use in  site/templates.

I wouldn't recommend snippets in /site/assets/TracyDebugger/snippets because that folder typically isn't versioned control whereas site/templates/ is version controlled.

  • Like 1
Link to comment
Share on other sites

1 minute ago, gmclelland said:

IMHO.. I think it would be best to specify a default directory in site/templates/TracySnippets and allow an override in Tracy for the directory to use in  site/templates.

I wouldn't recommend snippets in /site/assets/TracyDebugger/snippets because that folder typically isn't versioned control whereas site/templates/ is version controlled.

Ok, I am going to provide two options (/site/assets/TracyDebugger/snippets/ and /site/templates/TracyDebugger/snippets/) - you can choose whichever you want from the config settings. I definitely see the version control issue, but semantically "assets" seems more appropriate, so you guys can decide what suits you better :) 

I like having the parent "TracyDebugger" rather than your suggested "TracySnippets" in case we end up with a need for another Tracy folder in the future - this way they are nested, rather that having them on the same level which I think will be cleaner.

Hope that's ok with everyone :)

  • Like 3
Link to comment
Share on other sites

Both would be probably be fine.  I prefer everything to be in site/templates so I know I can copy that whole directory to another site if needed to get the same functionality.

If snippets are uploaded to site/assets, I then have to change out of my working directory and hunt down specific folders in site/assets.  I prefer to work in one primary directory (site/templates) without switching around if necessary.  It saves time.

The way I see it is:

Does the module have to generate files? if yes, store the files in site/assets.  If no, store the files in site/templates somewhere.

Quote

 

I like having the parent "TracyDebugger" rather than your suggested "TracySnippets" in case we end up with a need for another Tracy folder in the future - this way they are nested, rather that having them on the same level which I think will be cleaner.

Hope that's ok with everyone :)

 

Sounds good

Thanks for all you do!

  • Like 3
Link to comment
Share on other sites

2 minutes ago, gmclelland said:

Thanks for all you do!

And thank you guys for all the feedback - seriously, it makes it much easier - often the decisions on the best way to do something can take longer than the coding :)

  • Like 4
Link to comment
Share on other sites

Major new version just released. There are quite a lot of changes and it fact it jumped two major point versions because I added two new panels. Here are the highlights!

1) New Snippets Runner panel - as discussed in the last few posts, this is similar to the Console panel, but all snippets are stored in the filesystem. By default they are stored in /site/templates/TracyDebugger/snippets/, but you can change that to /site/asets/TracyDebugger/snippets/ if you prefer. Running a loaded snippet grabs the latest version each time, so simply save in your code editor, switch to your browser and trigger Run. It has access to all PW variables and can reference the currently edited page etc, just like the Console panel.

59dc9a40b4b0a_ScreenShot2017-10-10at3_00_09AM.png.78d96f2a24fdc2aa65aff6a12cab644b.png

 

2) New Request Info panel - this panel contains most of the info from the ProcessWire Info panel, but also adds the following:

  • Server request (this is a dump of all items from $_SERVER
  • Input GET, POST, & Cookies (these used to be in the Debug Mode panel, but I think this panel is more appropriate for them)

PLEASE NOTE: This panel is set to be loaded by default when Tracy is installed, but if you are upgrading an existing Tracy install, you will need to manually add this to be loaded in the config settings.

59dc93b94eba5_ScreenShot2017-10-10at2_32_26AM.png.c4da0fae52a2b4a5ed7ac5c1b0ca976c.png

 

3) Revised ProcessWire Info panel - this is now much simpler and now contains:

  • API variables (with links to PW docs for each)
  • Core classes (with links to PW docs for each)
  • Config data (dump of $config var)
  • Versions List (an easily copyable list of server and PW core and module versions)
  • Admin Links (including Login, Logout, and 
  • Documentation Links

59dc92d8e01c3_ScreenShot2017-10-10at2_28_38AM.png.85a738dac824ba924ad63c3e40478a9e.png

 

4) Revised Debug Mode panel - several elements moved to Request Info and ProcessWire Info panels. Most of these sections could justifiably belong on the Request Info panel, but I think you are less likely to use most of these on a regular basis - they are more technical than the sections in the Request Info panel.

59dc9423ed1c9_ScreenShot2017-10-10at2_34_03AM.png.b7713deb559244a1d7cf7f32dabdd0ae.png

 

5) Request Info and Debug Mode panels now load in Redirect and AJAX bars

I limit the panels that show up on the Redirect and AJAX bars to ones that will have different content. For example, there is no point loading PHP Info, Captain Hook, etc for these additional bars. Part of my reason for splitting up the ProcessWire Info panel into the new Request Info panel is because there is no point having admin links etc being populated to the additional bars. So you'll see that the ProcessWire Info panel is not loaded for the additional bars, but the Request Info and Debug Mode panels are. Now you can see the details of each page request (whether it's a redirect or AJAX, or ordinary).

The panel on the left is after a POST form submission on a regular PW page and the one on the right is an AJAX call to a non-PW PHP script which is why there is no "Page Info" section. In this case, you can see the details of the request via the "Server Request" section which shows: 59dc9756c054a_ScreenShot2017-10-10at2_47_45AM.png.477643b3d8e52dde806c4f79e2c23d4c.png It also shows the GET and POST data for the request, and the edit link will open that /data/testajax.php file in your code editor.

59dc96add745f_ScreenShot2017-10-10at2_45_03AM.png.c78528dcef2e73c4266f4bb876706eae.png

 

6) Lots of other tweaks

There are lots of other tweaks, but the one that might cause a few weird issues is the way the debug bar and panel styles are loaded. The Tracy core now makes this easier, but I have noticed some instances where the styles are not being applied. I think it always comes down to browser caching, but if you find that a hard reload doesn't fix things, please let me know and I'll investigate further.

 

Feedback

There are lots of changes in this version, so please let me know if you have any suggestions - did I mess with something that you loved, but now hate, or do you just have ideas for how something could be done better? Please let me know!

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

Thanks a million again :) One thing I've been struggling with ever since is these nice list of icons:

59 minutes ago, adrian said:

3) Revised ProcessWire Info panel - this is now much simpler and now contains:

59dc92d8e01c3_ScreenShot2017-10-10at2_28_38AM.png.85a738dac824ba924ad63c3e40478a9e.png

I keep spending a lot of time hovering over them, waiting for the tooltip to appear, that is I cannot seem to learn what is what. Could you please provide an option to turn them into a simple vertical list of icons+labels? 

Edited by szabesz
typo
  • Like 5
Link to comment
Share on other sites

7 hours ago, szabesz said:

Thanks a million again :) One thing I've been struggling with ever since is these nice list of icons:

I keep spending a lot of time hovering over them, waiting for the tooltip to appear, that is I cannot seem to learn what is what. Could you please provide an option to turn them into a simple vertical list of icons+labels? 

 

Ok, they are now a list of icons with labels by default with an option to turn off the labels in the module settings. Hope that helps!

Of course if you are upgrading you will need to check the option.

59dd1382151f1_ScreenShot2017-10-10at11_37_37AM.png.ab315a74d6a3534997b519408f3910cb.png

  • Like 8
Link to comment
Share on other sites

13 hours ago, adrian said:

Major new version just released.

Wow, bumper update!
Aside: I wonder which PW module has the highest version number? Tracy must be leading the field in terms of number of releases in any case.

The Snippets panel is great - just what I was hoping for. Really handy having the keyboard shortcuts for run, and it's neat how the Run button gets focused after loading a snippet too.

One thing though: would it possible to allow a namespace declaration inside snippets? I need that for IDE code completion but when I include it I get...

2017-10-11_121742.png.2056188339a54bd8923998afd56e10d5.png

Maybe Tracy could strip out any namespace declaration on the first line when it runs the snippet?

  • Like 1
Link to comment
Share on other sites

4 minutes ago, Robin S said:

Aside: I wonder which PW module has the highest version number? Tracy must be leading the field in terms of number of releases in any case.

Yeah, it is certainly up there :)

 

4 minutes ago, Robin S said:

The Snippets panel is great - just what I was hoping for. Really handy having the keyboard shortcuts for run, and it's neat how the Run button gets focused after loading a snippet too.

Glad it's working well for you. The focusing of the Run button was initially to help with helping target the eventListener for the keyboard shortcut, but I found what I think it a better way without having conflicts if both the Console and Snippet Runner panels are open at once. Even after figuring this out, I decided to keep the focus of the Run button as a visual reminder that loading != running.

7 minutes ago, Robin S said:

One thing though: would it possible to allow a namespace declaration inside snippets?

Let me look into this - should be a pretty simple fix.

  • Like 1
Link to comment
Share on other sites

I've just made a few more tweaks so that now you can have mixed html and php in your snippet file. For example this:

<p>Welcome to the <?=$page->name?> page!</p>

will return:

59dd6a941434e_ScreenShot2017-10-10at5_48_59PM.thumb.png.daffd035ad6ab50a2f966dbdcf3b96b7.png

This might come in handy for testing snippets of template code if you use a direct output approach, or markup regions, or anything else where you are embedding php into HTML tags. The only downside is that now pure PHP snippet files must start with a php open tag. I think this is a quite acceptable compromise as I couldn't imagine writing code in my editor without it.

You can also do this with the Console Panel, but you have to start the snippet with ?> to close the automatically added PHP tag, eg:

?>
<p>Welcome to the <?=$page->name?> page!</p>

This is because the Console Panel always adds an opening PHP tag if it doesn't find one - I think this is best here because it's nice to not have to manually add when doing a quick code test.

Anyone have any thoughts on these new abilities - does anything seem illogical?

  • Like 3
Link to comment
Share on other sites

6 minutes ago, Robin S said:

@adrian, I'm seeing an error in the back-end AJAX bar after I save a page. Tracy v4.6.4

2017-10-11_142727.thumb.png.59cfccea1facfcb2c681e14492b7976b.png

Sorry about that - I am not seeing that, but I see where it's coming from. Please try 4.6.5 and let me know.

PS Don't forget to enable the new Request Info panel which now contains most of the info from the old version of the PW Info panel :)

  • Like 1
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.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Similar Content

    • By monollonom
      (once again I was surprised to see a work of mine pop up in the newsletter, this time without even listing the module on PW modules website 😅. Thx @teppo !)
      FieldtypeQRCode
      Github: https://github.com/romaincazier/FieldtypeQRCode
      Modules directory: https://processwire.com/modules/fieldtype-qrcode/
      A simple fieldtype generating a QR Code from the public URL of the page, and more.
      Using the PHP library QR Code Generator by Kazuhiko Arase.

      Options
      In the field’s Details tab you can change between .gif or .svg formats. If you select .svg you will have the option to directly output the markup instead of a base64 image. SVG is the default.
      You can also change what is used to generate the QR code and even have several sources. The accepted sources (separated by a comma) are: httpUrl, editUrl, or the name of any text/URL/file/image field.
      If LanguageSupport is installed the compatible sources (httpUrl, text field, ...) will return as many QR codes as there are languages. Note however that when outputting on the front-end, only the languages visible to the user will be generated.
      Formatting
      Unformatted value
      When using $page->getUnformatted("qrcode_field") it returns an array with the following structure:
      [ [ "label" => string, // label used in the admin "qr" => string, // the qrcode image "source" => string, // the source, as defined in the configuration "text" => string // and the text used to generate the qrcode ], ... ] Formatted value
      The formatted value is an <img>/<svg> (or several right next to each other). There is no other markup.
      Should you need the same markup as in the admin you could use:
      $field = $fields->get("qrcode_field"); $field->type->markupValue($page, $field, $page->getUnformatted("qrcode_field")); But it’s a bit cumbersome, plus you need to import the FieldtypeQRCode's css/js. Best is to make your own markup using the unformatted value.
      Static QR code generator
      You can call FieldtypeQRCode::generateQRCode to generate any QR code you want. Its arguments are:
      string $text bool $svg Generate the QR code as svg instead of gif ? (default=true) bool $markup If svg, output its markup instead of a base64 ? (default=false) Hooks
      Please have a look at the source code for more details about the hookable functions.
      Examples
      $wire->addHookAfter("FieldtypeQRCode::getQRText", function($event) { $page = $event->arguments("page"); $event->return = $page->title; // or could be: $event->return = "Your custom text"; }) $wire->addHookAfter("FieldtypeQRCode::generateQRCodes", function($event) { $qrcodes = $event->return; // keep everything except the QR codes generated from editUrl foreach($qrcodes as $key => &$qrcode) { if($qrcode["source"] === "editUrl") { unset($qrcodes[$key]); } } unset($qrcode); $event->return = $qrcodes; })
    • By Sebi
      AppApiFile adds the /file endpoint to the AppApi routes definition. Makes it possible to query files via the api. 
      This module relies on the base module AppApi, which must be installed before AppApiFile can do its work.
      Features
      You can access all files that are uploaded at any ProcessWire page. Call api/file/route/in/pagetree?file=test.jpg to access a page via its route in the page tree. Alternatively you can call api/file/4242?file=test.jpg (e.g.,) to access a page by its id. The module will make sure that the page is accessible by the active user.
      The GET-param "file" defines the basename of the file which you want to get.
      The following GET-params (optional) can be used to manipulate an image:
      width height maxwidth maxheight cropX cropY Use GET-Param format=base64 to receive the file in base64 format.
    • By MarkE
      This fieldtype and inputfield bundle was built for storing measurement values within a field, rendering them in a variety of formats and converting them to other units or otherwise modifying them via the API.
      The API consists of a number of predefined functions, some of which include...
      render() for rendering the measurement object, valueAs() for converting the value to another unit value, convertTo() for converting the whole measurement object to different units, and add() and subtract() for for modifying the stored value by the value (converted as required) in another measurement. In the admin the inputfield includes a checkbox (which can be optionally disabled) for converting values on page save. For an example if a value was typed in as centimeters, the unit was changed to metres, and the page saved with this checkbox selected, said value would be automatically converted so that e.g. 170 cm becomes 1.7 m.

      A simple length field using Fieldtype Measurement and Inputfield Measurement.
      Combination units (e.g. feet and inches) are also supported.
      Please note that this module is 'proof of concept' at the moment - there are limited units available and quite a lot of code tidying to do. More units will be added shortly.
      See the GitHub at https://github.com/MetaTunes/FieldtypeMeasurement for full details and updates.
    • By tcnet
      File Manager for ProcessWire is a module to manager files and folders from the CMS backend. It supports creating, deleting, renaming, packing, unpacking, uploading, downloading and editing of files and folders. The integrated code editor ACE supports highlighting of all common programming languages.
      https://github.com/techcnet/ProcessFileManager

      Warning
      This module is probably the most powerful module. You might destroy your processwire installation if you don't exactly know what you doing. Be careful and use it at your own risk!
      ACE code editor
      This module uses ACE code editor available from: https://github.com/ajaxorg/ace

      Dragscroll
      This module uses the JavaScript dragscroll available from: http://github.com/asvd/dragscroll. Dragscroll adds the ability to drag the table horizontally with the mouse pointer.
      PHP File Manager
      This module uses a modified version of PHP File Manager available from: https://github.com/alexantr/filemanager
       
    • By tcnet
      This module implements the website live chat service from tawk.to. Actually the module doesn't have to do much. It just need to inserted a few lines of JavaScript just before the closing body tag </body> on each side. However, the module offers additional options to display the widget only on certain pages.
      Create an account
      Visit https://www.tawk.to and create an account. It's free! At some point you will reach a page where you can copy the required JavaScript-code.

      Open the module settings and paste the JavaScript-code into the field as shown below. Click "Submit" and that's all.

      Open the module settings
      The settings for this module are located int the menu Modules=>Configure=>LiveChatTawkTo.

       
×
×
  • Create New...