Debug Tool in Craft 3: Here’s all you need to know about it

Before introducing the Debug Tool in Craft 3, Craft CMS made you install a separate web-based application, Web-Console. You could run shell commands on your server to check for errors and missing elements in the written code. Not a fancy deal though! Especially when Craft 3 was designed to be a problem-solver. The lack of a debug functionality was a major issue and ergo, Debug Tool was introduced. The coolest thing about this overlay toolbar is that you can diagnose particular pages on the spot. It shows you all sorts of essential things; number of users, logs, database enquiries, errors, time and memory.

Make sure you have the admin login. Once you’re logged in, head to the ‘my account’ section in the drop down where it reads your username in the top left of your Control Panel.

You’ll find an option to change your preferences in the account section. Apart from the language and ‘week start day’ preference, you’ll find two check boxes with a description of what each one does. You can select either or both according to your usage and when and where you want the toolbar to appear.

Show the debug toolbar on the Front end
Show the debug toolbar on the control panel

Check the desired boxes, save and continue. Enable devmode to grant unrestricted access to all the useful statistics and elements of the tool. Otherwise, the tool will only show errors and warnings.

A collapsed overlay panel will appear in the bottom of your page. It reads Craft’s C from the logo itself. You can press on it to expand it. That overlay panel is Craft 3 debug toolbar. It shows you a handful of information and helps you keep a check on your page in real time. You can interact with the information shown in the toolbar by further expanding it half way through the page with a click. To use it in a separate tab, click on the “C”. The full version of the toolbar accommodates more information making it easier to keep track of all the errors, logs, and discrepancies.

The debugging toolbar is not for bug fixes only. It offers other perks too:

Timeline — It is basically a graphical presentation of your page’s performance. A graph of time and space vs the queries. It keeps track of your page’s load-time and memory used.
User — It provides information about users and their sessions.
Router — A table of rules that Craft checks before routing to a particular template.
Request — It shows all sorts of information from Parameters to headers to sessions and server global variables.
Logs — You can find all the error and warning related logs here.
Deprecated — Shows deprecation errors.
Profiling — Monitor your page’s performance with information about load time and peak memory usage.
Database — Shows the Database queries. It can be sorted by time and duration.
Asset Bundles — It contains the information of the assets being used.
Mail — It keeps a mail log if you’re using a mail tool on Craft.

Debug Tool provides you with crucial information about your website in real time. People who are migrating from Craft 2 will find this tool very useful because it eliminates the dependency on web console to monitor errors and logs. Craft’s minimalism has already made us a fan. These precise features with high functionality make it our favorite CMS. Our development shop is open for all kinds of Craft projects. Ping us here if you are looking for a Craft partner.