Symfony 4: Web Debug Toolbar and the Profiler!

Video loading...

  • 0:03
    Symfony 4: Web Debug Toolbar and the Profiler! with Ryan Weaver
  • 0:07
    Make sure you’ve committed all of your changes.
  • 0:10
    I already did.
  • 0:11
    Because we’re about to install something super fun.
  • 0:15
    Like, “floating around space” fun!
  • 0:19
    Run composer require profiler- - dev.
  • 0:24
    The Profiler, also called the web debug toolbar,
  • 0:28
    is probably the most awesome thing in Symfony.
  • 0:32
    This installs a few packages and 1 recipe.
  • 0:37
    Run git status.
  • 0:39
    OK, cool!
  • 0:40
    It added a couple of configuration files,
  • 0:43
    and even some routes in the dev environment
  • 0:46
    only that help the Profiler work.
  • 0:49
    So, what the heck is the Profiler?
  • 0:53
    Go back to your browser,
  • 0:54
    make sure you’re on the article show page,
  • 0:56
    and refresh.
  • 0:58
    Voila!
  • 0:59
    See that slick black bar at the bottom of the page?
  • 1:02
    That’s the web debug toolbar!
  • 1:06
    It’s now automatically injected
  • 1:08
    at the bottom of any valid HTML page during development.
  • 1:13
    Yep, this JavaScript code makes an Ajax call that loads it.
  • 1:18
    Oh, and it’s packed with info, like which route was matched,
  • 1:23
    what controller was executed, execution time, cache details,
  • 1:29
    and even information about templates.
  • 1:32
    And as we install more libraries,
  • 1:34
    we’re going to get even more icons.
  • 1:38
    But the really awesome thing is that you can click
  • 1:41
    any of these icons to go into the Profiler!
  • 1:46
    Ooh! This takes us to a totally different page.
  • 1:50
    The Profiler is like the web debug toolbar
  • 1:53
    with a fusion reactor taped onto it.
  • 1:56
    The Twig tab shows exactly which templates were rendered.
  • 2:00
    We can also get detailed info about caching, routing and events,
  • 2:05
    which we’ll talk about in a future tutorial.
  • 2:08
    Oh, and my personal favorite, performance!
  • 2:12
    This shows you how long each part of the request took,
  • 2:16
    including the controller.
  • 2:18
    In another tutorial,
  • 2:19
    we’ll use this to dig into exactly how Symfony works under the hood.
  • 2:25
    When you’re ready to go back to the original page,
  • 2:28
    you can click the link at the top.
  • 2:30
    But wait, there’s more!
  • 2:32
    The profiler also installed Symfony’s Vardumper component!
  • 2:37
    Find ArticleController and go to Show Action.
  • 2:42
    Normally, to debug,
  • 2:44
    I’ll use var_dump to print some data.
  • 2:47
    But no more!
  • 2:48
    Instead, you use dump.
  • 2:51
    Dump the $slug, and also the controller object itself.
  • 2:55
    OK, refresh!
  • 2:58
    Beautiful colored output
  • 3:00
    and you can expand objects to dig deeper into them!
  • 3:10
    The dump function is even more useful in Twig.
  • 3:17
    Inside the body block, add {{ dump }}.
  • 3:23
    In Twig, you’re allowed to use dump with no arguments.
  • 3:28
    And that’s especially useful.
  • 3:30
    Why?
  • 3:32
    Because it dumps an associative array of all of the variables
  • 3:36
    you have access to.
  • 3:38
    We already knew we had title and comments variables,
  • 3:41
    but apparently, we also have an AppVariable.
  • 3:46
    Actually, every template gets this AppVariable automatically.
  • 3:50
    Good to know!
  • 3:52
    But, Symfony has even more debugging tools.
  • 3:56
    Let’s get them and learn about packs next.

Symfony 4: Web Debug Toolbar and the Profiler!

Loading...

In this tutorial, we'll install the Profiler, also known as the Web Debug Toolbar. Let's explore what information and tools the Profiler and Web Debug Toolbar provide.

Symfony has changed the package name for the profiler since this video was recorded.

You can now install the profiler by running: composer require --dev symfony/profiler-pack

And read more about the profiler tool here: https://symfony.com/doc/current/profiler.html

Downloads: 
Log in or sign up to download companion files.

Additional resources:
There are no resources for this video. If you believe there should be, please contact us.