We use cookies on this site to enhance your user experience. By clicking "OK, I Agree" or using our site, you consent to the use of cookies unless you have disabled them. View our cookie policy to learn more.
OK, I AGREE
TRACK

Drupal 8 >

COURSE

Drupal 8: Under the Hood

Buy Access to Course

The webprofiler

Keep on Learning!

If you liked what you've learned so far, dive in!
Subscribe to get access to this tutorial plus
video, code and script downloads.

Start your All-Access Pass
Buy just this tutorial for $12.00
Previous Chapter

Next Chapter
Edit on Github

Google for "Drupal Devel": it will lead you to a project on Drupal.org that has some nice tools in it. What we're after is the webprofiler module. Copy the installation link address so we can install it! In the future, you should be able to install modules via Composer. More on that later.

For now, click install new module, paste the URL, press the install button and wait with great anticipation! When it finishes, follow the enable newly added modules link. I'm only interested in the web profiler. Check its box and press the install button. It'll also ask me to install the devel, module which is fine. Hit continue... and watch closely.

The Web Debug Toolbar

On the very next request a really cool web debug toolbar pops up at the bottom. This is the oracle of information about the request that was just executed - in this case - a request to this admin page. It shows us tons of stuff like database queries, who is authenticated, stats about the configuration, the css and js that's being loaded, the route and controller that's being used for this page and - somewhere in there - I'm pretty sure it knows where my car keys are.

Before you go crazy with this, go back down on this page to the webprofiler. Expand it and click "Configure". Here, you can see that there's even more information that you can display if you want to. Check the boxes for Events, Routing and Services and then press the "Save configuration" button.

The Profiler

Ooo look: a few new things on the toolbar. If you click any icon, you'll go to a new page called the profiler. It turns out that the web debug toolbar was just a short summary of the information about the last request. The profiler has tons more.

If you want to see all of the routes, click the Routing tab. This is the same list that the Drupal console showed us.

There are lots of other treats in here: it's like a Drupal Halloween! For example, Performance Timing checks how fast the frontend of your site is rendering. The timeline is probably my favorite... and for some reason it's broken in this version. Wah wah. It normally shows you this great graph of how long it takes each part of Drupal to execute. It's great for profiling, but also great to see what all the magic layers of Drupal are.

If you follow the documentation for the webprofiler, you also need to install a couple of JavaScript libraries to help the profiler do its job. But it seems to work pretty well without them, so I skipped that part to save us time.

Reverse Engineering an Admin Page

Now that we have this, click on the admin "Structure" page. Obviously, this page comes from Drupal. But how does it work? Go down to the toolbar and hover over the 200 status code. Ha! This tells us exactly what controller renders this page:

Drupal\System\Controller\SystemController::systemAdminMenuBlockPage()

If you see the D\s\C stuff, that stands for Drupal\System\Controller. The web profiler tries to shorten things: just Hover over this syntax to see the full class name.

If you wanted to reverse engineer this page, you could! I'll use the keyboard shortcut shift+shift to search the project for SystemController. Here's the class! Now, look around for the method systemAdminMenuBlockPage(). And this is the actual function that renders the admin "Structure" page:

345 lines core/modules/system/src/Controller/SystemController.php
... lines 1 - 24
class SystemController extends ControllerBase {
... lines 26 - 184
/**
* Provides a single block from the administration menu as a page.
*/
public function systemAdminMenuBlockPage() {
return $this->systemManager->getBlockContents();
}
... lines 191 - 343
}

In fact, if you add return new Response('HI!') and refresh, it'll completely replace the page! Try this and see if your co-workers can figure out what's going on!

We don't know yet what this systemManager thing is or how to debug it, but we're going there next.

I just think it's really cool that we can see exactly what's going on in the page, dive into the core code and find out how things work.

Leave a comment!

  • 2018-06-25 Victor Bocharsky

    Hey deskema ,

    Glad you got it working! Hm, probably a temporary issue, or you need to upgrade stopwatch / opcache to the latest version.

    Thanks for sharing your solution with others!

    Cheers!

  • 2018-06-22 deskema

    Hi Victor Bocharsky
    Thank you for your kind feedback.
    I don't know actually if this problem is somehow correlated to the Zend Opcache extension.
    I checked the list of module reported issues on https://www.drupal.org/proj... and, somehow, the "Stopwatch is incompatible with OPCache" made me ring a bell.
    I made a test by disabling opcache extension on my environment, after that, going back to my drupal instance and reloading the pages... voilà, the toolbar is there!!
    Still bit weird by my opinion. But it works!

  • 2018-06-22 Victor Bocharsky

    Hey deskema,

    Hm, weird... Do you have HTTP cache on the pages where you do not see the web profiler? Btw, could you double check you have a valid HTML structure in the source code, i.e. you have opening/closing html and body tags? You may probably try to validate your HTML with this validator: https://validator.w3.org/ . And try to "tail -f" your logs when load the page, probably you'll find some errors in logs.

    Cheers!

  • 2018-06-21 deskema

    Hi Ryan,
    I'm currently experiencing an issue with Web Profiler.
    I have a fresh D8 instance ( Version 8.5.4 ) with the latest version of Devel plus libraries (D3 and Highlights).

    The problem is quite weird...
    The Profiler bar is visible only on /admin/modules/ page and sometimes appear/disappear in other sections..

    example: admin/structure, front page..
    I checked browser console.. No errors :-/

    Soooo weird.

    Have you ever seen something like that?

  • 2017-07-12 weaverryan

    Thanks for sharing! I've had increasingly good success installing contrib modules via Composer :) :)

  • 2017-07-11 alar

    I was able to install and configure webprofiler via composer. The instructions are available in the webprofiler readme.md that I downloaded and enabled using drush. Drush did not get this working by itself.

    ## Install using Composer (recommended)

    If you use Composer to manage dependencies, edit /composer.json as follows.

    1\. Run composer require --prefer-dist composer/installers to ensure that you have the composer/installers package installed. This package facilitates the installation of packages into directories other than /vendor (e.g. /libraries) using Composer.

    2\. Add the following to the "installer-paths" section of composer.json:


    "libraries/{$name}": ["type:drupal-library"],

    3\. Add the following to the "repositories" section of composer.json:


    "d3": {
        "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"
            }
        }
    },
    "highlightjs": {
        "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"
            }
        }
    }

    4\. Run composer require --prefer-dist d3/d3:3.5.* components/highlightjs:9.7.* - you should find that new directories have been created
    under /libraries

  • 2016-02-21 Hans Nieuwenhuis

    Hi, Did You ever find out why the timeline in the webprofiler is not working ?
    I just installed a new site with drupal 8.0.3 and the latest version of the devel module, but it is still not working....

    Ahh, just found the solution, you have to add the next two lines to settings.php ( as stated in the readme.md of the webprofiler )

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

  • 2015-12-08 weaverryan

    Good tip! This setting is in the Webprofiler's settings: http://imgur.com/Lk7wZgN

    Thanks!

Edit on Github
Previous Chapter
Next Chapter