To debug website issues, you often need to review the HTML code. The problem is when you right click and inspect in Chrome, you are not viewing the code the server originally sent to the browser. What is this code? How do you view the server’s original code? And why view that code anyway?
Let’s start with what that code is that you see when clicking Inspect in Chrome. That code shown in Elements under Chrome DevTools is the client-side rendered code. This is the code as manipulated by JavaScript.
On most websites, JavaScript has made a lot of changes to the HTML code, adding, deleting, or modifying the content. That makes the client-side code very different than the code the server originally sent to the browser.
Google typically can see the client-side code during a crawl of the website. However, there are times when Google can’t see the client-side code. For example, a JavaScript file may not have been loaded correctly during Google’s crawl. This can be a big problem if the JavaScript code is adding or changing content that you need Googlebot to see.
This is why you need to check your website’s client-side code in comparison to the server-side code. What content is only in the client-side code? If there is content only in the client-side code, is Google consistently and accurately finding that content?
To see what the server originally sent, head over to the Network tab in Chrome DevTools. Click on the first file listed on the Network table. This is the page loaded in the browser. After clicking on that file, a new panel will appear. On this panel, click Response. The Response area shows you the HTML the browser received from the server.
You can compare the HTML code in the Response area to the code in the Elements area using a tool like Diffchecker to identify what changes have been made.