Setup Profiling and Debugging with Clockwork in Chrome or Firfox

Kirby 3 Solutions 🎉
1

Here I’m going to show how to use Clockwork to debug and profile php without dumping vars that break your ajax calls (and in case you can’t use xdebug).

1952×1055

Debug with Clockwork

https://github.com/itsgoingd/clockwork

Installation Guide

Install Clockwork as extension in your browser Chrome or Firefox

Install Clockwork in your project

$ composer require itsgoingd/clockwork

Open Kirby’s index.php and initialize Clockwork right in the beginning:

<?php

require __DIR__.'/kirby/bootstrap.php';

$clockwork = Clockwork\Support\Vanilla\Clockwork::init(
    [
        'storage'            => 'sql',
        // sqlite database will be saved directly in the vendor folder
        'storage_database'   => 'sqlite:'.__DIR__.'/clockwork.sqlite',

        'register_helpers'   => true,
        'enable'             => true,
        'storage_expiration' => (24 * 60),

        'requests'           => [
            'except' => [
                // '/api/*/lock',
                // '/api/*/unlock',
            ],
        ],

        'filter_uris'        => [
            '.*/lock',
            '.*/unlock',
            '/api/auth',

        ],
    ]
);

All options are described here: https://github.com/itsgoingd/clockwork/blob/master/Clockwork/Support/Vanilla/config.php

At the end of the index file, where you render the CMS, write the output in a variable, end the Clockwork process and then echo the Kirby output.

// echo (new Kirby)->render();
$output = (new Kirby)->render();
clock()->requestProcessed();

echo $output;

Next you go into your Kirby config.php file to setup a route for Clockworks API:


return [
    'debug'     => true,

    'routes'    => [

        [
            'pattern' => '__clockwork/(:any)',
            'action'  => function ($all) {
                clock()->returnMetadata($all);
                exit;
            },
        ],
    ],

    // this is just a neat way to see what events are called, in which order.
    'hooks'     => [
        '*' => function ($event) {
            clock()->debug($event->name());
        },
    ],
];

Now in your php scripts you can measure processing time https://underground.works/clockwork/#docs-timeline:

clock()->startEvent('twitter-api-call', "Loading user's latest tweets via Twitter API")

// some long running process

clock()->endEvent('twitter-api-call')

and get some fancy bar graphs

or log variables https://underground.works/clockwork/#docs-logging:

clock()->debug('writeContent', [$data,$this->getTableColumns()]);

and get insight in your code.

download
download1920×518 39.3 KB

If someone has more knowledge of Kirby’s internals, maybe this can become a plugin, that is able to profile Kirby’s performance of folders/files I/O and database calls.

5 Likes