In the beginning of any Drupal project the site loads very quickly because there aren’t many modules installed. But as you add modules, the performance of the site will become slower and slower.
There’s always a certain point in the project where you realize it’s time to look at the problem and see if it’s a rogue module or some dodgy code, we’ve all seen this.
Trying to debug a performance issue can be tedious work. But often, it comes down to having too many queries loaded on a page.
If you’re on Drupal 7, just enable query logging using the Devel module. This will show all the queries generated at the bottom of the page.
But for Drupal 8 we have something better: Web Profiler.
Web Profiler is a Drupal 8 port of the Symfony WebProfiler bundle. The port is possible because Drupal 8 uses Symfony components.
Web Profiler adds a toolbar at the bottom of every page and shows you all sorts of stats such as the amount of database queries loaded on the page, which services are used and much more.
In this tutorial, you’ll learn how to install and use Web Profiler.
Go download the Devel module then install the Web Profiler sub-module.
$ drush dl devel $ drush en webprofiler
$ drupal module:download devel --latest $ drupal module:install webprofiler
Add highlight.js and D3.js
Highlight.js is used, as you can guess, to add syntax highlighting to code. You can see it used when listing out database queries.
To add highlight.js, just head over to its download page and click on the Download button in the “Custom package” section. Then extract the downloaded zip file into
/libraries/highlight so the path to the library is
D3.js is used when viewing the Timeline page.
To add D3, just go to its homepage and download the library by clicking on d3.zip. Extract the zip file copy the d3 folder into the
/libraries directory so it’s
Using Web Profiler
One thing I like about Web Profiler is that it’s easy to setup. Just install the module and the toolbar will appear on the page. Straightaway you’ll be able to see useful information such as the query count, memory usage and more.
Here are two useful items which’ll appear on the toolbar.
This shows you the time it took to render the page and memory usage.
If you click on the Timeline item and see an empty page it means you haven’t finished configuring it. You’ll need to add D3 and some code to your settings.php. You can grab the code from the “Displaying Timeline” section.
This shows you the amount of queries used to render the page and the total query time. If you want to see all the queries, just click on the Database item.
Enable Extra Toolbar Items
Not all available toolbar items are active by default. To enable them, go to the configuration page by hovering over the Drupal icon on the left and clicking on “Configure Webprofiler”.
In the “Active toolbar items” checkbox list you’ll see all the toolbar items. To enable or disable, just check the checkbox and click on “Save configuration”.
Let us know which toolbar item you like to use in the comments below.
Configuring Web Profiler
Open Discovered Classes in IDE or Text Editor
In a lot of the reports that you get back from Web Profiler, it references a class and method. Take for example the database queries. You can see where the queries are called from.
Web Profiler lets you navigate directly to the class and method by clicking it. It’ll open the configured IDE and go directly to the method. This makes it easy to get to the source with a single click.
Let’s configure Web Profiler to open PhpStorm.
Go to the “Webprofiler settings” page (admin/config/development/devel/webprofiler) or click on the “Configure Webprofiler” link by hovering over the Drupal icon on the left.
Click on the “IDE SETTINGS” field-set and add
phpstorm://open?file=@file&line=@line into “IDE link”.
Please note, I’ve only tested this using PhpStorm on a mac.
For Web Profiler to display the details on the timeline page you must add the following two lines to your
$class_loader->addPsr4('Drupal\\webprofiler\\', [ __DIR__ . '/../../modules/contrib/devel/webprofiler/src']); $settings['container_base_class'] = '\Drupal\webprofiler\DependencyInjection\TraceableContainer';
Be aware that the code above assumes you’ll add the devel module in
The Web Profiler is a must-have module if you’re doing any development in Drupal 8. It gives you visibility into parts of Drupal which can be hard to debug. If you need to find the order in which events are loaded or how many blocks are displayed, it can help.
I’d recommend you have the toolbar displayed while building the site. This way if a page takes a while to render, then the toolbar will help you debug it.
Q: Nothing appears on the timeline page
First, make sure you’ve add the D3 library and you’ve add the bit of code in the “Displaying Timeline” section.