Nextgendaily   Jointservers   Zymernation   Wdphg   Fulfilledinterest.com

How to View the HTML Source in Google Chrome

View Source hero image

Whether you’re a web designer debugging your site’s source code or just curious about what a site’s code looks like, you can view the HTML source right in Google Chrome. There are two ways to view the HTML source: View Source and Inspect using Developer Tools.

View Source Using View Page Source

Fire up Chrome and jump to the webpage you want to view the HTML source code. Right-click the page and click on “View Page Source,” or press Ctrl + U, to see the page’s source in a new tab.

Right-click a page, then click on View Page Source

A new tab opens along with all the HTML for the webpage, completely expanded and unformatted.

The source opens in a new tab

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

Inspect Source Using Developer Tools

This method uses the Developer Tools pane in Chrome and is a much cleaner approach to view the source code. HTML is easier to read here thanks to the additional formatting and the ability to collapse elements you aren’t interested in seeing.

Open Chrome and head to the page you want to inspect; then press Ctrl + Shift + i. A docked pane will open alongside the webpage you’re viewing.

Developer Tools opens as a docked pane in Chrome

Click on the little gray arrow next to an element to expand it even further.

Collapse elements when you click on the gray arrow

If you don’t want to see the full page’s code by default, but instead inspect a specific element in the HTML, right-click that space on the page, then click “Inspect.”

Jump to a specific element when you right-click on it, then click on Inspect

When the pane opens this time, it goes directly to the portion of code that contains that element you clicked.

The tool goes directly to that element

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

Change the dock orientation when you click the menu icon, then click one of the four options


That’s all there is to it. When you finish looking at the code, either close the View Source tab or click the ‘X’ in the Developer Tools pane to return to your webpage.