WEBVTT NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com 00:00:01.126 --> 00:00:05.586 align:middle Symfony boasts some of the most epic debugging tools of all the Internet. 00:00:05.946 --> 00:00:10.406 align:middle But because Symfony apps start so small, we don't even have them installed yet. 00:00:10.746 --> 00:00:11.906 align:middle Time to fix that. 00:00:12.316 --> 00:00:16.036 align:middle Head over to your terminal and, like before, commit all of your changes 00:00:16.036 --> 00:00:18.466 align:middle so we can check out what the recipes will do. 00:00:18.866 --> 00:00:19.966 align:middle I already did that. 00:00:20.576 --> 00:00:25.666 align:middle Then run: composer require debug Yup! 00:00:25.666 --> 00:00:27.306 align:middle That's another Flex alias. 00:00:27.646 --> 00:00:30.106 align:middle And... it installs a pack. 00:00:30.566 --> 00:00:36.266 align:middle This installs four different packages that add a variety of debugging goodness to our project. 00:00:36.926 --> 00:00:39.016 align:middle Spin over and open composer.json. 00:00:39.886 --> 00:00:44.886 align:middle Ok, the pack added one new line under the require key for monolog-bundle. 00:00:45.366 --> 00:00:47.336 align:middle Monolog is a logging library. 00:00:47.956 --> 00:00:53.236 align:middle Then all the way at the bottom, it added three packages to a require-dev section. 00:00:53.826 --> 00:00:56.136 align:middle These are known as dev dependencies... 00:00:56.246 --> 00:00:59.156 align:middle which means they won't be downloaded when you deploy to production. 00:00:59.536 --> 00:01:03.126 align:middle But otherwise, they work the same as packages under the require key. 00:01:03.676 --> 00:01:06.806 align:middle All three of these help power something called the profiler. 00:01:07.116 --> 00:01:09.106 align:middle We'll see that in just a minute. 00:01:09.736 --> 00:01:14.836 align:middle Before we do, go back to your terminal and run git status so we can see what the recipes did. 00:01:16.296 --> 00:01:20.146 align:middle Ok: it updated the normal files, enabled a few new bundles 00:01:20.226 --> 00:01:23.736 align:middle and gave us three new configuration files for those bundles. 00:01:24.326 --> 00:01:27.066 align:middle What's the end result of all this new stuff? 00:01:27.566 --> 00:01:30.526 align:middle Well, first, we now have a logging library. 00:01:30.976 --> 00:01:35.426 align:middle So, like magic, logs will start popping into a var/log/ directory. 00:01:35.946 --> 00:01:39.796 align:middle But the mind-blowing moment happens when we refresh the page. 00:01:40.146 --> 00:01:46.026 align:middle Woh! A beautiful new black bar at the bottom called the web debug toolbar. 00:01:46.446 --> 00:01:48.366 align:middle This is bursting with info. 00:01:48.806 --> 00:01:51.976 align:middle Over here, we can see the route and controller for this page. 00:01:52.256 --> 00:01:57.106 align:middle That it makes it easy to go to any page on your site - maybe one you didn't even build - 00:01:57.336 --> 00:01:59.106 align:middle and quickly find the code behind it. 00:01:59.566 --> 00:02:03.626 align:middle We can also see how long this page took the load, how much memory it used, 00:02:03.626 --> 00:02:07.386 align:middle and even the twig template that was rendered and how long that took. 00:02:08.136 --> 00:02:11.886 align:middle But the real magic of the web debug toolbar happens when you click any 00:02:11.886 --> 00:02:15.436 align:middle of these links: you hop into the profiler. 00:02:15.856 --> 00:02:20.096 align:middle This has ten times more info: details about the request and response, 00:02:20.256 --> 00:02:23.506 align:middle logs that occurred while loading that page, routing details, 00:02:23.636 --> 00:02:26.376 align:middle and even stats about which Twig templates were rendered. 00:02:26.856 --> 00:02:31.876 align:middle Apparently six templates were rendering: our main one, the base layout and a few others 00:02:31.876 --> 00:02:36.416 align:middle that power the web debug toolbar, which, by the way, won't be rendered 00:02:36.416 --> 00:02:38.616 align:middle or shown when we deploy to production. 00:02:38.616 --> 00:02:41.066 align:middle But we'll talk about that in the next tutorial. 00:02:41.586 --> 00:02:45.476 align:middle Then there's probably my favorite section: Performance. 00:02:46.056 --> 00:02:49.906 align:middle This slices our entire page load time into different pieces. 00:02:50.256 --> 00:02:51.466 align:middle I love this. 00:02:51.956 --> 00:02:56.636 align:middle As you learn more about Symfony, you'll get more familiar with what these different pieces are. 00:02:57.256 --> 00:03:01.546 align:middle This section is useful for knowing which part of your code might be slowing down the page... 00:03:01.656 --> 00:03:05.816 align:middle but it's also a fantastic way to dive deeper into Symfony 00:03:05.996 --> 00:03:08.376 align:middle and understand all its moving pieces. 00:03:09.096 --> 00:03:12.066 align:middle We're going to use the profiler throughout this series, 00:03:12.226 --> 00:03:14.426 align:middle but let's turn to another debugging tool: 00:03:14.746 --> 00:03:17.466 align:middle one that's been installed in our app this whole time! 00:03:17.966 --> 00:03:21.936 align:middle Head over to the command line and run: php bin/console Or, 00:03:21.936 --> 00:03:24.236 align:middle on most machines, you can just say . 00:03:24.236 --> 00:03:24.986 align:middle /bin/console. 00:03:25.586 --> 00:03:30.966 align:middle This is Symfony's console, and it's packed with commands that can do all sorts of stuff! 00:03:31.286 --> 00:03:32.756 align:middle We'll learn about them along the way. 00:03:33.316 --> 00:03:36.806 align:middle You can also add your own commands, which we'll do at the end of the tutorial. 00:03:37.656 --> 00:03:41.806 align:middle Notice that a bunch of these start with debug - like debug:router. 00:03:42.236 --> 00:03:46.506 align:middle Try that: php bin/console debug:router Cool! 00:03:46.986 --> 00:03:52.046 align:middle This shows us every route in our app: the homepage route at the bottom and a bunch 00:03:52.046 --> 00:03:54.866 align:middle of routes added by Symfony in the dev environment 00:03:55.056 --> 00:03:57.466 align:middle that power the web debug toolbar and profiler. 00:03:58.126 --> 00:04:02.936 align:middle Another command is debug:twig: This tells us every Twig function, 00:04:03.006 --> 00:04:06.036 align:middle filter or other thing that exists in our app. 00:04:07.066 --> 00:04:08.986 align:middle This is like the Twig docs... 00:04:09.196 --> 00:04:13.346 align:middle except it also includes extra functions and filters that are added to Twig 00:04:13.346 --> 00:04:15.136 align:middle by bundles that we have installed. 00:04:15.456 --> 00:04:16.426 align:middle Pretty cool. 00:04:17.096 --> 00:04:21.236 align:middle These debug commands are super useful, and we'll keep trying more of them along the way. 00:04:21.966 --> 00:04:25.056 align:middle Next, let's create our first API endpoint and learn 00:04:25.056 --> 00:04:27.546 align:middle about Symfony's powerful serializer component.