If you’re a web designer debugging a site’s code or just a regular guy who is interested in finding out what the code of a certain site appears like, you can view the HTML source code in Google Chrome. There are two ways by which an HTML source code can be viewed and they are; View Source and Inspect using Developer Tools.
View Source Using View Page Source
Open the Chrome web browser and head to the page on the net whose source code you want to view. While there, right-click on the page and select “View Page Source” or press Ctrl+U on the keyboard to see the page’s source code in a new tab.
A new tab will open and on it the HTML source code for the webpage will be displayed without any formatting and it will be expanded.
If you happen to be looking for a particular element in the source, making use of “View Page Source” will be clumsy mostly if the page makes use of much JavaScript and CSS which brings us to step two.
Inspect Source Using Developer Tools
This procedure employs the Developer Tools panel in Chrome and it is less clouded than using View Page Source. HTML is easier to read here as a result of the formatting and the ability of collapsing elements you don’t want to see. Open Chrome browser, head to the page you want to inspect, press Ctrl+Shift+i. A cropped panel will open on the page you are viewing.
Click on the little gray arrow right after an element if you wish to further expand it.
If you are not interested in seeing the code of the full page, and you only care for a particular element in the HTML, right-click the space on the page and then select “Inspect”.
When the panel opens this time around, it will automatically open the area of the code that the element you clicked is.
If you want the position of the panel to change, you can move it to the left, the right, bottom and you can even open it in a different window. To do this, click the menu icon (the one with three dots), after that you select any option: undock to a separate window, dock to the left, dock to the bottom, dock to the right.
That ends it. Once you’re done looking at the code, close the View Page Source tab or click “X” in the Developer Tools panel to go back to your webpage.
