In this short presentation, Disha Bhadra of Valuebound has discussed how to integrate web profiler in Drupal 8 to debug site performance.

1. Web Profiler in Drupal 8
Disha Bhadra
https://www.drupal.org/u/dishabhadra

2. INTRODUCTION
★ Profiling Drupal
★ Web Profiler
★ Web Profiler with Drupal 8
★ Installing Libraries
★ IDE Integration

3. What is Profiling Drupal
● In the beginning of any Drupal project the site loads very quickly because there aren’t
many modules installed. But as you keep adding modules, the performance of the site
degrades.
● Profiling your site is extremely useful not only for debugging and performance testing
but also for learning about how your site handles requests.
● 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.

4. What is Web Profiler
● Web profiler is a bundle of symfony and in drupal 8 we are using symfony
component.
● Web profiler is a module in Drupal 8.
● Using the Web Profiler, you can profile any Drupal 8 page, which will analyze the
performance and the internal structure of a website/page.

5. Web Profiler with Drupal 8
● Web profiler is a sub module of Devel module.
● The module will render a fixed bar at the bottom of each page for users.
● This module also provide permission for each role - The View webprofiler toolbar
permission.

6. ● This module provides the configuration page (Go to Configuration ->
development -> Devel settings -> Web profiler) where you can do
configuration related to toolbar items, IDE settings.
● By clicking on any of the items from toolbar, you will be taken to the full
profiler output.

7. Installing Libraries
● Web profiler needs two javascript libraries:
○ Highlight.js
○ D3.js
● This libraries are optional, without installing libraries web profiler will
work in drupal 8.

8. Highlight.js
● Highlight.js is used to highlight the syntax of queries.
● Create /libraries/highlightjs/ directory inside your Drupal root
directory
● You can download the library from http://highlightjs.org and copy js
and styles folder from downloaded folder and place in
/libraries/highlightjs.

9. D3.js
● D3.js is used when viewing the timeline page.
● You can download the library from
https://github.com/d3/d3/archive/v3.5.17.zip and place in
/libraries/d3.
● Webprofiler module requires D3 library 3.x (not 4.x) to render data.

10. 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.
● This two lines will be also available in /devel/webprofiler/README.md.
$class_loader->addPsr4('Drupalwebprofiler', [ __DIR__ .
'/../../modules/contrib/devel/webprofiler/src']);
$settings['container_base_class'] =
'DrupalwebprofilerDependencyInjectionTraceableContainer';
● Be aware that the code above assumes you’ll add the devel module at
/modules/contrib/devel.

11. Timeline

12. IDE Integration
Each class name discovered while profiling (controller class, event class) is
specially linked to open the class in an IDE. You can configure the URLs for
these links to work for your IDE.
● Textmate
Use txmt://open?url=file://@fileline=@line
● PhpStorm 8+
Use phpstorm://open?file=@fileline=@line