Mastering Chrome Developer Tools v2 A History of Debugging
This course has been updated! We now recommend you take the Introduction to Dev Tools, v3 course.
Transcript from the "A History of Debugging" Lesson
>> Jon Kuperman: Really quick kind of a brief history I don't know if anybody is an old-timey web developer like me but back in the day when I started the only tool that we had was view-source. So we still have view-source and it looks something this, you click view-source and you get all of your HTML.
[00:00:17] There were kind of a lot of problems with this which were, you can't really do anything with it, you can't really interact with it. If you do any client-side code that changes your markup, it's not well represented there but the big one is when you needed to debug.
[00:00:32] I don't know if anybody remembers advanced debugging like this, right? So you didn't have console log, because you didn't have a console, because you didn't have DEV tools. So the only thing that you had was in your code, you could put an alert, that was what you could do so you could go alert, first name, alert, whatever.
[00:00:46] But the problem was if it was any non primitives it wasn't a number, a string, or something like that alert doesn't pretty print it doesn't JSON string of fire or anything like that. So what you would get is these alert, object window, or alert, object object, or something like that and so you'd be like drilling down into it, it was terrible.
[00:01:05] And what was kind of a big issue then, let me go to this next one, is that we would see, we would author HTML, right? And this is still true to this day, even if you're writing, using React, using JSX or whatever it generates HTML. HTML is what you send to the browser but the browser doesn't give the user HTML, right?
[00:01:24] We've all heard of this concept of the DOM before, right, the Document Object Model and it's because the browser takes the HTML as instructions. But it actually uses this really complex object model for how things are positioned and how you interact with them and everything like that. So a big discrepancy here was that you would just be able to see the view source of your HTML but really there's so much more going on.
[00:01:50] And then so years and years ago, the software developer created this thing called The Live DOM Viewer. And so if we go ahead and we take a look at this, It's pretty minimal, it's still online, which is really awesome but basically what it is, is what I'm talking about here, right?
[00:02:08] So you would write some HTML, you would write body, and then you would write H1, Hello Frontend Masters H1, and this is what you'd see in view-source, but really the DOM creates all this stuff, right. These are body has a text node, it's an H1 with another text node, and it starts kind of giving us a better understanding of what the browser is actually rendering and how things are working.
[00:02:52] Those wouldn't be present in the view-source but, when you start diving in to the debugger and into the DOM, you can see what's available, what you could use.
>> Jon Kuperman: Cool, so then out of this DOM Viewer came Firebug, which was the very first of its kind, this kind of mind blowing revolution in web development.
[00:03:13] And so we had, it was an add-on originally for Firefox and you could install this add-on and you got all these great things. And the kind of funny thing, the reason that I include this picture of like it's preview release is that really almost nothing has changed to this.
[00:03:27] Those look really similar to what we're gonna be dealing with in the Chrome Dev Tools. The design's gotten a little cleaner but you can see these little images of, you can look at your scripts or you can look at a console, an interactive repl, you can look at the markup and expand the DOM.
[00:03:40] So this thing came out, it's totally incredible, sadly I think a year, maybe two years ago it was finally sunset. What happened was I think it was an add on and then Firefox removed it in lieu of their own Dev Tools which they've been working on and It was still an add on and now I think it's finally kind of lived its life.
[00:03:56] But it was really a game changer and it was really kind of what started this concept of having these really great debugging environment for web developers. Cool, and yeah, so these slides are available I sent the link out I think, but let me just top forward really quick.
[00:04:13] So if anybody doesn't have the slides, you can go to, it's a bit.ly link, so bit.ly /devtools-slides. I saw somebody asking about them and then otherwise it's slides.com/jcoop/devtools, that's where it'll redirect to, cool, so you don't have to write down all these links and things like that. So the official documentation lives at this link, it is really high quality writing, it is usually pretty slow to update as the Dev team seems to move faster than the technical writing team.
[00:04:44] So oftentimes you'll go look at an article on the docs and the Dev tools don't look like that anymore, but the core information is the same, so sometimes the docs are a little bit difficult to use, which is why this course exists, but they are really well written.
[00:05:00] We're also gonna be doing a sample app, which is here at bitl.y/devtools-app, we'll get into that later, I'll leave this link back up so we all have time to install it, get it going, I'll help out with that. It requires Node.js being installed in order to run the kinda server that serves it, we're not gonna write any Node.js, but it does require it being installed.
[00:05:21] If for whatever reason you can't or really don't wanna install it, we can do most of the exercises on this site that I made which is masteringdevtools.com. But I'd way rather just install node and pull this GitHub repo so we can actually do everything together. Again we'll cover that when we get to the first exercise.