DebugKit for CakePHP 3.0 : A new dimension of debugging in Open Source community

05 Nov 2014

The core purpose of DebugKit is to provide a debugging toolbar and superior debugging tools for CakePHP apps. There have been several version releases of the DebugKit according to the different versions of CakePHP. The latest one being the DebugKit for CakePHP 3.0. During the CakeFest 2014, DebugKit was upgraded to CakePHP 3.0.

Considering the changes that were made, it can be said that it involved more re-write and re-design that actually upgrade. Its not just that DebugKit functionality has been updated for 3.0, its visual design has also got a new life. Various features of the updated visuals DebugKit include Cache panel, ORM auto model warnings and summary data. Definitely, all these updates will make debugging a lot easier for professionals offering CakePHP development services.

Basically, the upgrades were done to counter following issues -

• Its not easy to make DebugKit appear great as it is present on the same page as that of your app. As application CSS can apply to DebugKit, it looks inconsistent in several apps.
• Lots of HTML is added by the DebugKit to the page that makes the application go slow.
• DebugKit history mode is quite fragile

All of these issues have been taken care of by re-designing the way DebugKit interacts with an app and the way in which it stores the data. A prototype was hacked to ensure that iframe messaging can be employed for toolbar resizing purpose. As the panels loaded slowly, a semi-transparent place was required for storing the data; and SQLite served the purpose perfectly. All these changes made DebugKit for CakePHP 3.0 have following  architecture -

• Host application loads the plugin, that adds a dispatcher filter.
• For each panel, dispatcher filter attaches event listeners; and as soon as the request is complete, the results get saved into a SQLite database.
• For HTML request, a small Javascript file is injected into the page by the dispatcher filter.
• With page fully rendered, the small script file injects the iframe using only the native browser features; this iframe hosts the panels & toolbar.
• AJAX on-demand is used for loading each panel’s data which is further inserted into iframe.
• The iframe buttons convey the messages to host page to tell the loader script the correct dimensions for making the iframe.
• As loading of all data & panels happens via XHR, the working of history mode is exactly same as that of the standard operation.

"From the Editor's Desk" is not just about the content. Our content writers will be sharing their thoughts on industry trends, new technologies, and emerging topics that are relevant to our readers. We believe that it's important to stay up-to-date with the latest news and trends, and We excited to share my thoughts and insights with you.