Mastering Chrome Developer Tools History of Developer Tools

[00:00:00]
>> [MUSIC]

[00:00:38]
>> Jon Kuperman: I guess just a little bit about me, I'm jkup on most of the online things like Twitter and GitHub and all that stuff. There's my email address I love talking about this stuff so feel free if you have questions after the course or whatever to ping me on any of those services.

[00:00:53] For the last two years of it was working at Twitter. Working on twitter.com I got to do a bunch of really fun web performance stuff there. And now I'm kind of on my own doing freelance stuff, teaching all that kind of fun stuff. I did just like Mark mentioned.

[00:01:10] I wanted to give like a caveat before we get started with the class which is that they really. Really do move very quickly on chromed up tools, and things have a tendency to move around. And Google IO is just last week, so there's a ton of brand new stuff that just got launched about a week ago.

[00:01:26] So this is, I guess, mostly for people that are watching the video later. It would be that stuff might not be exactly where we find it today. But for the most part they have pretty consistent design patterns. So you should be able to find a button that's at least labelled the same as it is today, it just might be under a different tab or something like that.

[00:01:46] Cool, so yeah I guess just a little bit of history on things for those that were developing before DevTools will remember this. But back in the day we didn't have any kind of developer tools and really we had two tools at our disposal. One of the them was the page source which is not super helpful to anybody.

[00:02:06] But it's kind of cool you can see the markup that actually gets sent down and we still have that today. And then the other for those that remember developing like this are alert boxes. And they have two big flaws for debugging programs by putting an alert in there, one they're horrendously annoying.

[00:02:25] They take complete control of the browser experience you can even change tabs until you hit OK on it. And two as you can see on the slide they don't have any ability to display complex objects right. So if you were trying to alert something and it was let's say a function or an object it would just show you something like this.

[00:02:42] And then, I remember back in the day you would put like a for loop and you'd like iterate on the keys for an object and try to alert those and anyway. So that's kind of where we came from and then, years ago, this hit the scene. This is a hexie's Live DOM Viewer.

[00:03:01] And so basically what this allows you to do, I've have got a little I got it actually still open here let me make that a little bit bigger. Is it allows you to type in HTML. And then it parses all that HTML and shows you this is kind of the first time you were able to get a visual understanding of what DOM is, what DOM meant.

[00:03:23] Because you can only see markup and then the document object model is how the browser interprets that markup and starts making all these objects. So this is kind of your first time where you could start putting in tags or whatever. And then you can see them kind of coming in down here.

[00:03:39] And you can even see things like, if you don't set a header or a body. Browsers will interpret and place one in there for you, those tags are necessary. And then you can do things like, you can make like an H1, that says hello world. And you can start seeing like this real thing like that H1 and it has this text attribute which is hello world things like that.

[00:03:59] So this is like our like first step into having a better debugging infrastructure ecosystem for JavaScript. And shortly after that, this DOM Viewer was integrated and Firebug came out. There's actually the history's like a little bit murky cuz as is usual there's like a lot of people having the same idea, working on the same thing at the same time.

[00:04:20] But I think Firebug was the first one to really catch on. And it was a Firefox add on for those that didn't use it. And it's actually pretty similar you can kind of see these are like six pictures really squished in together. But not much has really changed since Firebug first hit the scene.

[00:04:36] The tools have gotten a lot more complex but as far as like the general layout and understanding that you have these multiple panels. And the tasks that they accomplished have stayed pretty much the same. It's also worth pointing out that this class is gonna really focus on Chrome's Developer Tools as is in the title.

[00:04:53] But there's basically the split now where Mozilla has Firebug still supported as an add on that you can get. It also has it's ground up custom developer tools which are really really cool. We're not gonna touch on them today. They have almost all the functionality that Chrome developer tools has.

[00:05:15] They're missing a few things and they have a few things. Like they've got some really cool support on like SVG Animations things like that. And then they're missing some things that are like more in the like debugging and editing mode. So we're gonna concentrate on Chrome but I highly recommend checking out Firefox as well.

[00:05:32] So there's the Firefox dev tools, there's Firebug, there's the Web Kit DevTools. That would be like your Safari, Brave browser all those things and then there's the Chrome DevTools that we're gonna be taking a look at today. And again they're almost all the same they should be pretty easy to navigate because they have the same kind of general layout.

[00:05:52] I just find Chrome to be the most complex and have the most cool stuff going on. So it's also worth noting that getting experience with the developer tools can help you outside of Chrome. And this is becoming more and more true. So for the longest time for anybody that does nodejs development.

[00:06:10] There's this cool project called node inspector. And basically you nodejs comes with a debugger built in. And what this allows you to do is basically open up your node app in a version of the chrome DevTools. Which is kind of cool so if you get used to that UI clicking around editing things like that you can do that with node.

[00:06:29] Speaking of things have changed this week, which are really exciting. There's actually this polar quest to node core which would allow this like dash dash inspect flag or inspector I think. And you don't need anything else. So you'd actually, this is in a branch right now it hasn't emerged into a major version.

[00:06:48] But very soon you'll be able to actually run a node app and then type you know dash dash inspector your app. And it'll just go ahead and automatically open in a version of Chromium with the blank developer tools. So I think these are like really worth getting to know both, because obviously web performance is important.

[00:07:06] But also these tools are becoming more and more widespread as Google is donating time to help integrate them with other environments. And the last thing I wanted to mention on this history ecosystem side is that they have a really great API. So a lot of frameworks build their own panel of developer tools.

[00:07:26] So some of the big ones, if you do any ReactJS Development they have their own DevTools. Same with Ember, same with Angular and then there's also cool things like. There is an accessibility Chrome extension which adds another panel there. So the APIs really cool and there's a bunch of additional stuff we're not going to really cover in depth today but just wanted to point out that if you're working on a project.

[00:07:46] You should probably check to see if there's a DevTool extension for whatever stack you're working with because they're very well might be.