View Webpage Source Code HTML, CSS, JavaScript in Google Chrome

Learning is fun and learning about a webpage you like on the internet should add more fun. Did you ever stunned with an element on a webpage and interested in finding out how it was created? You don’t need to look for your HTML or CSS books for that!!! Modern browsers like Chrome offers very easy and potential tools to analyze a web page. This is a practical skill much needed for analyzing the anatomy of a webpage. Though the primary objective of these tools are to troubleshoot your own, design it can also be used to understand how experts are designing their content so that you can learn the concepts. In this article let us discuss step by step illustration of viewing the source code HTML of a webpage using Google Chrome web browser.

View Webpage Source Code HTML, CSS, JavaScript in Google Chrome

We cover the following topics in this article:

  1. Various components of a webpage
  2. View source code HTML, inline and internal CSS
  3. Viewing external stylesheets on a webpage
  4. Chrome shortcut to view page source
  5. Using developer tools
  6. Getting mobile CSS
  7. Finding pretty print view of minified CSS and JavaScript
  8. Editing webpage online

Let us discuss each topic in detail in the following sections.

1. Components of a Webpage

A webpage consists of the following parts in general:

  • Page content – Text, images, videos, etc. marked up with HTML.
  • Alignment and visual look – Generally controlled with CSS.
  • Scripts – triggers action either at client or server side.

The CSS can be used in three different ways on a webpage:

  • Inline styles – affecting the visual look of an individual element.
  • Internal styles – affecting all elements on a page.
  • External stylesheets – affecting all elements on a website.

You can learn how order of CSS styles will affect the look of a webpage. Scripts can also be used in different ways similar to CSS. The webpage source code contains all of these components and you can view them in different ways.

2. Viewing HTML, Inline and Internal CSS Styles

In order to view the HTML content, inline and internal styles of a webpage, open the webpage in Chrome browser. Right click any place on the page and select “View Page Source” option as shown in the picture below:

View Page Source in Google Chrome
View Page Source in Google Chrome

Note: If you right click inside an iframe, browsers will show “View Frame Source” option instead of “View Page Source“.

This will open a new window which will show the marked up HTML content and styles of each elements used on that webpage. Some sites will show you pretty clear source view but most of the recent sites will show the source code without line breaks and spaces. This is a minified and compressed version of the source code, nowadays almost all websites use this format to reduce the size and improve the page loading speed.

As you can see in the below screenshot, Chrome shows all the source code in single line without breaks and spaces.

Minified Source Code Viewed in Chrome
Minified Source Code Viewed in Chrome

3. Viewing External Stylesheets

The most popular and recommended way of using CSS is to link external stylesheets to the HTML content. In order to find out the external stylesheets used on a webpage, look for the “link” tags on the source code. Click on the links ending with “.css” to see all the style elements defined in the stylesheet.

Stylesheet Links in a Page Source
Stylesheet Links in a Page Source

A website can use an external stylesheets in different format. Most of the times the CSS files will end with version number or additional text like “.css?Ver1.3”. Sometimes the minified version of the CSS file ending like “.min.css” may also be used for fast page loading.

Though the links are showing as relative on the source code, clicking on it will open up the source stylesheet with absolute URL (complete URL with domain name).

4. Chrome Shortcut to View Page Source Code

You can view any page’s source code directly from the Chrome browser’s address bar by adding the prefix “view-source:” to any page URL. This way you can even view the source code of right click protected pages also.

view-source:webpage URL

The entered URL will be automatically redirected to fetch the content, if the page has proper 301 redirect. For example, entering “view-source:yoursite.com”, can be automatically redirected to “view-source:https://www.yoursite.com”.

5. Viewing Source Code with Developer Tools

The above explained method will provide the source HTML / CSS code without linking to an individual element present on the webpage. It is a difficult task to find out the styles used for any particular element with the source CSS code view.

Similar to other browsers, Google Chrome offers developer tools in order to access the CSS code linked to any particular element on a webpage. Right click on any element on a webpage and choose “Inspect element” or “Inspect” option to open the developer console at the bottom of a webpage as shown in the below picture. You can also open developer console from the menu path “Settings > More tools > Developer tools“.

Developer Tools in Google Chrome to View Page Source
Developer Tools in Google Chrome to View Page Source
  1. Right click on an element and choose “Inspect” option.
  2. View HTML and inline styles under “Elements” tab.
  3. View external styles under “Styles” section.
  4. Click on the “mobile” icon to view the site on mobile devices and check the corresponding source HTML / CSS for mobile content.

The console is divided into two parts with various tabs available under each section. The left side portion displays the HTML content of a page under “Elements” tab and the right side portion shows the CSS under “Styles” tab. Clicking on any CSS links will open the style sheet in left portion under “Sources” tab.

In order to view the CSS code of any particular element, choose the “Arrow Box” on top left corner (find lens at the bottom on Windows platform) of the console and click on any element which will be highlighted on mouse hover. This will automatically show the CSS code linked to the chosen element.

6. Viewing Mobile CSS

Since the styles for an element on desktop and mobile devices may vary, developer console offers an option to toggle the display to most of the popular devices like iPhone, iPad, Samsung Galaxy and Google Nexus. Once the required device is chosen from the dropdown, the corresponding CSS codes available on that page for that device are displayed.

Viewing Mobile CSS in Chrome
Viewing Mobile CSS in Chrome
  1. Click on the toggle device toolbar button.
  2. Choose the device from the dropdown or click on the “Edit” option to add your own device not available in the default list. You can check the device dimension of the selected device.
  3. Increase or decrease the percentage to adjust the browser display.
  4. Click on the “Rotate” button to toggle between portrait and landscape views.
  5. Check the preview of your selection. Right click on the element you want to view the mobile source and click on the “Inspect” option.
  6. Change the element to view the source. Hovering over the HTML code will highlight the corresponding element on the preview browser pane.
  7. Find the source CSS code of the selected element. The mobile CSS should start with “@media” rule. If there is no “@media” rule then the general CSS will be applied on mobile devices also.

7. Pretty Print View of Minified CSS and JavaScript Files

Nowadays it’s common to use minified versions of CSS and JavaScript files on websites. This will remove unnecessary comments, spaces, line breaks and makes the file as .min.css or .min.js. Also the caching mechanism used on the website does similar space removal. Though all these are done for improving the page speed, this makes the CSS and scripts unreadable for those looking the page source. Chrome resolves this problem by offering “Pretty Print” button. Clicking on the “Pretty Print” button will restore the minified files to a readable version so that you can easily go through it.

Here is an example of how the minified script looks on the developer console. View the linked style sheet or script under “Sources” tab. Click on the double bracelet brackets {}.

Enable Pretty Print Format Option in Chrome
Enable Pretty Print Format Option in Chrome

You will see the pretty print view of the script as below:

Viewing Pretty Print View of CSS and Scripts
Viewing Pretty Print View of CSS and Scripts

Note: Some webpages prevent right clicking to avoid content copy, in that case you can access page source using developer console menu option in Chrome.

8. Modifying Live and Previewing Changes Online

The biggest advantage of Chrome developer console is to play around on the live page and preview the changes directly on the browser. You can directly change or add CSS style in developer console to see the effect on a live page. For example, you can change the “font-size” of the “body” element and see the font size change is aligned appropriately. This is very useful option and saves lot of time without affecting real user experience otherwise you may need to change on a live site on iteration basis to find the suitable style.

Also the color picker is one of the favorite of web developers. You can change the colors of the elements online and preview instantly. You can copy the RGB or HEX color codes and use on your design like a pro.

Modifying Live Colors on Webpages

Right click on of the HTML element and edit directly using “Edit as HTML” option to add or delete content online.

Edit HTML Source Code Live in Chrome
Edit HTML Source Code Live in Chrome

Learn more on how to view HTTP response structure on Chrome developer console.

Final Words

We hope this article helped you to understand how to view source code in Chrome. Remember, viewing source code is very generic action and any user can do this. But using developer console needs you to invest lot of time in learning. Also Chrome updates the features on every version which makes the learning process continuous. But this should be very interesting and fun for understanding and troubleshooting web designing concepts.

Editorial Staff at WebNots are team members who love to build websites and share the learning with webmasters community. Follow us on Facebook and Twitter.

1 thought on “View Webpage Source Code HTML, CSS, JavaScript in Google Chrome”

Leave your response.

  1. Great article, it help me to get a better understanding on what actually looking – when I view the source code. Also, now I can tell the difference between the HTML, CSS and Scripts ; difference between view source and inspect element

    Reply

Leave a Comment