About the difference between inspecting elements and viewing the source code of a web page

I don’t know if you have noticed that when we open any web page with Chrome browser, there are two very similar options when we right-click on the page:

It is to view the source code of the web page and inspect (inspect elements).

I always thought there was no difference between these two options, but since Chrome lists these two options, there must be a reason for it.

Let's take a look at a simple page:

The display effect on the web page is as follows (most of the blank space is deleted to compress the image size):

We review the elements

You will find that there is an extra sentence in the <p></p> tag.
However, in the source code of the web page, there is no such sentence in the <p></p> tag:

This sentence is dynamically generated by JS.

Therefore, there is a slight difference between inspecting elements and viewing the source code of a web page. This difference can be said to be the difference between source code and DOM. When we inspect elements, we are actually viewing the DOM. After the DOM has been rendered, what we see when we view the source code of the web page is the unparsed source code. The above is the full content of this article. I hope it can be of some help to your study and work.