WEBVTT NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com 00:00:01.086 --> 00:00:05.106 align:middle We're making some pretty serious progress - you should be proud! 00:00:05.726 --> 00:00:15.156 align:middle Let's check out what files we've modified: Add everything: And commit: Because now I want 00:00:15.156 --> 00:00:19.246 align:middle to install one of my absolute favorite tools in Symfony. 00:00:19.876 --> 00:00:24.746 align:middle Run: composer require profiler -- dev I'm using -- 00:00:24.836 --> 00:00:27.586 align:middle dev because the profiler is a tool 00:00:27.586 --> 00:00:32.156 align:middle that we'll only need while we're developing: it won't be used on production. 00:00:32.606 --> 00:00:37.176 align:middle This means Composer adds it to the require-dev section of composer.json. 00:00:37.176 --> 00:00:41.956 align:middle This isn't that important, but this is the right way to do it. 00:00:41.956 --> 00:00:47.776 align:middle And... at this point, it should be no surprise that this configured a recipe! 00:00:48.416 --> 00:00:51.076 align:middle Run: git status Oh, wow! 00:00:51.586 --> 00:00:53.396 align:middle It added three config files. 00:00:53.966 --> 00:00:56.986 align:middle Thanks to these, the feature will work instantly. 00:00:57.596 --> 00:01:00.526 align:middle Try it: back at your browser, refresh the page. 00:01:01.206 --> 00:01:03.766 align:middle Hello web debug toolbar! 00:01:04.236 --> 00:01:06.496 align:middle The fancy little black bar on the bottom. 00:01:07.106 --> 00:01:11.316 align:middle This will now show up on every HTML page while we're developing. 00:01:11.806 --> 00:01:18.556 align:middle It tells us the status code, which controller and route were used, speed, memory, Twig calls 00:01:18.626 --> 00:01:23.406 align:middle and even more icons will show up as we start using more parts of Symfony. 00:01:23.406 --> 00:01:27.146 align:middle The best part is that you can click any of these icons to jump into... 00:01:27.446 --> 00:01:28.546 align:middle the profiler. 00:01:29.266 --> 00:01:35.516 align:middle This is basically the expanded version of the toolbar and it is packed with information 00:01:35.516 --> 00:01:40.086 align:middle about that page load, including request info, response info 00:01:40.626 --> 00:01:43.316 align:middle and even a super-cool performance tab. 00:01:43.516 --> 00:01:46.996 align:middle This is not only a nice way to debug the performance 00:01:46.996 --> 00:01:49.596 align:middle of your app, it's also a great way to... 00:01:49.996 --> 00:01:53.056 align:middle just understand what's going on inside Symfony. 00:01:54.416 --> 00:01:56.906 align:middle There are other sections for Twig, configuration, 00:01:57.056 --> 00:02:02.126 align:middle caching and eventually there will be a tab to debug database queries. 00:02:02.886 --> 00:02:08.716 align:middle By the way, this isn't just for HTML pages: you can also access the profiler 00:02:08.716 --> 00:02:11.426 align:middle for AJAX calls that you make to your app. 00:02:11.866 --> 00:02:13.246 align:middle I'll show you how later. 00:02:13.806 --> 00:02:17.686 align:middle When we installed the profiler, we also got one other handy tool called dump(). 00:02:18.266 --> 00:02:20.496 align:middle I'll click back a few times to get to the page. 00:02:21.046 --> 00:02:25.856 align:middle Open up the controller: src/Controller/QuestionController.php. 00:02:25.856 --> 00:02:28.176 align:middle Imagine we want to debug a variable. 00:02:28.486 --> 00:02:30.366 align:middle Normally I'd use var_dump(). 00:02:30.876 --> 00:02:35.806 align:middle Instead, use dump() and let's dump the $slug and... 00:02:35.926 --> 00:02:38.936 align:middle how about $this object itself. 00:02:38.936 --> 00:02:41.586 align:middle When we refresh, woh! 00:02:42.146 --> 00:02:45.046 align:middle It works exactly like var_dump() except... 00:02:45.046 --> 00:02:47.366 align:middle way more beautiful and useful. 00:02:48.086 --> 00:02:51.186 align:middle The controller apparently has a container property... 00:02:51.336 --> 00:02:53.946 align:middle and we can dig deeper and deeper. 00:02:56.406 --> 00:02:57.976 align:middle If you're really lazy... 00:02:58.176 --> 00:02:59.246 align:middle like most of us are... 00:02:59.666 --> 00:03:03.936 align:middle you can also use dd() which stands for dump() and die(). 00:03:04.696 --> 00:03:05.866 align:middle Now when we reload... 00:03:06.666 --> 00:03:08.706 align:middle it dumps, but also kills the page. 00:03:09.286 --> 00:03:13.076 align:middle We've now perfected dump-and-die-driven development. 00:03:13.076 --> 00:03:14.646 align:middle I think we should be proud? 00:03:15.626 --> 00:03:16.696 align:middle Change that back to dump()... 00:03:16.956 --> 00:03:18.976 align:middle and let's just dump() $this. 00:03:20.146 --> 00:03:23.526 align:middle There's one other library that we can install for debugging tools. 00:03:23.876 --> 00:03:26.326 align:middle This one is less important - but still nice to have. 00:03:26.626 --> 00:03:32.426 align:middle At your terminal, run: composer require debug This time I'm not using -- 00:03:32.616 --> 00:03:36.766 align:middle dev because this will install something that I do want on production. 00:03:37.426 --> 00:03:41.056 align:middle It installs DebugBundle - that's not something we need on production - 00:03:41.056 --> 00:03:44.996 align:middle but also Monolog, which is a logging library. 00:03:45.426 --> 00:03:48.246 align:middle And we probably do want to log things on production. 00:03:48.246 --> 00:03:52.286 align:middle Before we talk about what this gave us, check out the name 00:03:52.286 --> 00:03:55.426 align:middle of the package it installed: debug-pack. 00:03:55.916 --> 00:04:01.376 align:middle This is not the first time that we've installed a library with "pack" in its name. 00:04:01.376 --> 00:04:07.356 align:middle A "pack" is a special concept in Symfony: it's sort of a "fake" package whose only job is 00:04:07.356 --> 00:04:10.106 align:middle to help install several packages at once. 00:04:10.716 --> 00:04:13.966 align:middle Check it out: copy the package name, find your browser, 00:04:14.316 --> 00:04:18.206 align:middle and go to https://github.com/symfony/debug-pack. 00:04:18.926 --> 00:04:22.526 align:middle Woh! It's nothing more than a composer.json file! 00:04:23.076 --> 00:04:27.266 align:middle This gives us an easy way to install just this package... 00:04:27.266 --> 00:04:30.346 align:middle but actually get all of these libraries. 00:04:30.946 --> 00:04:33.906 align:middle So thanks to this, we have two new things in our app. 00:04:33.946 --> 00:04:35.786 align:middle The first is a logger! 00:04:35.786 --> 00:04:37.506 align:middle If we refresh the page... 00:04:37.706 --> 00:04:42.696 align:middle and click into the profiler, we have a "Logs" section 00:04:42.696 --> 00:04:45.346 align:middle that shows us all the logs for that request. 00:04:46.316 --> 00:04:49.726 align:middle These are also being saved to a var/log/dev.log file. 00:04:50.816 --> 00:04:52.656 align:middle The second new thing in our app is... 00:04:52.926 --> 00:04:57.996 align:middle well... if you were watching closely, the dump() is gone from the page! 00:04:58.576 --> 00:05:02.716 align:middle The DebugBundle integrates the dump() function even more into Symfony. 00:05:03.376 --> 00:05:07.266 align:middle Now if you use dump(), instead of printing in the middle of the page, 00:05:07.446 --> 00:05:09.886 align:middle it puts it down here on the web debug toolbar. 00:05:10.376 --> 00:05:12.146 align:middle You can click it to see a bigger version. 00:05:12.696 --> 00:05:14.126 align:middle It's not that important... 00:05:14.126 --> 00:05:19.776 align:middle just another example of how Symfony gets smarter as you install more stuff. 00:05:19.776 --> 00:05:21.066 align:middle Oh, while we're talking about it, 00:05:21.336 --> 00:05:24.976 align:middle the DebugBundle gave us one handle new console command. 00:05:25.456 --> 00:05:30.956 align:middle At your terminal, run: php bin/console server:dump This starts a little server 00:05:30.956 --> 00:05:31.666 align:middle in the background. 00:05:34.436 --> 00:05:39.456 align:middle Now whenever dump() is called in our code, it still shows up on the toolbar... 00:05:40.096 --> 00:05:43.056 align:middle but it also gets dumped out in the terminal! 00:05:43.616 --> 00:05:48.226 align:middle That's a great way to see dumped data for AJAX requests. 00:05:48.276 --> 00:05:50.126 align:middle I'll hit Control-C to stop that. 00:05:51.246 --> 00:05:55.366 align:middle Oh, and about these "packs", if you open your composer.json file, 00:05:55.656 --> 00:06:01.456 align:middle the one problem with packs is that we only have debug-pack version 1.0 here: 00:06:01.906 --> 00:06:05.146 align:middle we can't control the versions of the packages inside. 00:06:05.486 --> 00:06:08.066 align:middle You just get whatever versions the pack allows. 00:06:08.146 --> 00:06:10.986 align:middle If you need more control, no problem... 00:06:11.266 --> 00:06:17.436 align:middle just unpack the pack: composer unpack symfony/debug-pack 00:06:17.876 --> 00:06:23.166 align:middle That does exactly what you expect: it removes debug-pack from composer.json 00:06:23.466 --> 00:06:28.296 align:middle and adds its underlying packages, like debug-bundle and monolog. 00:06:29.276 --> 00:06:32.576 align:middle Oh, and because the profiler-pack is a dependency 00:06:32.576 --> 00:06:35.306 align:middle of the debug-pack, it's in both places. 00:06:35.676 --> 00:06:38.286 align:middle I'll remove the extra one from require. 00:06:39.366 --> 00:06:44.616 align:middle Next, let's make our site prettier by bringing CSS into our app.