How to View HTML Source in Google Chrome

This updated guide examines How to View HTML Source in Google Chrome and organizes the essential facts, background, and practical takeaways in clear American English.

View the source using View Page Source

Turn on Chrome and go to the site you want to see the HTML source code. Right-click on the page and click View Page Source or pressCtrl+U, to view the source of the page in a new tab.

A new tab opens with all HTML for the internet page, completely expandable and unformatted.

If you are looking for a specific element or part in the HTML source, using the Source View is very tedious and cumbersome, especially if the page uses a lot of JavaScript and CSS.

Check the source using the Developer Tools

This method uses Developer Tools in Chrome and is a much more neat approach to viewing the source code. HTML is easier to read here thanks to the additional format and the ability to collapse the elements you don't want to see.

Open Chrome and go to the page you want to check; then pressCtrl+Shift+IAn attached frame will open with the internet page you are viewing.

Click the small gray arrow next to an element to expand further.

If you don't want to see the full code of the page by default, instead check a specific element in the HTML, right-click on that blank on the page, then click Inspect.

When the frame opens this time, it will go directly to the code that contains the element you clicked.

If you want to change the dock position, you can move it to the bottom, left, right or even bring it to a separate window. Click the menu icon (three dots), then choose to open the dock in a separate window, the left, bottom or right anchor respectively.

That's all it takes. When you're done viewing the code, close the View Source tab or click the X button, in the Developer Tools pane to return to your site.

Hope you are succesful.