Making Quick Edits

[00:00:00]
>> Jon Kuperman: So I'll hop over here to the Lessons page, and we'll take a look at essential Chrome DevTools. And mostly what we'll do here is we'll go through a bunch of kind of tips and tricks, or quick things that you can learn. And then we'll go from here and do an exercise where you'll have a chance to apply some of them yourself to kind of try to solve a few issues.

[00:00:16]
So I think that if we open this up and we go to the Elements panel. And we click on anything, we'll see something quite familiar, which is this kind of DOM on the left and the CSS applied on the right. I think that if we were to scroll through, we might be able to find some good cases of maybe we don't, maybe it's a bit too simple.

[00:00:35]
But when we get into the specificity stuff a little bit later on, I'll show you some of the kind of strike through ones. Or I suppose we could do something really easily, we could say, okay, all articles are background blue. And then we could say this main content, one is background white.

[00:00:50]
And so then, if we were to go ahead and click on this article, Don't show. And then go over to Computed, we can see that the background color is white. And if we wanna know why that is, we can click on this little arrow here, and we can get kinda taken over here, and says that that main content background is white.

[00:01:10]
This is the thing that has won out over the specificity, whereas some of these other ones you can see the background blue has been crossed out. And the reason it's been crossed out is because article is less specific than class of main content. Does that make sense, just as far as specificity?

[00:01:25]
I know it's a little bit of a mind bendy concept. But it's basically like we have this problem with CSS, where we'll have multiple valid selectors with multiple valid properties. And we need some way of figuring out which ones to actually keep how to style your application. We need some rules that otherwise the page would render like differently every time.

[00:01:43]
So you could imagine instead, we went with something like, whichever one shows up first wins. That would be okay, except it get really confusing as you bundle all your app together. Or we could say like, yeah, whichever one has the darkest color one or the lightest color one, we need some way of kind of evaluating these things.

[00:01:59]
And the specificity is what we've gone with, cool. So all the CSS is editable, you can edit the property, you can edit the value, you can select or deselect things and have them show up and go away again. Colors are really nice where you can click in a little box and open this whole color wheel, and you can kind of have a play with making it look however you like.

[00:02:20]
Similarly we covered earlier, all the elements are editable. So you can change a tag, like double clicking on the nav will change the tag itself. So you can make that like an h1 and kind of the look of the site, refresh here. You can update class properties, you can update the actual value themselves, and you can drop down into this Edit as HTML mode.

[00:02:39]
And from here, you can kinda just go ahead and edit all the raw HML, we could just delete all this stuff and then the nav goes away entirely. I'll refresh again. You can add new CSS rules in a bunch of different ways. For the most part, you can just click on this +, it'll add a new rule, you could put any selector you want, so we could say like divs.

[00:02:57]
And then we could say background blue something like that, all divs are blue. You can go ahead and you can apply one and you can make it a specific class so you can say nav or you could say anything with main nav. And then you could be like this is background red or something like that.

[00:03:13]
You could get more specific you could do a div with the class of main nav background, right? So you can do all sorts of stuff here. You can also look at any of these and see which file they actually come from by clicking on the Sources tab. So, yeah, so we can edit HTML, edit CSS.

[00:03:27]
One that I really like a lot, that I feel is underrated is this scroll into view. So remember like earlier we showed that you can use the Console to select HTML elements or something like that. And I've spent a large amount of my career working on infinitely scrolling lists, just gigantic lists of things.

[00:03:43]
And sometimes it can get really hard where you have an element selected here. I've got this scroll into view, but I don't really know where it is on the page. So Chrome gives you this little hint, you can see it gives you a little arrow, like a checkbox.

[00:03:55]
It's like, hey, that li, it's down that way, right? And if I were to go down too far and hover over it, so it'll show you where it is. It'll say, okay, it's down that way, but it can be quite hard to actually find and center. So you can right-click on any element in the DOM, and you get all these different options.

[00:04:11]
One that I really like is scroll into view. So if you click scroll into view, it'll actually move the viewport itself and hover over the item, which can be really nice for a lot of different things. We've got the Console shortcuts, which I showed earlier. So you can click on something, you can hit Escape to pop up this little mini Console.

[00:04:27]
And then you can $0 to interact with it directly like this, which I think is quite nice. You can edit attributes, things like that. Hide and show elements, so you can click on any elements, I can click on this nav and I can hit H and it will hide it, and then I can hit H again, and it'll show it again.

[00:04:43]
This is different than deleting it, where it'll just be marked as transparent, essentially. You can also delete them if you want, so you can right-click and delete element, I'm gonna refresh. You can also duplicate elements, so you could right-click and duplicate. And now I know it might be hard, but you'll have to believe me, there are two navs here, even though they have the same style properties.

[00:05:01]
You can simulate all sorts of state. So we talked about this earlier, so you can click on anything. You can click on this :hov and you can simulate any type of hover, focused, targeted, anything like that. You can simulate these prefer color schemes, oops, which is this one over here.

[00:05:16]
So you can say like, what does it look like? If they prefer dark mode? What does it look like if they prefer light mode? What does it look like if we're in automatic dark mode? All sorts of things like that. You can view the Computed styles, we covered this a bit earlier.

[00:05:26]
So you can see the box model, how big it is after all the specificity rules, how much padding, border, margin, and position. And you can also see 100% of the attributes applied after specificity one out, which ones are actually applied. And if you wanna know where the specific rule comes from, at any point, you can click the arrow, it'll take you back to the Styles tab and show that rule.

[00:05:45]
You can set HTML break points. This is another one of those ones that maybe doesn't come up that often, but it can make you seem kinda magic when you know about it. So I have had projects before where I got a table of information, an HTML table, all this data coming through.

[00:05:57]
And sometimes the data, when it comes through it comes through wrong and I don't really know this code base. So it's really hard for me to figure out like where that's coming from. So you can click on any element and you can right-click on it and you can go Break on.

[00:06:10]
So what this will do is it'll observe the UI and when the UI changes it will tell you what JavaScript caused the UI to change which is quite powerful. So, you've got three options. You can say, I don't wanna know when this changes, but I wanna know when anything and it's sub-tree changes.

[00:06:27]
So, you can imagine a list of li, you don't care about the list, but when the li is changed, if a new li gets added or removed, you wanna be alerted to that. You could say, all I really want to know is when this elements attributes are modified, like a class, name, or Id is changed, or some inline style.

[00:06:43]
Or you could say, I want you to tell me when this node is about to be removed, right, before you remove it from the DOM, I wanna know. And you can use any of these, and when they fire, it'll actually take you to a break point in the Sources tab with the JavaScript that called it.

[00:06:55]
So again, this might not be your daily driver tool, but it is really cool to know when you have a bug that you can visually see but you're not exactly sure what code is causing it. You can use these really cool HTML break points to actually see what code triggered that change.

[00:07:11]
Does that sort of make sense, theoretically? Okay, great. You can find event listeners. So if you want to select any item and you're like on-scroll, this is doing something weird. You can click any item you want, and then you can go to event listeners, and it will tell you every single listener that applies.

[00:07:26]
So you can see here, I've got this color scheme generator for my source code called PRISM. And PRISM has one event listener, which is on the DOM content loaded. This is gonna be some minified code, but if I were to click on it, I could see what method gets called on DOM ContentLoaded, and it looks like it calls this [INAUDIBLE].

[00:07:43]
Again, this is not my source code, but it can be cool to see, for any element, what event listeners are listening, and then you can kind of click through to the sources and see them. Changing color formats is cool. I think this used to be even nicer than it is now.

[00:07:57]
But again, clicking on for any color background color, you click on that box, it opens this nice thing up. And you can kind of very quickly move between RGB, HSL, basically, any color format that you want. So I know certain websites will mandate everybody uses a certain, we all use HEX codes, or we all use RGB, or whatever it is.

[00:08:16]
You can very quickly prototype and then come in here and instantly transform them between each other, which is quite nice. You've got this kind of theme information that I pointed out here. So this is kind of the material design color palette. You can also use your CSS variables, any that you have declared in your application itself.

[00:08:36]
So you can see here on the root, I have all these CSS variables. So if I wanted to be doing a bunch of design work, I can click on a color, it opens up. I can click on these arrows here, and I can say, I want you to use the theme of my CSS variables.

[00:08:49]
And now you can see that all my CSS variables are right here, where I can easily click. This is really nice.you can import a custom theme. I usually stick with material design cuz I'm not great with design eye. And so then I can kind of build my app very quickly this way by just playing around with a bunch of different.

[00:09:05]
And you can long click on these to see all the gradients. And it's quite a nice set of tools.