View Source Code in Chrome

So how do you view the source code of a website? Here are the step-by-step instructions to do so using the Google Chrome browser.

Use Chrome’s Developer Tools

In addition to the simple View page source ability that Google Chrome offers, you can also take advantage of their excellent Developer Tools to dig even deeper into a site. These tools will allow you not only to see the HTML, but also the CSS that applies to view elements in that HTML document. To use Chrome’s developer tools:

Over the years, we have had many new web designers question whether it is acceptable to view a site’s source code and use it for their education and ultimately for the work that they do. While copying a site’s code wholesale and passing it off as your own on a website is certainly not acceptable, using that code as a springboard to learn from is actually how many advancements are made in this industry. As we mentioned at the start of this article, you would be hard-pressed to find a working web professional today who has not learned something by viewing a site’s source! Yes, seeing a site’s source code is legal. Using that code as a resource to build something similar is also safe. Taking code as-is and passing it off as your work is where you start to encounter problems.   In the end, web professionals learn from each other and often improve upon the work that they see and are inspired by, so do not hesitate to view a site’s source code and use it as a learning tool.

More Than Just HTML

One thing to remember is that source files can be very complicated (and the more complex the website you are viewing is, the more complex that site’s code is likely to be). In addition to the HTML structure that makes up the page, there will also be CSS (cascading style sheets) that dictate the visual appearance of that site. Additionally, many websites today will include script files included along with the HTML. There are likely to be multiple script files included; in fact, each one powering different aspects of the site. Frankly, a site’s source code can seem overwhelming, especially if you are new to doing this. Don’t get frustrated if you can’t figure out what’s going on with that site immediately. Viewing the HTML source is just the first step in this process. With a little experience, you will begin to understand better how all these pieces fit together to create the website that you see in your browser. As you get more familiar with the code, you will be able to learn more from it, and it will not seem so daunting to you.