When the conversation about the value of “View Source” rolls around, the #1 response I hear is along these lines:

No way, Jose! I use View Source all the time! It’s very useful when you want to look at the raw HTML, not the DOM.

Yes, that is useful, and yes, there is a difference. But just because you are looking at DevTools doesn’t mean the DOM is the only thing you can see.

viewsource “View Source” in DevTools design tips
This is Chrome DevTools.
Screen-Shot-2018-08-23-at-8.05.19-AM “View Source” in DevTools design tips
Safari has a Resources tab

There is also a Network tab in DevTools for every browser. That’s where you find a way to look at the document.

Screen-Shot-2018-08-23-at-8.06.20-AM “View Source” in DevTools design tips
Firefox’s Network tab

So, if your concern about losing View Source is that you’d have no possible way to see the document instead of just the DOM, that’s just not true. You can rest assured that you have the same affordance in DevTools.

If your concern is that it’s handier to see the source as a full-window tab with an easy keyboard shortcut, then sure, OK, that’s a reasonable argument to make.

The post “View Source” in DevTools appeared first on CSS-Tricks.