How to View the Source Code of a Website

cms-source-code

WordPress, Joomla, and Drupal are primarily powered by PHP.

However, as a user on a website, we don’t actually see what’s going on behind the scenes in the server. We only get the final output from the server, which is in the form of HTML, CSS, and Javascript. That’s the code that creates the webpage that we see.

This tutorial will show you how to see the code behind the front-end design and nicely formatted page. It will show you the HTML, CSS, and Javascript that your browser uses to display a page nicely to a user.

And it’s quite easy. Let’s get started.

View Page Source

media_1402423384649.png

Go to the outer edge of a site (e.g. far left), then right-click and click on “View Page Source” (or the option that’s similarly named).

That will bring up all the HTML code, along with links to CSS files, Javascript, images, etc.

media_1402423671686.png

You can now read through it and see what that page is created with.

You can also use Ctrl + F (command + F in Mac) to search through it for certain key words.

Getting Specific

media_1402423922506.png

If you want to drill down on a specific part of a page, most browsers now come with built-in inspectors. Or you can use Firebug in Firefox.

Just right-click on the object you’d like to inspect, then click on Inspect Element (or the option that’s similarly named).

media_1402424265523.png

The respective code will be high-lighted in the left window. Then you can click on the tags outside of it or within it to drill down on those. As you do that, it will high-light the part of the page it controls.

On the right side, you’ll see the CSS styles that are applied to the HTML tag that’s high-lighted.

This is an extremely useful and quick way to inspect code.

Wappalyzer

If you just want a quick way to see which technologies a website uses without doing the manual investigation, then check out our Wappalyzer tutorial.

Author

  • Nick Savov

    Nick is the Director of Support at OSTraining and you can find him in almost every area of the site, from answering support requests and account questions to creating tutorials and software.

0 0 votes
Article Rating
Subscribe
Notify of
guest

8 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
NoNumber
9 years ago

Just to add some info/insight:

The ‘Inspect Element’ (DOM inspector) doesn’t actually show the source HTML, but the generated DOM structure after JavaScript has had its go. So it will also show you elements that are generated through JavaScript. And won’t show you elements that have been removed via JavaScript.

So it is good to think about what you need to see. If you want to check the actual HTML output, use the ‘View Page Source’ and not the ‘Inspect Element’.

htmgarcia
9 years ago

Hi Peter,

good catch!
Thanks for sharing.
Regards

OST-User
9 years ago

So is there an effective way via (steps that we can take), say Google Chrome inspect tools, to inspect the source, to turn off know injected javascript to see the source output before javascript manipulates the page source?
Does anyone know of a good tutorial for beginners on how to effectively troubleshoot possible javascript issues/conflicts, via Google Chrome Dev inspect tools, to help isolate possible issues, and gather info for dev’s like Peter, before opening up support tickets. I’ve yet to find a decent guide/how to.
Peter, if you compiled an Ebook on the matter, I would surely buy it… or say, make it available to members for free, that purchase a years subscription to your NoNumbers extensions. 🙂

Riaz
Riaz
8 years ago

How to find the source code in Wp editor

Lekha
Lekha
6 years ago

How to get access to images as well ????…..

Doing right click->view page source provides access only to the html,css and javascript code of the page…so what about the images?

Malith madusanka pradeep
Malith madusanka pradeep
3 years ago

Nice good work. I also like To  make websites.
please help me

8
0
Would love your thoughts, please comment.x
()
x