Console & Sources Tabs

[00:00:00]
>> Jon Kuperman: All right, we made it, we're performance experts, not just kidding. We'll go through that a lot more. I do find it nice to take a quick pass and then we'll circle back. Console, okay, most people's favorite one, yes, love it. So it is a full REPL, as a lot of people know, you could do like const a = hello, and then you could do a and get hello, that's very nice.

[00:00:19]
You can do all sorts of JavaScript operations, like math, you can kinda quickly see things like that. It's very, very nice. It also interacts with the dom in multiple cool ways. So if we go to the elements and we see that we've got this like nav class, main nav, okay.

[00:00:35]
So from here you can do something just like you'd be able to do in your JavaScript code. So you can getElementsByClassName, and you could do main-nav. And boom, we get this HTMLCollection, and in that HTMLCollection is our main-nav. So you can see when we hover over this in the console, it highlights it in the HTML just as though we were hovering it over it in the HTML.

[00:00:58]
But there's some really cool things that you can do, for example, we can go into our elements page here and we can click on something, let's say this h1. This h1 that's like up here somewhere. Okay, so we click on it, and it's now saved in our kind of Chrome DevTools history as the most recently clicked on thing.

[00:01:14]
So later, if we're going ahead, and let's go ahead and clear this for now.
>> Jon Kuperman: Clear, you can use these magic kind of jQuery-looking numbers. So you can do $number, and it'll bring back the most recently clicked on thing, that h1. And you can do operations on it.

[00:01:31]
So you can do textContent = high, or something like that, and it'll actually change it. And so you can have this really nice, deep linked relationship between things that you click on in the elements or things that you select in the sources. And then you can bring them into the console and you can do operations on them very nicely.

[00:01:50]
This works with, I think up to five numbers or something. So you click on the paragraph, and then the div, and then we can go back to console, and we can see that the div is the most recent, and the paragraph is the second most recent. So you can kinda pull things in and play with them.

[00:02:04]
It's really nice, you get this kind of, full rep where you can call all sorts of JavaScript methods on HTM L elements and see them update in real time, things like that. So quite a lot of cool stuff that you can do in here. This is also where all of your warnings and errors and logs will show up.

[00:02:21]
You can do quite a few cool things. One thing that's nice is you can clear it at any time, but you can also go ahead and filter it in different ways. So you can see this very nice, top level thing. We don't have any messages, we don't have any errors, all that stuff, that's fine.

[00:02:34]
But if you wanted to, if you had a lot of stuff and you really wanted to focus on, let's say, just the errors. You can filter it by going to default level and you could deselect info and warnings and just show the errors. You can also get this kind of nice issues screen here.

[00:02:48]
And so, this issues screen will basically show you a much more human readable set of issues that it found. So it says here that, page layout for this page may be unexpected due to quirks mode, and this is because it doesn't have a Doctype HTML. So for example, if I were to go into my IDE and edit this page, and I were to go to the top and just add this Doctype HTML and hit Save, and then refresh.

[00:03:11]
We can see that the issue has gone away, there's no issue. So it's quite a lot of cool stuff in this console. The REPL is obviously great, but being able to bring in and interact with elements from the DOM, I think, is very important as well. Yeah, and quite nice.

[00:03:26]
Feeling good about console? All right, console's great. Okay, sources. So this is essentially a full IDE. I think that back when I used to teach the course and bundling was less the de facto norm. There's some really cool things you can do, like these workspaces, where you can drag your HTML and CSS and JavaScript in, and then you can edit them in here, and you can hit Save, and they'll persist to disk.

[00:03:50]
Which is a really cool thing. I've stopped teaching that in recent years because, And I'm not saying this is a good thing, but the reality is, I think almost all of our apps these days have some kind of build step or some kind of bundler. That may not be true.

[00:04:05]
I mean, this project, for example, is just HTML and CSS, but I do find this persist to this thing. It won't work with a build step cuz it doesn't know how to find back the actual source file, and therefore its kind of usefulness is unfortunately, kind of gone away over the years.

[00:04:19]
That being said, it's still really nice to have an IDE where you can click on any file, like we can click on our HTML, and you can just have your normal place where you can kind of edit things and do what you will. The persist to disk may not be as useful, but having a full IDE that is your actual live code still has a lot of good usefulness.

[00:04:38]
And the other thing that we're gonna talk about here is when we have a whole section on is that this is also where your step three debugger will be. So if you add a debugger line to your source code, or if you set a break point in your Chrome DevTools, this is where when it hits, it will open up the Sources tab.

[00:04:52]
And you get all sorts of great stuff on the right here, where you can watch for certain expressions. You can view all your break points. You can see the JavaScript scope of where you are. You can see the whole call stack and you can walk it back and forth.

[00:05:05]
And you can do all sorts of fancy break points, you could do a thing like, when we fetch my API endpoint, break there, or when this HTML changes of style attribute, break there. You can do all sorts of cool break points besides just lines of JavaScript. Cool, how are we feeling about sources?

[00:05:20]
Good enough? Yeah.
>> Speaker 2: I have a question, just drawn saving your progress here. So like you said, it's similar to an IDE in some ways, how do you practically save things from here to your workflow? Or is that always looking for an answer?
>> Jon Kuperman: I think the reality is that if you have a complex workflow that DevTools can't really figure out, which I think is most of us at this point, then saving your changes is going to be very difficult.

[00:05:43]
I think that they do have a nice, if you're in the workspaces, you can use the workspace and then you can try to export like a diff of the changes, right? However, it's still gonna treat it like there's one JavaScript and one CSS file and it's still gonna be on you to find the actual source code that generated those things.

[00:05:59]
So I do think that this workflow, whether it's persisting to disk or at least just seeing what has changed, has kind of gone away as more and more of a disconnect between the actual source code. And a quick shout out, I will say here, I mentioned earlier that I work on the source maps task group under TC39, I would be incredibly open to any kind of proposal.

[00:06:27]
I mean, we have a lot that we can do there. The bundler tools can stick stuff there and the dev tools can read it or use it. I would be very open if anybody had interest in working on a proposal for workspaces essentially, where you could show your module graph, right?

[00:06:43]
I could think of an idea where you could be like, okay, this style, CSS is actually comprised of one, two, and three dot CSS, and here's how they map. I could see something really cool being there. It doesn't exist, but if somebody is interested in working on something like that, I think that would be a very neat thing to get back to this kind of, persisting workflow.

[00:07:00]
But I do think we've sort of lost it, at least for now.