Jump to content

Tracy Debugger


Recommended Posts

4 minutes ago, gmclelland said:

The scanning of files for ToDo items to prevent any file scanning altogether.

I remember Drupal having a similar problem here https://www.drupal.org/node/2329453

But that's what the "Ignore Directories" option is for. Are you suggesting that I should hard code in  those bower, sass, node_modules etc, so you don't need to manually add them?

Link to comment
Share on other sites

No, I'm not suggesting you hard code those values.  I just thought those "node_modules, .sass-cache, etc.." could be added to the other defaults (git svn etc..).

I was also suggesting to include a new checkbox [Scan files for To Do items].  Checking this would show all the other fields(like defaults to exclude, scan modules? etc..).  This way the whole functionality can be turned off completely if it isn't going to be used.

No biggie though, as of right now I'm not experiencing any performance problems.

Link to comment
Share on other sites

2 minutes ago, gmclelland said:

I just thought those "node_modules, .sass-cache, etc.." could be added to the other defaults (git svn etc..).

Ok, that sounds reasonable :)

2 minutes ago, gmclelland said:

I was also suggesting to include a new checkbox [Scan files for To Do items].  Checking this would show all the other fields(like defaults to exclude, scan modules? etc..).  This way the whole functionality can be turned off completely if it isn't going to be used.

Scanning will only happen if you have the ToDo panel enabled - disabling the panel would do the same as what you are suggesting, unless I am not fully understanding ?

Link to comment
Share on other sites

30 minutes ago, adrian said:

Scanning will only happen if you have the ToDo panel enabled - disabling the panel would do the same as what you are suggesting, unless I am not fully understanding ?

Great.  I didn't know that.  I'll just turn off that panel.  Thanks Adrian

  • Like 1
Link to comment
Share on other sites

@gmclelland - latest version includes node_modules and sass-cache as default directories to exclude.

On an unrelated note, I have also added a new "Selector Queries" section to the PW Debug panel. This shows you all the selector calls made during the current page load.



This post also includes a Console Panel snippet idea. If you need to look up a page, template or field ID, this snippet will return the name, title, label, edit and view links, etc. Just enter the ID and the type and run. I have saved it as "Info from ID", but you can choose whatever name you want. Code included in a spoiler below. 



$id = 1; // ID of page, template or field
$type = 'page'; // 'page', 'template', or 'field'

// no need to edit below
$typeVar = $type.'s';
$obj = $$typeVar->get($id);
if($obj->id) {
    if($type == 'page') {
        echo '<p><strong>' . $obj->title . '</strong></p><p>' .
        ($obj->editable() ? '<a href="'.$obj->editUrl().'">Edit</a>' : 'Page not editable.') . ' | ' . 
        ($obj->viewable() ? '<a href="'.$obj->url.'">View</a>' : 'Page not viewable') . '</p><p>' .
        'Path: ' . $obj->path . '<br />' .
        'URL: ' . $obj->httpUrl . '<br />' .
        'Template: ' . $obj->template->name .
    if($type == 'template') {
        echo '<p><strong>' . ($obj->label ? $obj->label.' ('.$obj->name.')' : $obj->name) . '</strong></p><p>' .
        '<a href="'.$config->urls->admin.'setup/template/edit?id='.$id.'">Edit</a>' .
    if($type == 'field') {
        echo '<p><strong>' . ($obj->label ? $obj->label.' ('.$obj->name.')' : $obj->name) . '</strong></p><p>' .
        '<a href="'.$config->urls->admin.'setup/field/edit?id='.$id.'">Edit</a>' .
else {
    echo '<p>' . ucfirst($type) . ' does not exist.</p>';



  • Like 5
Link to comment
Share on other sites

Hey @adrian and others, I need your help. How can I use the Tracy Debug Bar on an external site, which includes ProcessWire´s core?

Tracy is already defined when I include the ProcessWire core (where Tracy Debugger is installed), so I don´t include the standalone version of Tracy anymore.
But the debug bar does not show up nor the needed HTML code gets added to the page.

Here is what I do. How can I show this beautiful debug thingy?

This does not work:
require(__DIR__ . '/../myprocesswire-installation/index.php');
TD::barDump('Show a dump'); // This does nothing

// This works if I don´t include ProcessWire, but I need it
//require 'lib/tracy/src/tracy.php';
//    use Tracy\Debugger;
//    Debugger::enable();
//    Debugger::$logSeverity = E_NOTICE | E_WARNING;
//    Debugger::barDump('test');


Link to comment
Share on other sites

@jmartsch - I think the issue you are having is likely permission access to the debug bar. When I use it in bootstrapped mode, I can use bd() calls as normal. Just make sure you are logged into the backend before loading the bootstrapped page.

Does that work for you?

PS - I don't have to do any manual loading of the Tracy core when I do this.

Link to comment
Share on other sites

Glad that worked for you @jmartsch

On another note, the new Selector Queries section in the DebugMode panel now includes a "Time" column so you can see how long each of your selectors is taking. Note that #7 is an intentionally relatively slow query to make a point for this screenshot:


Keep in mind that caching may get involved here once you reload a page. Clearing the session (eg logging out and in again) will show you the speed on first load for a user.

Also, just added a "Logout" icon/button to the PW Info panel - nice shortcut if you want to logout from the front-end of your site.


  • Like 2
Link to comment
Share on other sites

For anyone who tries out the new sidebar features in the UiKit admin theme, I just wanted to mention that I already have a partial fix (not committed yet) for the problem of the debug bar appearing in each sidebar, along with the main content area. Each sidebar (and main content area) is an iframe, which is why the debug bar gets loaded in each one. The fix I have works for the initial page load, but falls down when you try to edit a page. I have suggested a change to the core/uikit theme to Ryan (in a PM) that will allow me to fix this as well, but I need him to implement first.

I'll update Tracy as soon as there is a fully working solution.


  • Like 1
Link to comment
Share on other sites

Ok, I went with a different fix for the UiKit admin theme sidebars that works with the current version of PW and the UiKit theme.

If sidebars are enabled, the Tracy debug bar is attached to the main iframe. 

Please let me know if you notice any issues.

Link to comment
Share on other sites

Hi @adrian,

I didn't read the whole 37 sites, so sorry if this comes up again, but I have a really weird problem: The debugger bar is not shown in one situation. Most of the time it will not show if I do something like this:

  1. fill out formular and send (bar is shown before send)
  2. check form (same page/template), if ok: forward to another page.
  3. at the other page: the bar is not loaded/shown, even after reload and browser cache disabled.
  4. waiting for around one or two minutes, then reload the same page: bar is shown.

Between point 3 and 4 I can visit other pages and the bar is still not shown. At point 4 the missed dumps and send emails are shown. This is making problems at some pages, that should not be reloaded again.

After some minutes the bar is shown again. before there is no visibility, and the div container with the id "tracy-debug" is not loaded/created. The show button is loaded, but hidden and if unhidden then it has no function at all.

Is this known?

Link to comment
Share on other sites

Hi @godmok - thanks for the report. Unfortunately I am having a trouble understanding exactly what the steps are to reproduce this. Is there any chance you could share a screencast of the problem in action? Also, might I have access to the server (if it's online) so I can test - although I think the screencast first still might be important.

I don't think I have ever come across anything like this. Anyone else ?

Hopefully we can get to the bottom of it though and get it fixed.


  • Like 1
Link to comment
Share on other sites

Just added a new "Clear Session & Cookies" button in the ProcessWire Info panel:


It's the new reset/reload looking icon.

This will log you out and back in again, clear all cookies for the domain, and return you to the same URL you were on (along with the full query string).

I have been finding this very handy with module development when it is manipulating parts of the admin that are cached (like menus etc), but it can also be handy for example when you change an Images field's "Default image grid mode" setting because you need to clear cookies to see these changes. I am sure you'll find other uses as well.

  • Like 4
Link to comment
Share on other sites

On 6/19/2016 at 8:04 AM, netcarver said:

@adrian, Git branch integration next? :rolleyes:

Well, it's been a long time coming, and not sure if it's exactly what you had in mind, but I just added a new "Git Info" panel that displays Git branch, latest commit message, etc for your site (assuming you have it under Git version control). This is just the first version. My goal is to add color coding of the icon (like many other panels) to get your attention. I am looking for feedback on this though. I could either make it possible to configure different colors for different branches, or else I could try to match the branch name against the subdomain / extension, eg. dev.mysite.com, staging.mysite.com or mysite.dev, mysite.staging, etc and color green if they match and red as a warning if they don't.

Anyone have any thoughts on the best approach?



On another note, I just had to do quite a bit of work fixing the "Versions List" feature on the ProcessWire Info panel - two recent Tracy core updates broke this functionality and I just noticed. Also, it looks like Github changed the way they handle line breaks inside <details> tags, so also had to tweak that, but I think everything is working again now!

  • Like 3
Link to comment
Share on other sites

Hi @Ivan Gretsky - you need to manually set the output mode to "DEVELOPMENT" to make the User Switcher work. I initially set it up this way as an additional security layer, but I am thinking about revising the need to do this.

Let me know if you still have any problems.

  • Like 2
Link to comment
Share on other sites

Just now, Ivan Gretsky said:

Are there any string reasons why not allow it for DETECT mode?

I was trying to be extra cautious just in case someone could spoof DETECT mode, although I don't really think that is an issue - I will revisit this sometime soon, because it would be nice if this was always available.

2 minutes ago, Ivan Gretsky said:

Does it allow to switch to default guest user somehow?

Use the "Logout" button - that will log you out so you are a "guest", but still keep the Tracy debug bar available and keep the User Switcher session alive.

Feel free to post any suggestions for improvements as you play around with this.

  • Like 2
Link to comment
Share on other sites

1 minute ago, Ivan Gretsky said:

There is no one-click way to log in again, is it?

Of course - just choose a different user and click "Switch".

Don't forget to set a session length before initially clicking Logout though so that the User Switcher is activated in the first place.

Sorry if it's not totally intuitive - I haven't had much feedback on this feature yet.

Link to comment
Share on other sites

@M.O.Z.G - I think you must be running the Legacy version of the Tracy core? Do you have PHP 5.4+ so you can run the Master version?

That said, I still don't know why all those "previous" bars are staying like that. Do they go away if you clear the PW session (log out and back in again)? Does the problem continue after that? When did this start happening for you - was it a PW or Tracy upgrade, or a move to a new server? Any unusual session settings on the server?

  • Like 1
Link to comment
Share on other sites

  • adrian pinned and locked this topic
  • adrian unpinned and pinned this topic
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 !)
      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.

      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.
      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.
      $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.
      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.

      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

      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...