/ How to

How To View Page Source Code and HTML in Google Chrome Browser

The page source code allows you to see the underlying HTML, CSS, and JavaScript that constructs a webpage. Viewing the page source is useful for web developers, designers, and anyone who wants to inspect a page to understand how it works or troubleshoot issues.

Google Chrome makes it easy to view and inspect page sources. This guide will show you multiple methods to access the page source code in Chrome.

Use the Keyboard Shortcut

The fastest way to view the page source is to use the Ctrl+U (Windows/Linux) or Command+U (Mac) keyboard shortcut when on the page you want to inspect.

To view page source using a keyboard shortcut:

  • Navigate to the webpage in Chrome.
  • Press Ctrl+U (Windows/Linux) or Command+U (Mac) on your keyboard.
  • The page source code will open in a new tab under the “Source” title.

This keyboard combination works on any page in Chrome and immediately shows the raw source code used to display the page.

Use the Right-Click Context Menu

You can also access the page source from the right-click context menu:

To view page source from the right-click menu:

  • Navigate to the webpage in Chrome.
  • Right-click anywhere on the page.
  • Select View page source from the menu.

This will open the source code in a new tab just like the keyboard shortcut method. Using the right-click menu makes it easy to access the source without memorizing a keyboard combo.

Use the Main Chrome Menu

The Chrome main menu provides another way to view a page’s source HTML:

To view page source from the main Chrome menu:

  • Navigate to the webpage in Chrome.
  • Click the three-dot menu button in the top right and select More tools > Developer tools. This will open the Developer tools panel.
  • On the top of the panel, click the Elements tab.
  • Right-click on any element on the left DOM tree and choose View source from the menu.

This method opens the formatted source in the Developer tools panel which provides syntax highlighting instead of a raw code tab. You can expand and inspect page elements here.

Inspect Specific HTML Elements

The Developer tools panel in Chrome allows drilling down into specific HTML elements:

To inspect an element’s source code:

  • Follow the instructions above to open Developer tools.
  • Click the Elements tab.
  • Hover over different parts of the rendered webpage in the left panel.
  • As you hover, the corresponding HTML will highlight in the DOM tree view.
  • Right-click on any highlighted element and choose Inspect to view the source code for just that part of the page.

Inspecting individual page elements makes it easy to pinpoint the source behind headers, images, links, and any other components that make up the page.

View CSS and JavaScript Sources

In addition to the HTML source, you can view the CSS and JavaScript sources from the Developer tools:

To view CSS and JavaScript sources:

  • Open Developer tools on the webpage (see instructions above).
  • Click on the Styles tab to view the CSS files and stylesheets.
  • Click on the Sources tab and expand the left folder tree to view all external and internal JavaScript files loaded on the page.

This allows inspection of styling rules, scripts, events, and other code powering the page beyond just the HTML elements.

Save a Copy of the Source Code

If you need to save a copy of the page source code for reference or testing, you can save from the Developer tools:

To save the page source code:

  • Follow the steps above to open the page source.
  • Right-click anywhere in the source code panel.
  • Choose Save as to save a copy of the code as a HTML file on your local computer.

Now you have a complete HTML copy of the webpage to reference offline.

Other Tips for Viewing Source Code

Here are some additional tips for viewing and understanding page source code in Chrome:

  • Search within the source code by pressing Ctrl/Command + F and entering a term.
  • Pretty print minified source code using the {} button in the bottom left while viewing source.
  • Reformat the DOM tree in Elements panel using the {} button for easier reading.
  • Make the Elements or Source panel full screen using the rectangular icon next to elements search.
  • Undock Developer tools into a separate window to compare browser view side-by-side with source.
  • Use the Console tab to test entering JavaScript commands and seeing output.

Viewing and understanding a webpage’s underlying source code is a useful skill for any curious web user or developer. Master these techniques in Google Chrome for inspecting page markup and styling on any site you visit.

Frequently Asked Questions

Here are answers to some common questions about viewing page source in Chrome:

How do I view page source on my phone?

On Android phones, follow the same right-click menu steps and select “Inspect” to view the code in Chrome DevTools. On iPhone, request the desktop site first, then view source.

Does viewing source allow changing the page?

No, viewing a page’s source code is read-only – you cannot edit the code or alter the active page. DevTools does allow testing changes locally to understand how code impacts the page.

What languages make up page source?

Page source consists mainly of HTML, CSS, and JavaScript. Other languages like WebAssembly may also be present on some sites. Images, videos, and other media are viewed as embedded elements.

Can I view a site’s server-side code?

No, server-side code like PHP, Ruby, Python, etc. runs on the web server and is not exposed in page source. Only the final rendered client-side HTML/CSS/JS is viewable.

What are some uses for viewing source?

Debug issues, understand code techniques for development, copy snippets to reuse, check SEO meta tags, see unlinked pages, inspect security and analytics scripts, and more. Understanding page source unlocks greater control over your browsing experience.

Related Posts