How blockchain hides it s HTML source

Question

When you navigate to blockchain website,

You will notice that if you click view-source on the page, it will show HTML context different than that when you inspect-element. My question is, how are they doing this?

I understand they are using .pug templates from AngularJS framework. But how does my browser know where to read them from if they are not loaded from the client-(browser)-side?

Answer 1

When you click View Source, you see what the server sends back. Many pages do not send back a full HTML page, instead some skeleton HTML and add the rest of the functionality via JavaScript When you Inspect Element, you're viewing the browser's representation of the DOM, which includes any manipulations done via JavaScript. For a visual explanation, see this article on css-tricks: https://css-tricks.com/dom/