History of DevTools

[00:00:00]
>> Jon Kuperman: With that done, let's get back to some slides and kind of talk about a very brief History of the DevTools. Did anybody develop websites before we had any DevTools at all? Does anybody develop back, okay, so we got one. So when you think about the things that actually kinda come over the wire that you might actually have access to, like what we used to have was just the raw HTML, right?

[00:00:22]
So we've had View page source for a long time since the launch of some of these old browsers. But they're not interactive or colored or attributes aren't applied, CSS isn't applied, it's just a big blob of text, right? And so we had this, and we actually did have a tool where we could feedback information the other way before we had console log because that's obviously tied to the debugger.

[00:00:45]
We had alert statements, which we still have today, right? And so alert statements were great. So you would put in an alert, and then you would refresh your page and then boom it would pop up this alert that's really hard to get away and this worked, okay. So you can see here like my website says current postid is 17, I've logged out my postid.

[00:01:02]
The problem with alert statements is that they don't handle anything except primitive values. So the second you have any arrays or objects, you get the two string version of the array or object. And so you would get object. And so then what you would do in your debugging is you'd make a for loop around the thing, right?

[00:01:19]
And you would do object keys, and you would log each object key. And so this is what we had for quite a long time. So it got me interested in, when I was prepping this course, the history of developer tools, how we got from where we were to where we are today.

[00:01:34]
And so I made this brief history of DevTools for the web, which was kinda cool. So the web launched, arguably, in 93, and it had the view source where you could see the HTML, and it had alert, and those were what you had. And then we had many years until Netscape offered console log.

[00:01:51]
And so it actually didn't have a DevTool, but it had a JavaScript console that you could open in a new tab, and you could see things. Many, many years later, Firefox releases firebug, which was like, in my opinion the spiritual beginning of all of this DevTool stuff. It looked very much like Chrome DevTools still look, it functioned similarly.

[00:02:09]
And this is 2006, and we really kinda stayed on this track. Google followed with their own Chrome DevTools. Eventually apps got bigger, bundling started happening. So source maps were created by a team at Google at the time to help you, kinda debug minified code or transpiled code. Eventually, we got new panels like performance, and then Firefox came out, and they re imagined DevTools.

[00:02:32]
It was this big thing that they did in 2017 where they started from the beginning and built their own DevTool. I don't know if anybody remembers, but had this really cool three JS style layout where you could to rotate the website and see layers, it's very cool. And then eventually Edge adopts Chromium moving to the kinda current Chrome is essentially the standard across browsers.

[00:02:53]
And then I posted this on LinkedIn and people got really mad. Okay, so then I re-edited it from the anger. And I made a more proper history of DevTools, which is the same thing, with some additions that I think are really important. So in that era between a basic console log and having an actual inspector, there are actually quite more fundamental changes that happen.

[00:03:14]
So I think first, before Firebug and I didn't know this. There was a person whose last name is Venkman, who built five really influential community tools around Firefox that were all about seeing sources or console logging or step through debugging. And they really were the kind of the person who kinda idealized a lot of the stuff, which eventually became Firebug.

[00:03:38]
Similarly, and then there's the HTTP traffic monitoring, which we kind of take for granted as part of the Chrome DevTools. Those are actually standalone protocols, right? And so Charles Proxy, I don't know if anybody's used it before. You said you do a lot of network stuff, came out totally not related to the browser, but it did allow you to intercept and debug through all the network traffic that happens on your computer.

[00:03:59]
There were more cool things like DOMi me, DOM inspector, which I never knew about all before Firebug. Everything else stays the exact same, but I just missed a bunch of stuff. So HTTP support and a bunch of these cool experiments, and I posted this to blue sky, feeling very proud of myself.

[00:04:15]
And then people got even more angry on blue sky. So I missed a lot more things, which I just wanna cover quickly to give people credit for what's due. I didn't know this, Microsoft actually beats Mozilla having the first consolely script debugger tool. A tool I never heard about called Microsoft Script Debugger, which is a whole separate windows application that you had to load that would allow you to kind of console log out things I had no idea.

[00:04:39]
We're talking 1998, Venkman, Charles Proxy, DOMi all that stuff is cool. Firefox also had a web developer toolbar, which I actually did use, but I forgot about. So instead of being an app inspector, is this really cool toolbar back when web was fun, which would have all these different buttons where you could see all the scripts and things like that.

[00:04:56]
YSlow independently launched their first page analyzer, I don't know if anyone's used it before. But you put in your URL, and it runs a bunch of tests on it and tells you know way precursor to lighthouse. Webkit launched their web inspector very early on, I didn't know that.

[00:05:14]
Google, this company called Dynatrace made the first like Ajax editor, or remember when synchronous JavaScript like Google Maps first came out. They made this Ajax thing where you could see what called what, all this cool stuff. Google, I forgot, had a whole page speed analyzer before that predates lighthouse.

[00:05:31]
Source maps the same, performance panel cool. Lighthouse came out in 2016, a lot of this stuff is kinda similar, except in 2018 I did wanna point out. A lot of people said that these new tools, these developer browsers, like Sizzy and Polypane, has started launching in around 2018, 2019, and they definitely belong as part of this story as well.

[00:05:49]
So I hope now that this multipage list will stand as a pretty good testament to the kind of history of DevTool. So we went from only view source and console to all the tools that we have today. But I think an important thing is nobody came off with this big genius work, all these things build on each other.

[00:06:08]
And it was a lot of Microsoft, a lot of Mozilla, a lot of Google, all kind of working together to provide these really great things. This was Firebug, what year was it? What did I say, Firebug is 2006. And this looks pretty much what we've got now, right?

[00:06:23]
I mean, you've got your console and your HTML, then it's got the DOM on the left and the style on the right. And I don't know, this is pretty cool, 2006 to now 2025, and they really nailed it with the way this thing looks. It's very, very nice.