Installing the Drupal 8 webprofiler devel submodule correctly

Category: 
Last modified: 
Saturday, July 1, 2017 - 19:04
Author: 
Dan Eveland
Dan Eveland's picture

Dan: My name is Dan, and I have a Status Page problem.

Group: Hi Dan

Since starting with Drupal in 2008 I have always been a bit of a nut about getting things as perfect as possible. For example, I like my /admin/reports/status pages to be perfect. I also like to examine page loads and look for potential bottlenecks that increase page load time. And in the case of Drupal 8, I really like to have Composer handle all my installations, putting even libraries in their correct home.

To my horror, I discovered that the devel module uses two libraries, and the readme file was actually not completely helpful in how to have composer install the libraries and get the Timeline feature to work.

After digging on drupal.org, a less than ideally-organized haystack with the occasional needle, the answer was discovered. These answers are what I want to share here.

First, get the module installed:

composer require drupal/devel

Secondly, tell composer to install the composer installer:

composer require --prefer-dist composer/installers

You can read more about this here:

https://github.com/composer/installers

But in summary, this is for PHP package authors to require in their composer.json. It will install their package to the correct location based on the specified package type. It has support for the various Drupal paths we all know and love:

drupal-core
drupal-module
drupal-theme
drupal-library
drupal-profile
drupal-drush

Then, modify your composer.json for the project. I am still fairly new at composer, but not at JSON, so it's not so bad. However, I appreciate examples of someone's complete changes, so here is mine:

My "installer-paths" section:

    "extra": {
        "installer-paths": {
            "web/core": ["type:drupal-core"],
            "web/libraries/{$name}": ["type:drupal-library"],
            "web/modules/contrib/{$name}": ["type:drupal-module"],
            "web/profiles/contrib/{$name}": ["type:drupal-profile"],
            "web/themes/contrib/{$name}": ["type:drupal-theme"],
            "drush/contrib/{$name}": ["type:drupal-drush"],
            "libraries/{$name}": ["type:drupal-library"]
        }

This tells composer to push certain items into your libraries directory. You can tell this works when the libraries go into the right place, and if you have not installed any other libraries, the library directory won't exist there until you install something using this installer path.

Next, we need to add some repositories. In this case, do NOT follow the readme. It never worked for me or anyone else I have spoken to about this. Instead, here is my complete repositories section you can review and hopefully gain insight from:

    "repositories": [
        {
            "type": "composer",
            "url": "https://packages.drupal.org/8"
        },
        {
            "type": "package",
            "package": {
            "name": "d3/d3",
            "version": "v3.5.17",
            "type": "drupal-library",
            "dist": {
              "url": "https://github.com/d3/d3/archive/v3.5.17.zip",
              "type": "zip"
            }
        }
        },
        {
            "type": "package",
            "package": {
                "name": "components/highlightjs",
                "version": "9.7.0",
                "type": "drupal-library",
                "dist": {
                  "url": "https://github.com/components/highlightjs/archive/9.7.0.zip",
                  "type": "zip"
            }
        }
        }
    ],

​​​​​​​This adds two libraries to the right place. D3: Data-Driven Documents https://github.com/d3/d3 and Highlight.js  https://github.com/isagalaev/highlight.js/

Note the version of d3. If you stick the latest version of this library in there, it won't work. At all.

There were some extra bits in the readme that actually created malformed JSON. And, in case it's not obvious, composer.json needs to be proper JSON. LOL

Finally, two items need to be added to your settings.php or your settings.local.php. This is very important.

$class_loader->addPsr4('Drupal\\webprofiler\\', [ __DIR__ . '/../../modules/contrib/devel/webprofiler/src']);
$settings['container_base_class'] = '\Drupal\webprofiler\DependencyInjection\TraceableContainer';

By following these instructions, you should be able to see SQL syntax highlighting (the highlightjs library) and see a very detailed timeline (the d3 library).

Enjoy!