Last time there was a little flurry of activity around the concept of “View Source,” I did get the sense that not everyone was on the same page about what that even means. Jim Nielsen:
First, when we talk about “View Source” what precisely are we talking about? I think this is an important point to clarify, as it sometimes goes unsaid and therefore a lot of assumptions sneak into the conversation and we might realize we’re not all talking about the same thing.
There are three things that people might be talking about:
- View source code (the code that generates the HTML delivered over the network)
- View page source (the HTML delivered over the network)
- View runtime source (the living HTML, a.k.a the DOM)
I’ll assign what I think are the values of each are, as slices of a pie chart:
- 10%
- 5%
- 85%
Every major browser ships with built-in DevTools where you can easily peak at the “runtime source.” That’s where the vast bulk of value is to me. If browsers ever talked about removing that, I’m sure we’d all be up in arms. Even for non-developers, the existence of this tool might be the spark that grows baby web developers.
DevTools also provides a way to view the HTML delivered over the network, hence my hardline stance from before:
I literally don’t care at all about View Source and wouldn’t miss it if it was removed from browsers. I live in DevTools, and I’ll bet you do too. It entirely supersedes View Source, as you can quite literally view source inside it if you’d like.
Jim’s post explains the difference between all three types of “viewing source” in great detail. For sites that are built entirely from client-side JavaScript, viewing the HTML over the wire is nearly useless. But if you could see the whole codebase (say if it was open-source on GitHub), there is certainly value there.
Viewing the actual HTML that gets sent over the network is still incredibly useful sometimes when trying to debug networking issues, or applications that do SSR with client side hydration.
That said, in chromium based browsers, I usually get this functionality out of the “sources” tab in devtools instead of the original “view source”, as I’m usually using other tools at the same time.
I personally disagree with the statement that the old “view source” can go away.
When I’m developing there’s situations that I want to understand without the browser having interacted with the Dom at all…
If I have a mangled HTML tag somewhere it will destroy the Dom, flood the console with errors and in the “View source” page you can just see that you missed a forward slash on that closing div tag
I could not disagree more. Browsers are amazing that they focus on being able to render, and render as close to correctly as possible. But I sometimes want to know what I’m actually receiving before it’s massaged into place. Finding malformed markup, looking at a raw document structure, and just doing good old plain text searches are all really valuable. Plus I sometimes want that full page skimming through the markup.
I would concede that I probably stay in the dev tools 95% of the time, but when that 5% needs View Source, there’s nothing better.
To me, “view source” means the command which is literally called “view source” and has the shortcut Ctrl+U in most browsers. I’m surprised anyone would mean anything else by it. Pulling up devtools and looking at the live DOM is not done with the “view source” command.
I find the feature occasionally useful when I want to see the raw code. It’s particularly helpful when hunting for malformed markup somewhere that’s causing devtools to render the live DOM in a screwy way. That situation doesn’t come up much but when it does “view source” is helpful.
The DevTool renders the DOM after processed with JavaScript. You cannot get the actual HTML response as-is even by saving it to local, unless you do “View Source”. For example, try saving JSBin site.
“I live in DevTools, and I’ll bet you do too“
This could not be more wrong. I use devtools extensively, that’s true, but I use “view source” as much as I use devtools. Just because the author doesn’t use it doesn’t mean it should be removed.
On the same boat. Devtools matters a lot more than “Right click + View source”. I hardly remember ever using it in years.