By Dan Moren
May 30, 2020 9:41 AM PT
Command performance: View Page Source
Long, long ago, in another lifetime, I worked as a web developer. Before that, I taught workshops on building webpages. Even before that, as a teenager, I tinkered with HTML at the dawn of the web, experimenting with building pages for myself, projects that I did with friends, and online groups I was a part of. And in all that time, one command has continued to be my guiding star: View Source.
Whether it’s “Page Source,” “View Page Source,” “Show Page Source,” or any other variation, it’s no exaggeration to say that View Source is a command that changed my life. I know lots of folks whose experience with the programming languages underlying early computers sent them into careers in software development, but while I dabbled in programming, it was the web that captured all my love and attention.
In more recent browsers, View Source is sometimes hidden away (in Safari, you need to enable the Develop menu in Preferences [greaterthansymbol]gt;gt; Advanced before you can access it), but it’s never really gone. And honestly, when you think about it, it remains one of the coolest ideas ever. Take any page you’ve ever visited on the web—any page—and you can immediately peek beneath the surface and see what makes it tick. To get an idea of just how revolutionary that was, imagine that, with a snap of your fingers, you could see the underlying structure—plumbing, wiring, drainage—of any building you walked past on the street. (Sure would make home buying a lot easier, let me tell you.)
I spent hours poring over the HTML structure of those earliest pages, figuring out how to achieve certain effects, from the ever popular blinking text to organized layouts. (Ahh, tables.) The marvel of HTML’s simplicity was that you could easily dissect a page’s structure and, generally without too much trouble, duplicate it on your own. This is one of the places that the early web really delivered on the ideals of openness that are so often touted by technologists.
While the web did go through a darker period where many sites used opaque technology like Adobe’s Flash, we’ve come back around to truly powerful pages built on fundamentals like HTML, CSS, and JavaScript, all of which are pretty transparent. The tools have gotten better too: that Page Source command used to just show you the flat text of HTML on a page, but now Safari’s is a full-blown development console that lets you do things like dynamically adjust CSS properties on the fly, changing how a page—again, any page—looks, even as you’re viewing it. My personal favorite addition has been the Inspector tool in Safari’s console, which I think of us as kind of like the eyedropper tool, but for a webpage: click it, and hover over items on a page to see more information about them, then click that item to be brought to the corresponding part of the source. Utterly amazing.
I still frequently use View Source to debug display issues on my own site, or to peek at the underlying structure of a page to figure out how an effect is achieved. And as some sites have continued to obfuscate things more and more, it’s occasionally handy to be able to sneak past those measures, with a little know how, and find a particular image or element on a page. It’s one of the technology experiences that, to me, remains truly magical, easily accessible, and just as much of a revelation as it was more than twenty-five years ago.
[Dan Moren is the East Coast Bureau Chief of Six Colors. You can find him on Twitter at @dmoren or reach him by email at dan@sixcolors.com. The latest novel in his Galactic Cold War series of sci-fi space adventures, The Nova Incident, is available now.]