How to view HTML source in Google Chrome

Whether you are a web designer responsible for debugging website source code or just curious about how a website's code looks, you can view the HTML source right in Google Chrome. Learn with TipsMake.com how to do the following article!

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 press Ctrl + U , to view the source of the page in a new tab.

How to view HTML source in Google Chrome Picture 1

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

How to view HTML source in Google Chrome Picture 2

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 press Ctrl + Shift + I An attached frame will open with the web page you are viewing.

How to view HTML source in Google Chrome Picture 3

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

How to view HTML source in Google Chrome Picture 4

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.

How to view HTML source in Google Chrome Picture 5

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

How to view HTML source in Google Chrome Picture 6

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.

How to view HTML source in Google Chrome Picture 7

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.