This started with Netscape. They had a fairly awesome built in web page editor. My guess is to make the web and creating web pages an inclusive experience for all users.
The Netscape had a distribution called Communicator that shipped the browser 'Navigator' alongside a mediocre but serviceable WYSIWYG editor 'Composer'. Other products were included too: an email client, and for a while, a Calendar; the codebase lives on as Mozilla Seamonkey. This was a play towards small businesses, and not an 'Inspect Element' hook.
Meanwhile, integrated devtools started with Chrome in 2008, two years after Firebug was released in 2006. My guess is Chrome wanted to provide a browser experience that was noticeably superior to a variety of demographics, and gain marketshare on merits. Meanwhile, IE began a huge effort to prove that they're not an old dinosaur of a browser holding the web back, but they didn't have easily-installable addons, so they built it in. These factors created pressure on Mozilla [1] to improve their devtools and consider shipping them with the browser.
> Meanwhile, integrated devtools started with Chrome in 2008, two years after Firebug was released in 2006.
I'm very very sure integrated devtools could be traced back to WebKit Inspector Tool[1] in 2006 (with Drosera[2], the JavaScript inspector, being separate application). Then in 2007, the WebKit team rebuilt the Inspector Tool into Web Inspector[3] and merge Drosera into it. Chrome inherited the Web Inspector when it was released in 2008. I even remembered the first few versions of Chrome still has the Mac metal looks (even when running on Windows).
It's already been mentioned; the comment about integrated tools first showing up in Chrome was off.
But Safari wasn't the first either. WebKit Inspector was built under Dave Hyatt after being lured to Apple. It was meant to bring the tools available to Mozilla developers over to WebKit/Safari. Joe Hewitt's DOM Inspector was checked in to the Mozilla codebase in 2001, and Robert Ginda's Venkman JS debugger in 2003.
(After leaving Netscape, Hewitt took a second run at integrating both tools' featuresets, and that's where Firebug came from.)
There’s a gap in the middle of your timeline that was filled by DOMi and Venkman. I seem to recall those being built in at one point, although I might be wrong (I wasn’t doing professional front-end dev at that point).
Venkman was built into the Mozilla Suite [1], and it was also made into an addon for Firefox [2] when Firefox was released.
DOMi was built into Firefox since November 2003 if you used the Windows installer's 'Custom' installation and selected the checkbox for inclusion [3], then in Firefox 3 it was removed and made available as an extension [4]. It was also included in the 'Custom' installation of the 'Complete' Mozilla/Seamonkey Suite [3].
But Prototype.js came out in 2005, jQuery in 2006. Ajax the term was coined in 2005 [5][6][7]. We don't talk about the dark days before then.
Hrm... my apologizes, I stand corrected then. I started getting into web development after Netscape was, for all intents and purposes, dead and IE6 was king.
Sure, but Netscape Composer was a WYSIWYG editor as well, not a web page inspector/debugger like Firebug. Honestly, there was not much to inspect or debug in web pages at the time...
The Netscape had a distribution called Communicator that shipped the browser 'Navigator' alongside a mediocre but serviceable WYSIWYG editor 'Composer'. Other products were included too: an email client, and for a while, a Calendar; the codebase lives on as Mozilla Seamonkey. This was a play towards small businesses, and not an 'Inspect Element' hook.
Meanwhile, integrated devtools started with Chrome in 2008, two years after Firebug was released in 2006. My guess is Chrome wanted to provide a browser experience that was noticeably superior to a variety of demographics, and gain marketshare on merits. Meanwhile, IE began a huge effort to prove that they're not an old dinosaur of a browser holding the web back, but they didn't have easily-installable addons, so they built it in. These factors created pressure on Mozilla [1] to improve their devtools and consider shipping them with the browser.
[1] https://news.ycombinator.com/item?id=12042767#12044962