Elements, Console, & Source Maps

[00:00:00]
>> Jon Kuperman: Yeah, so for this next section, we'll cover the essential Chrome DevTools, which I've kind of outlined as the elements, console and sources panel. And we'll talk a little bit about what's in them, how that stuff's created and why it's like there's some important distinctions to make. I think, so back to the earlier page where we've got this view source.

[00:00:16]
So this is like the actual text that comes down in an index HTML file. And one thing to note is that when you're looking at the HTML inside the debugger, it's not just that it kind of like collapses the trees and adds syntax highlighting to it. There's like quite a distinction to be made between HTML and DOM, the document object model.

[00:00:37]
And so the important thing here is that, what the elements panel is showing you is this kind of living application where that HTML has been rendered, and then the CSS has been rendered and the CSS has been applied to the HTML. And then similarly, JavaScript has had a chance to run and alter the HTML.

[00:00:56]
And so it goes from becoming this kind of flat list of texts, the original source code to being this very interactive DOM, which has sizing information and positional information, has attributes applying it as event listeners. I think there's an important distinction to be made here. And one way of visualizing it, which is cool, is there's this tool by Hixie called the DOM viewer.

[00:01:18]
And you can kind of take some HTML. And then you can, on the left, and then on the right, you can actually see the kind of JavaScript DOM view that is created from it, just to kind of visualize that we go from this idea of this kind of flat list of tags to this tree of elements with attributes and properties, things like that.

[00:01:36]
And so when we're messing with the elements panel, we're messing with this living document object as opposed to just like a very nicely laid out set of HTML. There's a quite a big difference there because all these attributes get applied with just the HTML you don't really have any way of knowing that that h1 is going to get the font size 30 unless you do it with your eyes.

[00:01:57]
But with the DOM it's already been parsed and applied so we already know that that HTML will have that class applied and that there's a style sheet, etc. So things have to be sort of assembled before the elements view. Another thing that's kind of important is CSS. So we're gonna get into it a little bit where we'll see this idea of computed styles or this idea of conflicts in CSS.

[00:02:18]
And this can be very confusing when looking at the DevTools, but it's actually more fundamental than that. And so how many people here have heard of this idea of CSS specificity? Okay, cool, yeah, so you've got this idea of specificity. It's not important to remember the order, it's just important to remember that there is this kind of like battle that happens.

[00:02:37]
And the idea that you can think about is you can think about having multiple selectors that apply to a certain element. And they all say the color should be. So you can imagine a dev with a class and an ID. And then you have a CSS selector that says, okay well, devs should be the color blue.

[00:02:53]
And then you have a class selector that says, that class should be the color red. And then you have an ID selector that says, that ID should be the color yellow. And now the browser has to figure out what color should be the div. What to do with that information, do I make it blue, or do I make it red, or do I make it yellow, how do I do that?

[00:03:06]
And so we had to come up with this standardized rule set for it called CSS specificity. And so you can kind of see here that we have basically, it's just this order of priority that goes all the way up. And so the more specific you get, the more powerful it is.

[00:03:20]
And the less specific you get, the less powerful it is. And by specific, I mean if your CSS just uses an element like dev, devs are blue. That's not very specific, right, that's vague. It just applies to all divs. Whereas if you have an ID on a div, like an ID of important or ID of hello, and you say divs with the ID of hello are purple.

[00:03:39]
That's more specific, right? So we've said that, yeah, divs are blue, but this div is purple. And it goes kind of all the way up, eventually ending with that inline important word, which I'm assuming people have used while frustrated and unable to get their styles to apply correctly.

[00:03:53]
So there's a lot to be kinda gleaned from here. I think that coming up with ways of doing your selectors so that they won't accidentally clash with other selectors, like probably having an element selector is something to largely stay away from. Sometimes you'll want it for a base style.

[00:04:10]
You also don't necessarily wanna cover your whole code with IDs, so you can take advantage of the nice parts of CSS. But it leads into all of these philosophical how to name your CSS classes or when to use classes. Classes are IDs, and that's really out of the scope of this course.

[00:04:23]
But the important thing to know is that the dev tools will show you, after all the specificity rules applied, which one is being shown. And if you ever see your attribute that you're looking for with a strike through it, it's because something else was more specific, that's why it's there.

[00:04:39]
So we're gonna cover all that. The last thing to talk about is source maps. So, we mentioned this a little earlier in the course, but more and more these days, the application code that runs is more and more dissimilar from your original source code. Whether you have a Javascript app that you've been running through, I don't know, like Veet and Webpack and use Typescript and those get stripped out and then you use like Tercer and it does this like optimizing.

[00:05:04]
You have this huge build pipeline, whether you're doing some web assembly stuff and it's an actual different programming language like you write C++ or you write rust and it runs as Javascript, there's all this disconnect kind of between these things. And the dev tools is like the important place where they do the best work that they can to kind of reassemble things and help you understand where these things came from because more and more like if you were looking at that view page source.

[00:05:27]
That's even less helpful now than it was ten years ago because the chances are that markup is being assembled from 80 different react components that are going through Javascript and all being applied, it gets very complicated. And so we'll talk a little bit about, the importance of source maps and where those come into this as well.