Quick Edits Solution

[00:00:00]
>> So let's go through this exercise together, so the first two things we can do just via the elements tab. So the very first one, I'm gonna open up the DevTools, and use this selector to find the list that we're in and see that it is an unordered list and so you can just double click to edit it UL and then hit enter.

[00:00:21]
That'll change it so you'll notice it goes from numbered to dots. The second one is interesting, it's probably the easy, there's a couple different ways you could actually do it. The easiest way probably would be to look for an event listener so if we again use this, select the link here, then go over to event listeners and we can see that there's two this one is this color scheme for my code.

[00:00:45]
So that's not it this one's a click listener and so if we click on it, it'll take us to the sources and it'll actually take us to the actual function that's calling it. So the button in the block quote is kind of interesting. So if we remember from the specificity class, we would see that the element selectors, the weakest class, the next than ID, and then inline styles are the strongest, but the very, very strongest thing is an important tag.

[00:01:18]
So it should be this yellow color the other way that we could do it though, because DevTools helps you cheat, which is awesome is we could just find the block quote in the DOM here. And then we could just go to the computed tab and then we can just see that yellow is the color that wins out here so we can actually see it before it's even rendered.

[00:01:39]
So that's yellow and then for the last one, can you find out the border color, the one with this ID again, a couple different ways we could do it. You can always just scroll through them [LAUGH] and you can look for it that's no problem at all. You could also cheat a little bit by doing something like document get element by ID and then passing that ID in and this way we'll bring the element in here.

[00:02:02]
And sort of like we covered before you can see right where my mouse is now that if I hover on it, it says it's down but we can also right click and we can scroll it into view. And we can see this is the card with that ID and it has a border of green.

[00:02:17]
So any questions on this exercise? And then I had a couple questions that came in in between that I wanted to go through, but if anybody has anything on the this exercise itself, I'd love to hear. So the question was, how did we find the JavaScript for when you clicked this link up here?

[00:02:33]
How did we get there? So I open up DevTools and I'll go to the elements panel and I wanna be over here on the event listeners panel. And so what the event listeners will do is it'll show you any and all event listeners on the currently selected item over here.

[00:02:50]
And so the easiest way to do it is to use the selector to get the link and now that the link is hovered we'll see that over here up here at the click listener. And this click listeners on the link, and it actually has the JavaScript file and the line number so if you click that, it'll take you into the sources right on that line.

[00:03:09]
Again, a lot of these are easy with like the cleaner exercises like often you'll as your the code gets bigger and more complicated. It might be a little bit obscured away with like a helper function, but this is at least get you on the right track for finding it.

[00:03:24]
And we work with debuggers later we'll see that finding the line can actually be super helpful once you set a breakpoint on it, which we'll do in another section. I had one really good question earlier too, which I wanted to answer, it's actually very similar to this one that we just covered.

[00:03:40]
It was like the element breakpoints where you're resetting a break on over here. And the question was, okay, well, what if you're using some kind of framework like let's say you're using React, so won't be as simple as like, div enter text equals hello, could you do it that way?

[00:03:55]
The short answer is actually the same, which is you can set a breakpoint do the thing, yes, it will open a react function, but you can walk the call stack back to the your specific application code. And we'll do some really cool stuff with debuggers later but that's the short answer.

[00:04:10]
The longer answer, though, is if you're using a framework and that framework has its own DevTools, which we'll cover at the end, that would probably be your best bet. So if you get the React DevTools, and then you look at the React elements panel, which would be a new DevTools over here, that can show you specifically why a component rendered, right?

[00:04:29]
So that would be like hey, this render because you clicked this thing like that, it'd be a lot more helpful but you can do it without the React DevTools. You'll just have to look at a big long call stack and you'll have to look at the file names and you have to walk back until it's not core react Jes dot j s anymore until it's your actual application.