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.
Now there’re a few other ways to profile your Drupal site. A popular one is to use XHProf and Devel integrates with it. You also have the XHProf module.
In this tutorial, you’ll learn how to install and use Web Profiler.
Getting Started
Web Profiler used to be its own project. However, now it’s part of Devel.
Go download the Devel module then install the Web Profiler sub-module.
Below are the Drush and Drupal Console commands to download and install:
Drush:
$ drush dl devel $ drush en webprofiler
Drupal Console:
$ drupal module:download devel --latest $ drupal module:install webprofiler
Install Libraries
Add highlight.js and D3.js
As far as I can tell these two JavaScript libraries are optional. Web Profiler will still work even if you don’t have these installed.
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 /libraries/highlight/highlight.pack.js.
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 /libraries/d3/d3.min.js.
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.
Timeline
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.
Database
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”.
If you’re learning how to write you’re own service or event, which is new for Drupal 8, then I’d recommend you activate them in the toolbar.
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.
Displaying Timeline
For Web Profiler to display the details on the timeline page you must add the following two lines to your settings.php or settings.local.php.
$class_loader->addPsr4('Drupal\webprofiler\', [ __DIR__ . '/../../modules/contrib/devel/webprofiler/src']);
$settings['container_base_class'] = 'DrupalwebprofilerDependencyInjectionTraceableContainer';
Be aware that the code above assumes you’ll add the devel module in /modules/contrib/devel.
Summary
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.
FAQ
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.
I think this module unsupported
Thank u,
Web profiler is part of Devel, I mention that in the tutorial and the video. You’re referring to the old project, which has been merge into Devel.
I added some extra text to avoid any confusion.
Thank you for your reply,
Noted ;).
Nice tutorial, well presented. I’ll be sharing it with the team.
Just a note, I found that D3 has had a major version upgrade ( from 3.5.17 to 4.1.1) within the last month.
The CHANGES seem extensive https://github.com/d3/d3/blob/master/CHANGES.md
And for me it meant that the D3 graphs provided by webprofiler didn’t work.
The new download from https://d3js.org/d3.v4.min.js didn’t work, but using the older 3.x one https://d3js.org/d3.v3.min.js seemed to be the answer this month.
Thanks for the tip.
Very well presentation. 🙂
Hello Ivan,
I am reaching out as I am attempting to load the WebProfiler toolbar however I seem to be unable to do so…
– I have enabled both Devel and Web Profiler modules
– I have also downloaded highlight and d3 directly under my /docroot/libraries folder so that I have /docroot/libraries/highlight.pack.js and /docroot/libraries/d3/d3.js files
After doing so and based on the tutorial page, it seems that the Web Profiler should automatically appear at the bottom of the screen however that doesn’t seem to be the case and I don’t see such toolbar….
What am I missing?
Do I need to add the libraries under my /docroot/themes/custom/[theme-name]/theme-name.libraries.yml file maybe? The video above didn’t show any such step so I am at a loss as to why I am unable to view the toolbar.
Hi Patrick,
Are you getting errors? PHP or JavaScript? Have you tried it with the Bartik theme, if you’re using a custom theme.
Also try it on a new Drupal installation.
Cheers,
Ivan
Thanks for the response. I looked at the console using Acquia’s DevDesktop and didn’t see any PHP errors nor did I see any JS ones on Chrome’s console. What I didn’t do was try using Bartik so I can try that.
About the other suggestion to attempt this using a new installation, I would think that should work and it would be great to see the toolbar in action however besides that, how would this help me if attempting to debug a view or something build on the website that I am working on if I use a new installation? I am sorry if this is a dumb question, I just want to make sure I don’t miss anything.
Again thank you for taking the time to respond.
If you’re having problems with a module you need to figure out if it’s your setup, custom modules or theme. With Drupal’s hook system and the ability to override twig templates. It’s not that hard to break contrib modules.
It’s just a way of debugging.
Yes.. now that you put it that way, I see what you mean. Ok I will test those different options and see happens. Thank you!
All works up until clicking on an event to display the method in phpstorm. Using d8.3.5 ~ phpstorm 2017.1.4 ~ Win10. In the recent log messages I get messages similar to “http://localhost:8080/profiler/58bc9e” page not found. Also I have to go into devel > devel settings to get the tool bar to appear. Also will not pick up the code for a form. Nice toy but the good stuff does not work.
Hi James,
Are you getting any PHP errors or JavaScript errors?
Also, look in the devel issue (https://www.drupal.org/project/devel) to see if others have had the same problems.
Cheers,
Ivan
Thanks for getting back Ivan.
A new warning message is now showing up saying >> Missing proxy class ‘DrupalwebprofilerProxyClassCommandListCommand’ for lazy service ‘webprofiler.list’. Use the following command to generate the proxy class: php core/scripts/generate-proxy-class.php
generate-proxy-class.php needs two parameters the and
I tried… php web/core/scripts/generate-proxy-class.php GenerateProxyClassCommand, webcorelibDrupalCoreCommand
with no effect. Still can not get methods to show up in PhpStorm. I have determined that the “page not found” messages are the result of having to keep regenerating the toolbar.
A previous install of WebProfiler trashed a sandbox beyond recovery so just a heads up to others… do a complete backup right before messing with this module.
Enjoy your tutorials ~ Keep up the great work ~ A valuable learning resource!
Thanks,
Jim.
Don.’t know why the parameter names dropped out of the previous post(under score)? They are…
class name and namespace root path.
After install devel + webprofiler we get some errors,
https://www.drupal.org/forum/support/post-installation/2018-03-09/drupal-site-trashed-after-installing-devel-module#comment-12858664