Vector is now Happy Cog

Read more about this exciting transition here

Clockwork - Improving PHP Debugging

Rod McTainsh
04.08.15
Clockwork - Improving PHP Debugging
Rod McTainsh
04.08.15

Debugging a PHP web application (to me) has always been somewhat of a hack. You may disagree but I think that all of us at one time or another have gone down this road:

Or maybe you used functions & selective commenting:

Object orientation is certainly useful, except when it makes things more complicated:

Those of us who (are lucky enough to) use Laravel and its mighty logging class would recognize this:

Regardless of which of these tried and true techniques you have tried (or are willing to admit to trying), the common thread throughout all of these forays into the dark and mystical world of PHP debugging is that although we were able to log our useful information, we had to jump through hoops (or temporarily destroy our app) to get to that information.

Enter Clockwork!

An extremely simple and useful tool that brings all of your app's log output, database queries, request headers, session data and profiling information to your browser in the form of a Chrome Developer Tools plugin & Composer package!

What does it do?

Simply put, it interacts with your application to collect and categorize information from each request made to your app. My experience is with Laravel 4 - but it also supports other frameworks according to the README.

The data is organized into tabs (Request, Timeline, Log, Cookies, Session & Database) and is linked to the request that it came from. The request "history" (and request data) is also persistent across subsequent page loads. You receive data for any completed request to the back end - this includes ajax requests. It's worth noting that if a request fails - e.g. with a status of 500 - you won't see it in Clockwork.

What do you get?

As I mentioned, the data is organized into tabs. Here's what you see within the Chrome Developer Tools plugin:

Request

This is comparable to the regular Chrome Developer Tools Network tab except that it has a separate section for GET and POST data that went with the request.

Timeline

Again, much like the Developer Tools Timeline except that it deals in Laravel-isms such as Application initialisation, Framework booting/running and Router dispatch. This allows you a high level view to where time is being taken. You can also add your own events to time application logic. The “My Test Event” event below was added with the following code within the Laravel controller:

Log

Shows the output of Laravel’s Log::info(), Log::warning() & Log::error() methods. Simple but incredibly useful. There is also Clockwork::info, which allows you to log serializable data. It's deserialized and JSON encoded then displayed as though you called console.log with the value.

Cookies

As the name suggests.

Session

Session data, like the log output serialized data is displayed like it were JSON encoded and ran through console.log.

Database

All of the queries that were run (in order of execution) during the request and how long they took. This allows for simple copy & paste into your SQL client. (Though this may not always be very quick given that Eloquent separates out the SQL from the pre-combined parameters within the query log.)

Conclusion

All in all, if you're using Laravel Clockwork is a great tool that really helps with building and debugging your large applications. It’s become an invaluable part of our process, saving hours of time chasing down issues. Give it a try and let us know what you think!

(Photo by Ryan McGuire from Gratisography)

Back to Blog