If you’re a developer today, you likely take advantage of built in tools for web debugging every day. They came from the smallest places, and it took years to get them where they are today.
The days of fly-by-the-seat-of-your-pants debugging were over. Web debugging and monitoring was all grown up.
It was a transformative moment for the web, but it was also a long time coming. In fact, being able to debug the languages of the web can trace its roots back to the earliest days of the web.
View Source is as old as the web itself. Go to any page on the web and find View Source in your toolbar and you will be magically transported under the hood of a website. A new window will appear that displays that page’s code, the raw HTML and CSS.
The ability to view source was available in some of the earliest web browsers. If not for that simple tool, many developers would have had no way to break into web development themselves. By making any webpage ostensibly open by default, web developers were able to get their start simply by hopping from page to page and taking a look at the code directly. It also became one of the earliest ways for developers to verify changes or issues on their site.
For instance, some of the earliest HTML debuggers and validators used the fundamentals of view source to identify potential problems with the way markup was written. Tools that became known as DOM inspectors took this even further. Aardvark, first released in 2005, let you open up a webpage, highlight any element on the page, and instantly see the HTML and CSS associated with that element. It was phenomenally useful for designers attempting to trace the source of their webpages.
In 2004, web practitioners began popularize a new way of thinking about the web. The Web, it was said, had been in read-only mode for over a decade. That was Web 1.0. The web was now entering a new phase: Web 2.0. A web come alive with interactivity and real-time applications.
These tools were being worked on. Throughout 2005, Firebug and Web Inspector were in active development and testing. When they were released in early 2006, they were more a product of the projects that had come before them than entirely new pieces of software. Their largest advantage was that they combined everything into a single package.
Web Inspector, on the other hand, put a greater focus on View Source derived tools. It let you easily view any CSS styles associated with the markup that you were looking at with simple tools for modifying them. It also had one handy feature developers would come to rely on. Hover over any part of a page, right click, and select “Inspect Element” and you that part of the webpage’s code would be instantly brought up in the DOM inspector. It was a simple shortcut, but one that made things infinitely easier.
Over time, the tools adopted techniques and features from one another. Web Inspector, as part of the Webkit project, was open source by default. By the end of 2006, after a few upgrades to the software, Hewitt decided to make Firebug open source as well. With a global community of developers, both tools grew quickly. Within a couple of years, they had become stable software with frequent new features and updates.
For developers experimenting with Web 2.0, they became the standard. Browsers largely have picked up the flag themselves, embedding these kinds of developers tools directly into the browser. And the web moved forward just a little more.