DevTools History

[00:00:00]
>> So this is the first section called the introduction. And what we're gonna learn in this is the history of the browser DevTools. We're gonna take a little bit of a walk down memory lane or maybe not for the younger folks watching, but what it was like interacting with the DOM in the early days.

[00:00:16]
And then we're gonna kind of cover the groups that I think this course is really best to benefit. So again, this is an introduction course, so we assume very little knowledge of the DevTools. So if we start at the very beginning, the way to open the DevTools, you have kind of two options, keyboard shortcuts or using your mouse.

[00:00:36]
And so you can right click on any website, and you can click Inspect, and it'll open this, typically, it starts as a bottom panel. You can also use keyboard shortcuts, I've got two of them here, so you can use Command+Option+C on your Mac, or Control+Option+C does the exact same thing, it opens the DevTools.

[00:00:53]
So we get these open and we have this thing that we're looking at, typically, depending on the keyboard shortcut user on the elements tab. And one of the ways that I like to start this off is by having people just think for a second about, if you had to describe what are you seeing here, how would you describe that?

[00:01:10]
And it's interesting because I feel like a lot of people, and this is not a wrong answer, but a lot of people say, you're looking at HTML and CSS, right? I mean, that's kind of what you're looking at. But the reason that I think it's so interesting is cuz it's not necessarily true, right?

[00:01:24]
It is HTML and CSS for sure, I'm not gonna argue that, margin zero is CSS so that a body tag is HTML. But you're really looking at this fully parsed browser rendered DOM, right? If you think about looking at raw HTML, you would have a very hard time clicking on the body and learning that it had background color of this gray.

[00:01:46]
Because you'd have to look at the body, then you'd have to search your code base for some CSS. And you'd have to look at see if there was any body tags and all that. So this is not source code, this is after the source code has been sent down, the browser has done all its work and we're gonna get into what that work is later, and this fully interactive DOM is what we get here.

[00:02:05]
And that's an important distinction because, back in the day, we didn't have this cool fully interactive DOM, we literally did have just the HTML and CSS. And so, this screen still exists, if you right click on your browser, and instead of going to Inspect, you View Page Source.

[00:02:22]
And so, if you view the page source, you actually get the text content that gets sent down with the page. So here's my CSS which is in line, and then here's my HTML down here. And so, this is interesting, you could still kind of poke around at it or you could copy it all and put it into an ID or something like that.

[00:02:40]
But, one of the big things that used to be super painful back in the day, was like let's say that you wanna check something's value in JavaScript, right? That's something we all do, probably all the time, we're like, wait a minute, this link isn't working, what's the value of link right now or what is foo equal.

[00:02:54]
So what we used to do back in the day was alert stuff [LAUGH], and some people haven't even messed with alert before. So, if I right click and open up the DevTools, and I go to the Console tab, and I type alert, hi, this used to be the thing back in the day, and I hit Enter.

[00:03:10]
You'll see you get this browser rendered thing at the top of your screen that says, hi. So this is pretty cool and at first it kinda looks like, okay, I get it, it's like Console log, but it comes on the top of the screen, that's fine. But alert has a lot of limitations, for an example, if you are to go back in the DevTools again, and go to console and you were try alert anything that's not a primitive, like let's say an object.

[00:03:35]
So I do name, and we make this a little bigger, name, Jon, and I tried to alert that you'll see I don't get named Jon, I get this to string version of the object. So, it says alert Object Object. And so, the thing that we used to have to do back in the day if we wanted to read the values of an object, was we would put them in a loop, like a for loop.

[00:03:56]
And then we would log out each key and value, and we'd alert each one of those. And so, then you'd reload the site and it would get like an alert, and you click OK, OK, OK, until the whole thing went through. And so, the DevTools offering this interactive DOM, this ability to console log complex statements and complex types, like objects and arrays, is a really gigantic improvement.

[00:04:17]
So, yeah, back in the day we're working, we have view page source, we have alert, those are kind of our tools for debugging. And then this really cool tool comes out Hixie's Live Dom Viewer, so I'm gonna open this in another tab. So this was like, you can kind of see it's actually quite similar, in a sense to the DevTools.

[00:04:35]
But this was this really great tool, we're able to do things, like make an h1 Hello world, and we're able to see not only the markup, but we're able to see what the DOM is, and we're able to see a preview of it, all in real time. It was like [LAUGH] this is really mind blowing tool, I know it's something that we take for granted nowadays, but it was this great thing.

[00:04:58]
So you could grab that view source, and you could put it in here, and then you could actually start looking at the DOM structure, what it looks like. All these different things you can mess with it and see updates in real time. So that was great, and then and this is like a very old school, this tool came out, Firefox Firebug.

[00:05:14]
And it was the very first built in browser extension that was a DevTool. And one of the things I always like to point out is that, if you use your imagination a little bit, this thing that came out, whatever, 20 plus years ago or something like that. It doesn't look too different than what we have today, right?

[00:05:31]
I mean, if you look at this, you've got your HTML structure over here and you've got the corresponding CSS over here. We've kind of moved things around and all that but, essentially, Firebug comes out and sets this gold standard for development experience. There's a ton of stuff I can't do, of course, cuz it's a long time ago, but this was a giant change in how people built and edited and debugged websites.

[00:05:55]
And so, Firebug was this incredible tool, kind of first of its kind, and a few years ago back in 2016, they officially sunsetted it. A lot of the core got moved into Firefox itself, Firefox comes with its own DevTools now, but it was sort of this big moment for us.

[00:06:11]
Where we had all of a sudden our efficiency sped up, like a hundredfold and we could debug complex things. And we could just do, all this stuff that we couldn't do before, that's a really cool tool. And I was very sad when it got sunset just cuz it's kind of the end of an era.