Categories
Interior

How to view the html source in google chrome

If you are a programmer or just a tech enthusiast, you must have wanted to see the code that makes up a website. Earlier, this feature was restricted to just the developers, who received the HTML source code from the parent company directly, but today, this feature is available to everyone, thanks to Google Chrome.

The Google Chrome browser is filled to the brim with features and functionalities, that we may not even know, exist. One such feature is the ‘Page Source’ feature. This allows you to browse to the web page you need, and view its source code directly. If you are a programmer, you can even debug the source code of your own web page if needed.

In this tutorial, we will show you how to view the HTML source in Google Chrome.

Table of Contents

Open the Google Chrome browser on your PC/Laptop.

How to view the html source in google chrome

Browse to the web page you want to view the HTML source.

How to view the html source in google chrome

Right-Click anywhere on the web page to reveal a drop-down menu.
Click on the ‘View Page Source’ option from the menu.

How to view the html source in google chrome

You will now see the HTML source code of the web page you are currently browsing. Once this is on screen, you can go through it to see how the web page works, or if you are a developer, you can even debug any errors that you may be experiencing with the web page.

If you do not have the Google Chrome browser on your PC, and you want to give it a shot, you can download it by clicking on this link.

Brady Gavin has been immersed in technology for 15 years and has written over 150 detailed tutorials and explainers. He’s covered everything from Windows 10 registry hacks to Chrome browser tips. Brady has a diploma in Computer Science from Camosun College in Victoria, BC. Read more.

How to view the html source in google chrome

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.

How to view the html source in google chrome

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

How to view the html source in google chrome

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.

How to view the html source in google chrome

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

How to view the html source in google chrome

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.”

How to view the html source in google chrome

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

How to view the html source in google chrome

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.

How to view the html source in google chrome

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.

If you are a programmer or just a tech enthusiast, you must have wanted to see the code that makes up a website. Earlier, this feature was restricted to just the developers, who received the HTML source code from the parent company directly, but today, this feature is available to everyone, thanks to Google Chrome.

The Google Chrome browser is filled to the brim with features and functionalities, that we may not even know, exist. One such feature is the ‘Page Source’ feature. This allows you to browse to the web page you need, and view its source code directly. If you are a programmer, you can even debug the source code of your own web page if needed.

In this tutorial, we will show you how to view the HTML source in Google Chrome.

Table of Contents

Open the Google Chrome browser on your PC/Laptop.

How to view the html source in google chrome

Browse to the web page you want to view the HTML source.

How to view the html source in google chrome

Right-Click anywhere on the web page to reveal a drop-down menu.
Click on the ‘View Page Source’ option from the menu.

How to view the html source in google chrome

You will now see the HTML source code of the web page you are currently browsing. Once this is on screen, you can go through it to see how the web page works, or if you are a developer, you can even debug any errors that you may be experiencing with the web page.

If you do not have the Google Chrome browser on your PC, and you want to give it a shot, you can download it by clicking on this link.

How to view the html source in google chrome

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.

How to view the html source in google chrome

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

How to view the html source in google chrome

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.

By Stella | Follow | Last Updated November 24, 2020

Summary :

How to view the html source in google chrome

Viewing page source in Chrome is a good way to get some useful design ideas for web pages. In this post from MiniTool Software, we will mainly talk about how to view source code in Chrome in two different ways. We hope it is helpful to you.

Viewing page source is a good method to develop your web design level if you are a member of the web industry. You can get skills from an excellent web page. Also, even you are not a web designer, if you are interested in the page source, you can also view page source to get some information that you can’t see on the web page.

Then, how to view page source? You may ask this question. Google Chrome is the most widely-used web browser all over the world. In this post, we will show you how to view source Chrome.

How to view the html source in google chrome

In this post, we will show you some useful and convenient Google Chrome tips and tricks with which you can do your work much faster.

How to View Source Code in Chrome

It is very easy to open and view page source in Chrome. Here is the guide:

1. Open the web page you want to view page source using Google Chrome.

2. Right-click on the page (do not click on a link) and there will be a pop-out menu.

3. Select View page source from the menu. Here, you can see that there is a shortcut for View page source: Ctrl+U. This means that, after you access the target web page, you can press the Ctrl key and the U key at the same time to open and view source Chrome. While, if you are using a Mac computer, you need to press Command + Option + U to open and view page source in Chrome.

How to view the html source in google chrome

4. A new tab will pop up with the source code for that web page.

How to view the html source in google chrome

Those are the source codes you want to view in Google Chrome.

How to view the html source in google chrome

Using keyboard shortcuts for web browsers can save a lot of time for you. We will show you some common keyboard shortcuts for web browsers in this post.

Advanced: Developer Tools

To dig more information on the source code of the web page in Chrome, you can also use the Developer tools in Chrome. These tools allow you to see elements, console, sources, network, and more information on that web page.

Here are the things you should do:

1. Open the target web page using Chrome.

2. Click the three dots menu that is at the top right side of the interface.

3. Go to More tools > Developer tools.

How to view the html source in google chrome

4. A new window will pop up from the left side of the web page where you can see more information on the web page. You can click the top menu bar to switch among these options.

How to view the html source in google chrome

In the Element section, when you move the cursor on the CSS, the Developer tools can highlight the select element in the corresponding HTML page. This design is especially useful when you want to get the information on a specific piece of a crafted web page.

Is It Legal to View Page Source in Chrome?

Reading here, you might ask this question: is it legal to view page source in Google Chrome? After all, these sources are codes from others.

We believe that many web designers have done these things. It is legal to view page source in Chrome. Using these codes to build a similar page is also OK. But, it is not legal to keep the codes intact in your work. You can use them for reference, but you can’t plagiarize.

  • Facebook
  • Twitter
  • Linkedin
  • Reddit

ABOUT THE AUTHOR

How to view the html source in google chrome

Position: Columnist

Stella has been working in MiniTool Software as an English Editor for more than 4 years. Her articles mainly cover the fields of data recovery including storage media data recovery and phone data recovery, YouTube videos download, partition management, and video conversions.

Published on Monday, April 13, 2015

How to view the html source in google chrome

Technically, I’m a writer

  • Open resources
    • Open resources in the Network panel
    • Reveal resources in the Network panel from other panels
  • Browse resources
    • Browse resources in the Network panel
    • Browse by directory
    • Browse by filename
    • Browse by file type

This guide teaches you how to use Chrome DevTools to view a web page’s resources. Resources are the files that a page needs in order to display correctly. Examples of resources include CSS, JavaScript, and HTML files, as well as images.

This guide assumes that you’re familiar with the basics of web development and Chrome DevTools.

Open resources #

When you know the name of the resource that you want to inspect, the Command Menu provides a fast way of opening the resource.

Press Control + P or Command + P (Mac). The Open File dialog opens.

How to view the html source in google chrome

Figure 1. The Open File dialog

Select the file from the dropdown, or start typing the filename and press Enter once the correct file is highlighted in the autocomplete box.

How to view the html source in google chrome

Figure 2. Typing a filename in the Open File dialog

Open resources in the Network panel #

How to view the html source in google chrome

Figure 3. Inspecting a resource in the Network panel

Reveal resources in the Network panel from other panels #

The Browse resources section below shows you how to view resources from various parts of the DevTools UI. If you ever want to inspect a resource in the Network panel, right-click the resource and select Reveal in Network panel.

How to view the html source in google chrome

Figure 4. The Reveal in Network panel option

Browse resources #

Browse resources in the Network panel #

How to view the html source in google chrome

Figure 5. Page resources in the Network Log

Browse by directory #

To view a page’s resources organized by directory:

Click the Sources tab to open the Sources panel.

Click the Page tab to show the page’s resources. The Page pane opens.

How to view the html source in google chrome

Figure 6. The Page pane

Here’s a breakdown of the non-obvious items in Figure 6:

  • top is the main document browsing context.
  • airhorner.com represents a domain. All resources nested under it come from that domain. For example, the full URL of the comlink.global.js file is probably https://airhorner.com/scripts/comlink.global.js .
  • scripts is a directory.
  • (index) is the main HTML document.
  • iu3 is another browsing context. This context was probably created by an element embedded in the main document HTML.
  • sw.js is a service worker execution context.

Click a resource to view it in the Editor.

How to view the html source in google chrome

Figure 7. Viewing a file in the Editor

Browse by filename #

By default the Page pane groups resources by directory. To disable this grouping and view each domain’s resources as a flat list:

Open the Page pane. See Browse by directory.

Click More Options and disable Group By Folder.

How to view the html source in google chrome

Figure 8. The Group By Folder option

Resources are organized by file type. Within each file type the resources are organized alphabetically.

How to view the html source in google chrome

Figure 9. The Page pane after disabling Group By Folder

Browse by file type #

To group resources together based on their file type:

Click the Application tab. The Application panel opens. By default the Manifest pane usually opens first.

How to view the html source in google chrome

Figure 10. The Application panel

Scroll down to the Frames pane.

How to view the html source in google chrome

Figure 11. The Frames pane

Expand the sections that you’re interested in.

Click a resource to view it.

How to view the html source in google chrome

Figure 11. Viewing a resource in the Application panel

Browse files by type in the Network panel #

How to view the html source in google chrome

Figure 12. Filtering for CSS in the Network Log

Last updated: Monday, April 13, 2015 • Improve article

Chris Hoffman is Editor-in-Chief of How-To Geek. He’s written about technology for over a decade and was a PCWorld columnist for two years. Chris has written for The New York Times, been interviewed as a technology expert on TV stations like Miami’s NBC 6, and had his work covered by news outlets like the BBC. Since 2011, Chris has written over 2,000 articles that have been read nearly one billion times—and that’s just here at How-To Geek. Read more.

How to view the html source in google chrome

Web pages are just documents your web browser displays. But what if you could type directly on any web page to modify it? You can, and you don’t need a browser extension—it’s a feature built into every modern browser.

This feature takes advantage of the “document.designMode” feature, which you can enable via your web browser’s JavaScript console. It was recently highlighted by Tomek Sułkowski on Twitter, but it’s so cool that we have to share it with our readers.

That feeling when you first discovered `document.designMode` pic.twitter.com/bxA1otzCjN

You could use this feature to clean up a web page before printing it, test how changes to a web page will look, or even just prank people. It’ll be just like editing a Word document—no messing with HTML required.

To activate this feature, visit a web page and then open the developer console. To open the console in Google Chrome, click menu > More Tools > Developer Tools or press Ctrl+Shift+i.

While we’re using Chrome as an example here, this feature works in other modern browsers, too. Here’s how to open the console in other browsers:

  • In Mozilla Firefox, click menu > Web Developer > Web Console or press Ctrl+Shift+K.
  • In Apple Safari, click Safari > Preferences > Advanced and enable “Show Develop menu in menu bar.” Then, click Develop > Show JavaScript Console.
  • In Microsoft Edge, click menu > More Tools > Developer Tools or press F12 and then click the “Console” tab.

How to view the html source in google chrome

Click the “Console” tab at the top of the Developer Tools panel. Type the following into the console and press Enter:

How to view the html source in google chrome

You can now close the console, if you like, and edit the current web page as if it was an editable document. Click somewhere to insert your cursor and type text. Use the Backspace or Delete keys to remove text, images, and other elements.

How to view the html source in google chrome

This just changes how the web page appears in your browser. As soon as you refresh the page, you’ll see the original once again. If you go to another web page or tab, it won’t be in design mode until you open the console and type this line once again.

You can even go back into the console and run the following command to turn design mode off:

The web page won’t be editable anymore, but your changes will be preserved until you next refresh the page.

The Idiosyncracies of Google Chrome – View Source

I am not required to make our intranet application Chrome-compliant; however, several other developers prefer to roll in Chrome, and I prefer the browser myself. It is fast and lightweight. I prefer all the development tool add-ons in Firefox when I need to do some deep troubleshooting, like Web Developer and Firebug, but they weigh the browser down on initial load. Chrome, on the other hand, just pops right up and I can jump right into surfing; however, Chrome, I am learning, is a very different animal in some ways for surfing and developing for the Web.

View Source

When you right-click on a web page and select “View Source” in IE or Firefox, you recieve a snapshot of the HTML script behind the page you are currently viewing. Not so with Chrome, which, it took me some time to figure out, submits an HTTP request to the host for the source code. I’m not sure why this is neccessary, as the source code is already loaded, right there behind the page currently being viewed, but that’s how it works.

I found this comment on a post about Chrome’s seemingly stunted “View Source” functionality:

The way chrome behaves when clicking “View page Source” is strange. Let’s say you issue a POST request to one index.php page, on that page want to see the source code. Chrome starts another request to retrieve the document search using GET; with absolutely no regards to the current posted data. Basically you simply get another document from the one you want. Weird to say the least!

Weird to say the least, outright FAIL from a web development standpoint. How am I to see how my dynamically-built web page is writing out source script, if I can’t see what the source looks like built with the submitted POST variables? I have JavaScript compatibility issues in my site that are specific to Chrome, and it’d be nice to see that chrome is getting the HTML I think I’m writing without having to view source in FF or IE.

Well, it turns out that Chrome goes one better than “View Source,” incorporating functionality I could previously only get in FF with add-ons.

Inspect Element

Right-clicking within a web page in Chrome and selecting “Inspect Element” will open the Inspector console, a traversable tree representation of the document object model focused on the selected node:

Why put this functionality behind “Inspect Element” and not “View Source?” Because “View Source” presents the source code that Google Chrome recieved from the host, while “Inspect Element” shows what the DOM looks like at the present moment. This is an important distinction, because Chrome, like most browsers, attempts to correct malformed XHTML. So when you view source, you are seeing the HTML as it was sent, when you Inspect Element, you are seeing the HTML as Google Chrome has reformated it.

For instance, the following XHTML in “View Source:”

Hello

World!

Is rendered in “Inspector” as:

Hello

World!

This is a huge feature for a baseline web browser. It appears to be just as sophisticated as Web Developer for Firefox too, highlighting objects on the page as I hover over their source code in the Inspector, and providing the ability to expand and collapse node trees as I need to navigate the DOM. It also has an error log which handles malformed XHTML as well as JavaScript errors. It’s especially useful for troubleshooting HTML dynamically modified with JavaScript, since you can modify an element with JavaScript, such as by cloning it or with an AJAX response, and then see the resulting HTML.

What a comprehensive solution, and the browser still opens with a snap of my fingers! Suddenly I am in love with Google Chrome again!

Additional Notes:

  • I still have no idea why Chrome has to make an HTTP request to get the XHTML source. It could be argued that this functionality is a “feature,” protecting the page source from prying eyes that haven’t submitted the proper POST variables to access it. Of course, those variables are available on the preceeding web page, and may be submitted through other means… and the source is available with Inspect Element–Oh, I dunno. I’ll stop thinking out loud now.
  • One additional quibble with Chrome’s “View Source:” Firefox presents the HTML in a nifty syntax-highlighted format for easy reading in its custom viewer, while IE opens the file in whatever prefered text-editor you have installed. I like IE’s strategy, since I can open the HTML in UltraEdit and go to town with that software’s arsenal of editing features, but Firefox’s built-in text-editor has lots of sweet features too, like reloading, syntax highlighting, and being able to save the source off to your local drive. Chrome’s “View Source” is view-only, so I have to CTRL-A, CTRL-C, and CTRL-P it into UltraEdit.
  • Okay, I’m done whining now.

    Free JavaScript Book!

    Write powerful, clean and maintainable JavaScript.

    This popular article was updated in 2020. For more on improving your development workflow with tools, read Developer Essentials: Tools on SitePoint Premium.

    A web developer’s typical day involves creating HTML web pages with associated CSS and JavaScript in their favorite editor. The workflow:

    1. Open the locally hosted page in a browser.
    2. Swear.
    3. Open DevTools to investigate the layout and functionality problems.
    4. Tweak the HTML elements, CSS properties, and JavaScript code to fix the issues.
    5. Copy those changes back into the editor and return to step #1.

    While tools such as live reloading have made this process easier, many developers continue to tweak code in both DevTools and their editor.

    However, it’s possible to open and edit source files directly in Chrome. Any changes you make are saved to the file system and updated within the editor (presuming it refreshes when file changes occur).

    Step 1: Launch Developer Tools

    Open Chrome, load a page from your local file system/server and open Developer Tools from the More tools menu or press F12 or Ctrl/Cmd + Shift + I depending on your system. Navigate to the Sources tab to examine the file explorer:

    How to view the html source in google chrome

    You can open and edit CSS and JavaScript files in this view, but any changes will be lost as soon as you refresh the page.

    Step 2: Associate a Folder with the Workspace

    Click the Filesystem tab, then click + Add folder to workspace. You’ll be prompted to locate your work folder and Chrome will ask you to confirm that you Allow access. The explorer shows files on your system which can be opened with a single click:

    How to view the html source in google chrome

    Step 3: Edit and Save Your Code

    You can now jump in and edit your code. Unsaved edits are marked with an asterisk on the file tab.

    CSS changes are instantly updated but, in the case of HTML and JavaScript, you’ll normally need to press Ctrl/Cmd + S to save the file to the file system then refresh the browser.

    How to view the html source in google chrome

    Note that you can also right-click the file tab and select Save as… to save a copy of the file elsewhere.

    Step 4: Review and Undo Changes

    To review changes, right-click a file tab and choose Local modifications… from the context menu:

    How to view the html source in google chrome

    A diff-like view is shown. The arrow icon at the bottom-left of the pane will undo all changes and revert the file to its original state.

    Chrome’s Developer Tools will never be a full replacement for your favorite editor, but it can be useful when you’re making quick changes or working from another PC where your editor may not be installed.