Debug Site Performance Using Web Profiler in Drupal 8


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.

Fig 1.2

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.

Fig 1.2

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.

Fig 1.2

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

Fig 1.2

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

Fig 1.2

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”.

Fig 1.2

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”.

Fig 1.2

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.

Fig 1.2

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:[email protected]&[email protected] into “IDE link”.

Fig 1.2

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'] = '\Drupal\webprofiler\DependencyInjection\TraceableContainer';

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.

About the Author

Ivan is the founder of Web Wash and spends most of his time consulting and writing about Drupal. He's been working with Drupal for 10 years and has successfully completed several large Drupal projects in Australia.

Leave a Reply 6 comments

Said - June 27, 2016 Reply

I think this module unsupported

Webprofiler has been merged with Devel!! All the development will continue in the Devel issue queue. Thanks to all the people who have used Webprofiler in these years .

Thank u,

    Ivan Zugec - June 27, 2016 Reply

    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.

      fazni - June 27, 2016 Reply

      Thank you for your reply,
      Noted ;).

Dan Morrison - July 24, 2016 Reply

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.

    Ivan Zugec - July 25, 2016 Reply

    Thanks for the tip.

Peter - September 10, 2016 Reply

Very well presentation. 🙂

Leave a Reply: