Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

Debug Site Performance Using Web Profiler in Drupal 8

Parent Feed: 


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.

Author: 
Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web