Why do elements show in the chrome developer tools and not in page source

Date

chrome-devtools

The Chrome Developer Tools show the current state of the Document Object Model (DOM) and the resources loaded by the web page, which can be different from the initial HTML source code.

When you load a web page in a browser, the browser first downloads the HTML source code, which includes references to CSS files, JavaScript files, and other resources. The browser then parses the HTML and creates a DOM tree, which represents the structure of the web page. The DOM tree can be modified by JavaScript code, and new elements can be added dynamically.

The Chrome Developer Tools display the current state of the DOM tree, which may include elements that were added or modified by JavaScript code after the page was initially loaded. The View Source option, on the other hand, displays the original HTML source code that was downloaded by the browser.

Therefore, if you don’t see an element in the page source but you see it in the Chrome Developer Tools, it’s likely because the element was added or modified by JavaScript code after the initial HTML was downloaded.

More
articles

Virtual personal assistant from Los Angeles supports companies with administrative tasks and handling of office organizational issues.