---Presenter: Jesse WebbSubject: How to Debug a Directive
Duration: 00:09:05---00:00:05.330 --> 00:00:08.770 - This is how to 00:00:08.770 --> 00:00:15.726 - debug a. Directive on our angular JS implementation of 00:00:15.726 --> 00:00:18.510 - chef 2023. So. 00:00:19.570 --> 00:00:26.629 - Say your task is to figure out on the product details page why 00:00:26.629 --> 00:00:29.344 - there is no quick description 00:00:29.344 --> 00:00:32.760 - here. Now the first thing to 00:00:32.760 --> 00:00:36.384 - check. Is. In your 00:00:36.384 --> 00:00:40.910 - scope inspector. You need to find what's posed to be being 00:00:40.910 --> 00:00:42.150 - displayed here at all. 00:00:42.920 --> 00:00:48.689 - Your your scope inspector and your elements inspector so. 00:00:49.820 --> 00:00:53.219 - There is supposed to be something there. We do it. It 00:00:53.219 --> 00:00:55.073 - looks like there is a a 00:00:55.073 --> 00:00:58.670 - directive we have. The sev product short description 00:00:58.670 --> 00:01:03.335 - directive OK. Oh, it's looks like it's supposed to 00:01:03.335 --> 00:01:04.730 - be binding the. 00:01:06.930 --> 00:01:10.178 - The product, the product short description, control dot 00:01:10.178 --> 00:01:13.426 - product, short description, but there just isn't one. 00:01:14.680 --> 00:01:19.685 - Showing so well, let's look in our scope inspector at the 00:01:19.685 --> 00:01:21.050 - product short description 00:01:21.050 --> 00:01:26.870 - control. Now it's supposed to be OK. Well, that's interesting an. 00:01:27.390 --> 00:01:30.150 - Product is undefined so. 00:01:30.850 --> 00:01:33.461 - It can't show a property from a 00:01:33.461 --> 00:01:35.600 - divine stove. Well. 00:01:36.110 --> 00:01:43.068 - I would be our first place to look so we know that is the 00:01:43.068 --> 00:01:47.044 - short descriptive product. Short description control. So let's 00:01:47.044 --> 00:01:49.529 - look for that short description 00:01:49.529 --> 00:01:55.960 - TypeScript, alright? Well, product is supposed to be a 00:01:55.960 --> 00:01:58.885 - required. A required scope 00:01:58.885 --> 00:02:03.514 - variable. Well, that's not really getting us anywhere, so 00:02:03.514 --> 00:02:04.753 - let's look at. 00:02:05.450 --> 00:02:10.301 - Let's look at product details. The full page itself. Here, the 00:02:10.301 --> 00:02:12.506 - hour. Let's look at our. 00:02:13.560 --> 00:02:17.880 - Master product details page to see if this is. 00:02:19.490 --> 00:02:24.470 - Short description OK. 00:02:25.570 --> 00:02:30.390 - So what this is supposed to be showing is the. 00:02:31.170 --> 00:02:33.770 - Product dot product to display. 00:02:34.400 --> 00:02:38.600 - Are we getting that will go back to our HTML and hang 00:02:38.600 --> 00:02:39.650 - on a second? 00:02:40.720 --> 00:02:45.087 - We look at our HTML. We see short product short description, 00:02:45.087 --> 00:02:47.866 - but it looks like there's a typo 00:02:47.866 --> 00:02:52.779 - somewhere. 'cause I see on here the product that is supposed to 00:02:52.779 --> 00:02:57.087 - be passing into our directive is is misspelled there. As far as 00:02:57.087 --> 00:02:59.241 - we see is no product details 00:02:59.241 --> 00:03:04.998 - control dot. Product to display with no why here on our. 00:03:05.600 --> 00:03:09.590 - Product details page. Though it's showing up just fine. So 00:03:09.590 --> 00:03:14.777 - what that would tell us is that there is a override for this 00:03:14.777 --> 00:03:21.030 - skin. We in our UI workspace can find our overrides. We 00:03:21.030 --> 00:03:26.070 - know the skin we're on is our default clarity skin. 00:03:27.180 --> 00:03:31.368 - And we see there is indeed a a product details override, so 00:03:31.368 --> 00:03:35.207 - that is going to be what takes precedence. Ann is built. 00:03:35.940 --> 00:03:39.756 - And sure enough, it is misspelled there. Just a 00:03:39.756 --> 00:03:43.572 - mistake from someone doing something else I'm sure so 00:03:43.572 --> 00:03:49.084 - will fix that. Will make sure our gulp has built it for us, 00:03:49.084 --> 00:03:50.780 - will have the watch. 00:03:52.050 --> 00:03:54.180 - Function happening OK. 00:03:54.880 --> 00:03:58.760 - Well, that should fix it. We've saved and we've built. 00:03:58.760 --> 00:04:01.476 - Let's check It again. Hard refresh because. 00:04:02.500 --> 00:04:05.146 - OK, we still don't have it. 00:04:06.480 --> 00:04:10.370 - It seems like we did correct the issue here though. 00:04:11.000 --> 00:04:15.758 - And we need to make sure of that. So in our product short 00:04:15.758 --> 00:04:19.418 - description control, we see that instead of undefined product is 00:04:19.418 --> 00:04:24.522 - now a. A full object here, so it's it's getting that 00:04:24.522 --> 00:04:28.900 - correctly, so let's look at the lever. Then worst 'cause we're 00:04:28.900 --> 00:04:30.094 - still noticing anything. 00:04:30.690 --> 00:04:37.450 - So we see what is supposed to be bound here in this empty 00:04:37.450 --> 00:04:43.170 - paragraph tag. What's supposed to be bound? It looks like is 00:04:43.170 --> 00:04:46.810 - product short description control. Short description. OK, 00:04:46.810 --> 00:04:52.010 - well that's simple enough. So let's look at the product. 00:04:52.820 --> 00:04:54.808 - The short description control. 00:04:55.440 --> 00:04:56.280 - So. 00:04:58.110 --> 00:05:00.406 - Well, now it was supposed to be 00:05:00.406 --> 00:05:04.230 - showing. Don't short description, just a plain 00:05:04.230 --> 00:05:06.720 - property down short description, but that. 00:05:07.920 --> 00:05:11.640 - That doesn't mean there is no property of short description 00:05:11.640 --> 00:05:13.128 - here on this controller. 00:05:13.760 --> 00:05:18.128 - I mean up here, it just there's no dot shortcuts description at 00:05:18.128 --> 00:05:22.496 - all, so maybe it's it's on what we're extending. Maybe it's back 00:05:22.496 --> 00:05:26.136 - on the templated controller base. Good place to look next 00:05:26.136 --> 00:05:29.776 - makes sense. Lot of properties here. Let's look for short 00:05:29.776 --> 00:05:32.688 - description. OK, not here either. So short description 00:05:32.688 --> 00:05:34.144 - doesn't exist on this. 00:05:35.310 --> 00:05:38.370 - On this TypeScript file at all. 00:05:39.380 --> 00:05:41.200 - Well, let's look at the HTML then. 00:05:42.400 --> 00:05:47.492 - Yeah, well. It looks like it's saying dot short description, 00:05:47.492 --> 00:05:51.119 - but that just that just can't be right. There is one. There isn't 00:05:51.119 --> 00:05:55.304 - one. So what could we do to fix this? Will take a look at the 00:05:55.304 --> 00:05:58.652 - actual product object that we know is being passed. We can see 00:05:58.652 --> 00:06:02.766 - it here. Does it have a short description property that we 00:06:02.766 --> 00:06:09.140 - could use? And we find in our large list of product details 00:06:09.140 --> 00:06:11.268 - that. It does indeed. 00:06:11.800 --> 00:06:14.380 - So instead of this. 00:06:15.220 --> 00:06:17.824 - Strange did instead of this, how 00:06:17.824 --> 00:06:22.550 - about? We just tell it referenced the product object 00:06:22.550 --> 00:06:24.725 - properties instead of its own 00:06:24.725 --> 00:06:29.589 - properties. And we'll see I, that looks to me like it should 00:06:29.589 --> 00:06:33.400 - work, right? It's that object that we can see over here. Man, 00:06:33.400 --> 00:06:34.948 - it's this property that we can 00:06:34.948 --> 00:06:40.086 - see right here. So we've saved. That will refresh and see what 00:06:40.086 --> 00:06:42.510 - that's given us and yet still. 00:06:43.350 --> 00:06:47.562 - A good place to get in, just look again. Sanity check, did 00:06:47.562 --> 00:06:51.072 - the things happen the way you needed them to happen. 00:06:51.900 --> 00:06:56.267 - And we see here that even though we updated that file. 00:06:56.840 --> 00:07:00.224 - It doesn't look like the update took OK well. 00:07:00.800 --> 00:07:06.624 - We saved and we have gold watch going and well it it. It sure 00:07:06.624 --> 00:07:11.200 - did say it finished building the store templates just now. So 00:07:11.200 --> 00:07:16.192 - that implies that it thinks this was successful in it. There was 00:07:16.192 --> 00:07:21.184 - no problem. So possibly we see that this is in our base. 00:07:21.790 --> 00:07:27.016 - UI folder that well, maybe there is an override for it and I 00:07:27.016 --> 00:07:31.840 - guess we would find that. Sure enough, there is an. It's just 00:07:31.840 --> 00:07:33.046 - the same issue. 00:07:33.620 --> 00:07:34.898 - Be over hour. 00:07:35.400 --> 00:07:38.710 - Fix from the core file and see if that did. 00:07:39.960 --> 00:07:41.079 - We have built. 00:07:41.710 --> 00:07:42.910 - And. 00:07:44.870 --> 00:07:47.998 - There we go so. 00:07:48.920 --> 00:07:50.699 - Debugging in sev. 00:07:51.380 --> 00:07:52.820 - Do you make a directive and 00:07:52.820 --> 00:07:56.274 - stuff? Is is a tough, 00:07:56.274 --> 00:08:01.012 - uh? There are many, many different things that can go 00:08:01.012 --> 00:08:02.752 - wrong, but the best way. 00:08:03.620 --> 00:08:08.800 - Test is just a start at the top like we did for the previous 00:08:08.800 --> 00:08:14.240 - three. Bug exercises here to start the very talk, use your 00:08:14.240 --> 00:08:18.981 - element inspector. What you know, what is host to be there, 00:08:18.981 --> 00:08:24.584 - but what is being displayed on the page. Before we saw that our 00:08:24.584 --> 00:08:28.894 - directive was was loading, it just looked like it wasn't 00:08:28.894 --> 00:08:33.635 - getting a product, it was undefined. We saw here. So we 00:08:33.635 --> 00:08:36.652 - used our tools to fix that and. 00:08:37.720 --> 00:08:40.966 - Various other things down the line. 00:08:42.250 --> 00:08:45.830 - The. Best place. 00:08:46.330 --> 00:08:51.192 - Want to edit that, I'm sure, but the idea is that. 00:08:53.030 --> 00:08:56.786 - To debug something you always need to keep in mind just what 00:08:56.786 --> 00:08:59.916 - it's what you know it's supposed to do versus what. 00:09:00.740 --> 00:09:02.410 - We've told it to do.