WEBVTT NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com 00:00:01.176 --> 00:00:03.606 align:middle Time to install our second package. 00:00:03.906 --> 00:00:05.686 align:middle And this one is fun. 00:00:06.206 --> 00:00:11.266 align:middle Let's commit our changes first: it'll makes it easier to check out any changes 00:00:11.416 --> 00:00:14.126 align:middle that the new package's recipe makes. 00:00:15.006 --> 00:00:21.016 align:middle Add everything: That looks fine so... 00:00:21.096 --> 00:00:24.966 align:middle commit: Beautiful. 00:00:25.526 --> 00:00:34.686 align:middle Now run: composer require debug So yes, this is another Flex alias... 00:00:35.116 --> 00:00:39.976 align:middle and apparently it's an alias for symfony/debug-pack. 00:00:40.536 --> 00:00:44.876 align:middle And we know that a pack is a collection of packages. 00:00:45.356 --> 00:00:50.996 align:middle So instead of adding this one line to our composer.json file, if we check, 00:00:51.156 --> 00:00:55.476 align:middle it looks like it added one new package up under the require section - 00:00:55.696 --> 00:00:58.736 align:middle this is a logging library - and... 00:00:58.896 --> 00:01:05.796 align:middle all the way at the bottom, it added a new require-dev section with three other libraries. 00:01:06.566 --> 00:01:11.646 align:middle The difference between require and require-dev isn't too important: 00:01:11.936 --> 00:01:17.636 align:middle all of these packages were downloaded into our app, But as a best practice, 00:01:17.956 --> 00:01:22.466 align:middle if you install a library that's only meant for local development, 00:01:22.756 --> 00:01:24.766 align:middle you should put it into require-dev. 00:01:25.446 --> 00:01:27.396 align:middle The pack did that for us! 00:01:27.646 --> 00:01:28.406 align:middle Thanks pack! 00:01:29.346 --> 00:01:33.946 align:middle Back at the terminal, this also installed three recipes! 00:01:33.946 --> 00:01:36.986 align:middle Ooh. Let's see what those did. 00:01:37.286 --> 00:01:42.846 align:middle I'll clear the screen and run: git status So this is familiar: 00:01:43.206 --> 00:01:48.606 align:middle it modified config/bundles.php to activate three new bundles. 00:01:49.016 --> 00:01:54.426 align:middle Again, bundles are Symfony plugins, which add more features to our app. 00:01:55.096 --> 00:02:00.186 align:middle It also added several configuration files to the config/packages/ directory. 00:02:00.776 --> 00:02:05.636 align:middle We will talk more about these files in the next tutorial, but, on a high level, 00:02:05.826 --> 00:02:08.866 align:middle they control the behavior of those bundles. 00:02:09.726 --> 00:02:12.466 align:middle So what did these new bundles give us? 00:02:12.876 --> 00:02:17.096 align:middle To find out, head over to your browser and refresh the homepage. 00:02:18.026 --> 00:02:19.746 align:middle Holy cats, Batman! 00:02:20.106 --> 00:02:22.336 align:middle It's the web debug toolbar. 00:02:22.886 --> 00:02:27.706 align:middle This is debugging madness: a toolbar full of good info. 00:02:28.206 --> 00:02:33.956 align:middle On the left, you can see the controller that was called along with the HTTP status code. 00:02:34.616 --> 00:02:38.846 align:middle There's also the amount of time the page took, the memory it used 00:02:39.086 --> 00:02:45.526 align:middle and also how many templates were rendered through Twig: this is the cute Twig icon. 00:02:46.256 --> 00:02:48.056 align:middle On the right side, we have details 00:02:48.056 --> 00:02:51.696 align:middle about the Symfony local web server that's running and PHP info. 00:02:53.006 --> 00:02:59.966 align:middle But you haven't seen the best part: click any of these icons to jump into the profiler. 00:03:00.846 --> 00:03:02.956 align:middle This is the web debug toolbar... 00:03:03.196 --> 00:03:04.186 align:middle gone crazy. 00:03:04.636 --> 00:03:11.116 align:middle It's full of data about that request, like the request and response, all of the log messages 00:03:11.116 --> 00:03:17.706 align:middle that happened during that request, information about the routes and the route that was matched, 00:03:17.996 --> 00:03:22.786 align:middle Twig shows you which templates were rendered and how many times they were rendered... 00:03:23.406 --> 00:03:26.636 align:middle and there's configuration information down here. 00:03:26.936 --> 00:03:31.866 align:middle Phew! But my most favorite section is Performance. 00:03:32.546 --> 00:03:36.556 align:middle This shows a timeline of everything that happened during the request. 00:03:37.146 --> 00:03:39.186 align:middle This is great for two reasons. 00:03:39.726 --> 00:03:44.766 align:middle The first is pretty obvious: you can use this to find which parts of your page are slow. 00:03:45.246 --> 00:03:49.586 align:middle So, for example, our controller took 20.4 millisecond. 00:03:49.926 --> 00:03:56.276 align:middle And within the controller's execution, the homepage template rendered in 3.9 milliseconds 00:03:56.396 --> 00:04:00.716 align:middle and base.html.twig rendered in 2.8 milliseconds. 00:04:01.566 --> 00:04:07.496 align:middle The second reason this is really cool is that it uncovers all the hidden layers of Symfony. 00:04:08.526 --> 00:04:10.576 align:middle Set this threshold down to zero. 00:04:11.936 --> 00:04:17.196 align:middle Previously, this only displayed things that took more than one millisecond. 00:04:17.566 --> 00:04:19.916 align:middle Now it's showing everything. 00:04:20.506 --> 00:04:25.886 align:middle You don't need to worry about the vast majority of the stuff, but it's super cool 00:04:25.886 --> 00:04:30.086 align:middle to see the layers of Symfony: the things that happen before 00:04:30.086 --> 00:04:32.926 align:middle and after your controller is executed. 00:04:33.886 --> 00:04:39.636 align:middle We have a deep dive tutorial for Symfony if you want to learn more about this stuff. 00:04:39.706 --> 00:04:43.636 align:middle The web debug toolbar and profiler will also grow with our app. 00:04:44.176 --> 00:04:48.856 align:middle In a future tutorial, when we install a library to talk to the database, 00:04:49.306 --> 00:04:54.376 align:middle we will suddenly have a new section that lists all of the database queries 00:04:54.376 --> 00:04:57.536 align:middle that a page made and how long each took. 00:04:58.906 --> 00:05:02.566 align:middle Ok, so the debug pack installed the web debug toolbar. 00:05:03.016 --> 00:05:07.146 align:middle It also installed a logging library that we'll use later. 00:05:07.526 --> 00:05:13.116 align:middle And it installed a package that gives us two fantastic debug functions. 00:05:14.306 --> 00:05:15.896 align:middle Head over to VinylController. 00:05:17.156 --> 00:05:20.206 align:middle Pretend that we're doing some developing and we need 00:05:20.206 --> 00:05:22.976 align:middle to see what this $tracks variable looks like. 00:05:23.426 --> 00:05:27.156 align:middle It's pretty obvious in this case, but sometimes you'll want 00:05:27.156 --> 00:05:30.326 align:middle to see what's inside a complex object. 00:05:31.356 --> 00:05:37.206 align:middle To do that, say dd($tracks) where "dd" stands for dump and die. 00:05:37.506 --> 00:05:39.896 align:middle So if we refresh... 00:05:40.886 --> 00:05:44.176 align:middle yup! That dumps the variable and kills the page. 00:05:44.716 --> 00:05:49.766 align:middle And this is a lot more powerful - and prettier - than using var_dump(): 00:05:50.466 --> 00:05:54.506 align:middle we can expand sections and see deep data really easily. 00:05:54.506 --> 00:05:58.256 align:middle Instead of dd(), you can also use dump().. 00:05:58.776 --> 00:06:00.576 align:middle to dump and live. 00:06:01.456 --> 00:06:04.286 align:middle But this might not show up where you expect it to. 00:06:04.886 --> 00:06:06.746 align:middle Instead of printing in the middle of the page, 00:06:07.216 --> 00:06:11.756 align:middle it shows up down in the web debug toolbar, under the target icon. 00:06:12.476 --> 00:06:17.266 align:middle If that's a bit too small, click to see a bigger version in the profiler. 00:06:18.716 --> 00:06:21.046 align:middle You can also use this dump() in Twig. 00:06:22.016 --> 00:06:23.406 align:middle Remove the dump from the controller... 00:06:23.866 --> 00:06:28.776 align:middle and then in the template, right before the ul, dump(tracks). 00:06:31.136 --> 00:06:32.116 align:middle And this... 00:06:32.466 --> 00:06:34.256 align:middle looks exactly the same. 00:06:34.596 --> 00:06:39.986 align:middle Except that when you dump in Twig, it does dump right into the middle of the page 00:06:41.006 --> 00:06:47.506 align:middle And even more useful, in Twig only, you can use dump() with no arguments. 00:06:47.976 --> 00:06:51.116 align:middle This will dump all variables that we have access to. 00:06:51.836 --> 00:06:55.966 align:middle So here's the title variable, tracks and, surprise! 00:06:56.156 --> 00:06:58.956 align:middle There's a third variable called app. 00:06:59.446 --> 00:07:03.296 align:middle This is a global variable that we have in all templates... 00:07:03.456 --> 00:07:07.366 align:middle and it gives us access to things like the session and user data. 00:07:07.856 --> 00:07:11.536 align:middle And... we just discovered it by being curious! 00:07:12.166 --> 00:07:17.706 align:middle So now that we've got these awesome debugging tools, let's turn to our next job... 00:07:18.166 --> 00:07:21.046 align:middle which is to make this site less ugly. 00:07:21.676 --> 00:07:28.026 align:middle Time to add CSS and a proper layout to bring our site to life!